/* =====================================================================
   EXHALE — CUSTOM CSS (fresh start)
   PART 1 = FUNCTIONAL base (paired with your header JS — keep these)
   PART 2 = NEW THEME · Stage A (the fresh look)
   All the OLD cosmetic theme CSS has been removed.
   =====================================================================

   RESPONSIVE MODEL — exactly TWO tiers, one breakpoint at 980px:
     • DESKTOP / iPad  →  @media (min-width:980px)
         iPad landscape (~1366) AND portrait (~1024) both land here.
     • MOBILE / phone  →  @media (max-width:979px)
         phones, and iPad only in a narrow split-screen (<980).
   Base (no media query) styles apply to BOTH tiers.
   Do NOT introduce other breakpoints (768/767/etc.) — keep the divide
   at 980 so behaviour stays predictable across every screen size.
   ===================================================================== */


/* =====================================================================
   PART 1 — FUNCTIONAL (do not delete; these style JS-injected elements)
   ===================================================================== */

/* --- emoji size --- */
.ipsEmoji img{
  --i--emo-he:3.0em; display:inline-block; height:var(--i--emo-he);
  vertical-align:bottom; margin-block:0; line-height:normal; max-width:100%;
}

/* --- emoji/icon picker ordering --- */
.ipsIconPicker [data-role="icons"]{ display:flex; flex-direction:column; }
.ipsIconPicker__container [data-icon-category]{ order:1; flex:0 0 auto; }
.ipsIconPicker__container :is([data-icon-category="Emotes"],[data-icon-category="Sass"],[data-icon-category="Happy"],[data-icon-category="Laughing"],[data-icon-category="Memes"],[data-icon-category="Sad"],[data-icon-category="Shocked"]){ order:0; }

/* --- tthumb hover-preview stacking --- */
.ipsData .tthumb__image{ z-index:1; }

/* --- hide the single-option Topic photo row on the create-topic form --- */
.ipsFieldRow:has(select[name="tthumb_type"]){ display:none !important; }

/* --- registration page: social block first on mobile --- */
@media (max-width:979px){
  body[data-pagecontroller="register"] .ipsColumns--lines{ display:flex !important; flex-direction:column !important; }
  body[data-pagecontroller="register"] #elRegisterSocial{ order:-1 !important; }
}

/* --- mobile nav icon button reset --- */
.ipsMobileNavIcons .ipsMobileNavIcons__button{
  all:unset !important; display:flex !important; align-items:center !important;
  gap:8px !important; cursor:pointer !important; color:inherit !important;
}

/* --- external embed (forum widgets shown on breatheheavy.com) --- */
body[data-controller="cms.front.external"] .ipsData__image,
body[data-controller="cms.front.external"] .ipsData__image i{ display:none !important; }
body[data-controller="cms.front.external"] .ipsData__content,
body[data-controller="cms.front.external"] .ipsData__main{ padding-left:0 !important; margin-left:0 !important; }
body[data-controller="cms.front.external"] .tthumb_topicRow{ grid-template-columns:1fr !important; }

.ipsLayout_noBackground .ipsWidget__header{ display:none; }
.ipsLayout_noBackground{ padding-bottom:0 !important; margin-bottom:0 !important; }
.ipsLayout_noBackground [data-role="statValue"],
.ipsLayout_noBackground .ipsDataItem_stats strong,
.ipsLayout_noBackground .ipsWidget strong,
.ipsLayout_noBackground h2,
.ipsLayout_noBackground h3{
  font-family:'Fraunces','Cooper Black',Georgia,serif !important; font-weight:900 !important;
  color:#ff6fbe !important; letter-spacing:-0.01em;
}
.ipsLayout_noBackground .ipsDataItem_title,
.ipsLayout_noBackground .ipsDataItem_title a,
.ipsLayout_noBackground .ipsStreamItem_title,
.ipsLayout_noBackground .ipsType_break a{
  font-family:'Fraunces','Cooper Black',Georgia,serif !important; font-weight:900 !important; color:#ff8fd0 !important;
}
.ipsLayout_noBackground .ipsType_light,
.ipsLayout_noBackground time,
.ipsLayout_noBackground .ipsDataItem_meta{ font-family:inherit !important; }

/* --- FLOATING ACTION BUTTON: new topic --- */
.exhale-fab{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%;
  background:#532bdd; color:#fff !important; display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:9999;
  transition:background .2s ease, transform .15s ease; text-decoration:none !important; cursor:pointer;
}
.exhale-fab:hover{ background:#6b3ff5; transform:scale(1.08); }
body[data-memberid="0"] .exhale-fab{ display:none !important; }
.ipsDialog_open .exhale-fab{ display:none !important; }

/* --- SLEEK TOPIC ACTION PILL (Reply + Next-unread; topic pages only) ---
   Replaces the old pink reply circle + floating next arrow. One glass
   pill, bottom-right, sitting clear above the dock. Styling continues
   in Stage GG (bottom of file). --- */


/* --- GUEST REGISTRATION MODAL (JS) --- */
#exhale-reg-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:99999; display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.exhale-reg-modal{ background:#1a1a1a; border:1px solid rgba(83,43,221,.3); border-radius:20px; padding:36px 32px; text-align:center; max-width:380px; width:100%; }
.exhale-reg-icon{ width:48px; height:48px; border-radius:50%; background:rgba(83,43,221,.15); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.exhale-reg-title{ font-family:'Inter Tight',sans-serif; font-size:22px; font-weight:700; color:#fff; margin-bottom:8px; }
.exhale-reg-limit{ font-size:12px; color:#f90578; font-weight:600; margin-bottom:12px; }
.exhale-reg-sub{ font-size:13px; color:rgba(255,255,255,.5); line-height:1.6; margin-bottom:24px; }
.exhale-reg-btn{ display:block; padding:14px; border-radius:28px; font-size:15px; font-weight:700; text-decoration:none; transition:transform .15s ease, opacity .15s ease; }
.exhale-reg-btn:hover{ transform:scale(1.02); opacity:.9; }
.exhale-reg-btn--primary{ background:#532bdd; color:#fff !important; margin-bottom:12px; }
.exhale-reg-btn--secondary{ background:rgba(255,255,255,.08); color:rgba(255,255,255,.6) !important; border:1px solid rgba(255,255,255,.1); }
.exhale-reg-note{ margin-top:16px; font-size:11px; color:rgba(255,255,255,.25); }
html[data-ips-scheme-active="light"] #exhale-reg-overlay{ background:rgba(0,0,0,.5); }
html[data-ips-scheme-active="light"] .exhale-reg-modal{ background:#fff; border-color:rgba(83,43,221,.12); box-shadow:0 16px 48px rgba(0,0,0,.2); }
html[data-ips-scheme-active="light"] .exhale-reg-icon{ background:rgba(83,43,221,.08); }
html[data-ips-scheme-active="light"] .exhale-reg-title{ color:#1a1a1a; }
html[data-ips-scheme-active="light"] .exhale-reg-sub{ color:#666; }
html[data-ips-scheme-active="light"] .exhale-reg-btn--secondary{ background:rgba(0,0,0,.04); color:#666 !important; border-color:rgba(0,0,0,.1); }
html[data-ips-scheme-active="light"] .exhale-reg-note{ color:#bbb; }
.exhale-no-scroll{ overflow:hidden !important; height:100% !important; position:fixed !important; width:100% !important; }

/* --- EXHALE+ INLINE FEED CARD (JS-injected promo) --- */
.exhale-feed-card{ padding:16px; display:flex; align-items:center; justify-content:center; gap:16px; background:rgba(83,43,221,.06); border:1px solid rgba(83,43,221,.4) !important; border-radius:12px; margin:8px 12px; }
.exhale-feed-card-inner{ display:flex; align-items:center; gap:10px; min-width:0; }
.exhale-feed-card-title{ font-size:13px; font-weight:600; color:rgba(255,255,255,.8); }
.exhale-feed-card-sub{ font-size:11px; color:rgba(255,255,255,.35); margin-top:1px; }
.exhale-feed-card-btn{ flex-shrink:0; padding:6px 14px; border-radius:20px; background:#532bdd; color:#fff !important; font-size:11px; font-weight:700; text-decoration:none; transition:transform .15s ease, opacity .15s ease; }
.exhale-feed-card-btn:hover{ transform:scale(1.02); opacity:.9; }
.ipsBox--topicHeader + .exhale-feed-card{ margin:20px 0; }
@media (max-width:979px){ .exhale-feed-card{ justify-content:center; } }
html[data-ips-scheme-active="light"] .exhale-feed-card{ background:rgba(83,43,221,.04); border-color:rgba(83,43,221,.1) !important; }
html[data-ips-scheme-active="light"] .exhale-feed-card-title{ color:rgba(0,0,0,.7) !important; }
html[data-ips-scheme-active="light"] .exhale-feed-card-sub{ color:rgba(0,0,0,.35) !important; }
html[data-ips-scheme-active="light"] .exhale-feed-card-btn{ background:#532bdd !important; color:#fff !important; }

/* --- Exhale+ page testimonials --- */
.ep-testimonials{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }
.ep-testimonial{ display:flex; align-items:flex-start; gap:14px; padding:16px 20px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; }
.ep-testimonial-photo{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.ep-testimonial-content{ min-width:0; }
.ep-testimonial-quote{ font-size:13px; color:rgba(255,255,255,.7); line-height:1.5; font-style:italic; }
.ep-testimonial-user{ font-size:11px; color:rgba(255,255,255,.35); margin-top:6px; font-weight:600; }
html[data-ips-scheme-active="light"] .ep-testimonial{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
html[data-ips-scheme-active="light"] .ep-testimonial-quote{ color:#444; }
html[data-ips-scheme-active="light"] .ep-testimonial-user{ color:#999; }


/* =====================================================================
   PART 2 — NEW THEME · STAGE A: global look + glass dock
   ===================================================================== */

:root{
  /* sentinel the header polls to confirm custom.css is actually applied
     before revealing the page (prevents the IPS-default row layout from
     flashing under the theme grid on slower loads). */
  --exhale-css:1;
  --ex-bg:#0b0a10; --ex-panel:#16141e; --ex-panel-2:#1d1a28; --ex-line:rgba(255,255,255,.08);
  --ex-purple:#8b6dff; --ex-purple-fill:#6d4be6; --ex-pink:#ff3d94; --ex-muted:#8f8ba8;
  --ex-blue:#4f9dff; /* the blue from the logo / Start button — primary username color */
  --ex-display:"Fraunces",Georgia,"Times New Roman",serif;
}

html[data-ips-scheme-active="dark"]{
  --i-base_1:#16141e !important; --i-base_2:#1d1a28 !important; --i-base_3:#262236 !important;
  --i-body--ba-co:#0b0a10 !important; --i-box--ba-co:#16141e !important;
  --i-boxHeader--ba-co:#16141e !important; --i-widget-header--ba-co:#16141e !important;
}
html[data-ips-scheme-active="dark"] body{ background-color:var(--ex-bg); }

.ipsPageHeader__title h1, .ipsType_pageTitle, .ipsWidget__header h3, .ipsBox__title{
  font-family:var(--ex-display) !important; font-weight:900; letter-spacing:-.01em;
}
/* ...but the title INSIDE a topic should read in the site's body font, not
   the Fraunces display serif. `inherit` = whatever the surrounding text uses.
   (The reply form's "Leave a comment" heading is a ::before on #replyForm —
   styled in Stage AB, not here.) */
body[data-pagecontroller="topic"] .ipsPageHeader__title h1,
body[data-pagecontroller="topic"] .ipsPageHeader__title h1 span{
  font-family:inherit !important;
  font-weight:700 !important;
  letter-spacing:normal !important;
}
/* member usernames = the logo blue, in light + dark. No !important, so a
   member's group name-colour (set inline by IPS for staff etc.) still wins. */
a.ipsUsername,
.ipsData a.ipsUsername,
.ipsComment a.ipsUsername,
.ipsEntry a.ipsUsername{ color:var(--ex-blue); }

/* topic-list view: the "Started by" + "Last reply by" usernames use the
   periwinkle blue instead. Still non-!important, so staff group name
   colours (set inline) continue to win. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item a.ipsUsername{
  color:#7b74f2;
}

/* --- GLASS DOCK — styled at ALL widths (mobile + forced onto desktop) --- */
.ipsMobileFooter{
  position:fixed; bottom:8px; left:50%; transform:translateX(-50%);
  width:auto; max-width:calc(100% - 20px); height:auto; padding:6px;
  /* subtle ANIMATED gradient tint over the translucent base — same flow
     as the buttons, but low-alpha so the pill stays glassy/transparent. */
  background:
    linear-gradient(90deg, rgba(139,109,255,.30), rgba(109,75,230,.14), rgba(79,157,255,.28), rgba(139,109,255,.30)),
    rgba(24,22,36,.62);
  background-size:300% 100%, auto;
  animation:exReplyGradient 7s ease infinite;
  -webkit-backdrop-filter:blur(22px) saturate(1.6); backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.09); z-index:9000;
}
@media (prefers-reduced-motion:reduce){ .ipsMobileFooter{ animation:none !important; } }
.ipsMobileFooter > ul{ display:flex; gap:2px; margin:0; padding:0; list-style:none; justify-content:center; }
.ipsMobileFooter__item{ flex:0 0 auto; margin:0; }
.ipsMobileFooter__link{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--ex-muted); }
.ipsMobileFooter__link:hover{ color:#fff; background:rgba(139,109,255,.22); }
.ipsMobileFooter__icon svg, .ipsMobileFooter__icon i{ font-size:17px; }
.ipsMobileFooter__text{ display:none; }
.ipsMobileFooter .ipsNotification{ top:4px; right:4px; font-size:9px; min-width:15px; height:15px; line-height:15px; padding:0 3px; }
.ipsMobileFooter .exhale-plus-nav,
.ipsMobileFooter [data-el="chatpro"],
.ipsMobileFooter #elChatpro_mobileFooterContainer{ display:none !important; }
.exhale-fab{ bottom:92px !important; }
html[data-ips-scheme-active="light"] .ipsMobileFooter{ background:rgba(255,255,255,.66); border-color:rgba(0,0,0,.1); }
html[data-ips-scheme-active="light"] .ipsMobileFooter__link{ color:#5a5a6a; }

/* --- SINGLE 780px COLUMN + mobile chrome forced on desktop --- */
.ipsWidth--main-content{ max-width:812px !important; }   /* 780 + gutters */

@media (min-width:980px){
  /* Slim the real desktop header: keep logo + account icons, drop the nav
     menu and the breadcrumb/search row. The dock handles navigation. */
  .ipsHeader__primary [data-ips-header-content="navigation"]{ display:none !important; }
  .ipsHeader__secondary{ display:none !important; }
  .ipsHeader__primary .ipsWidth{ max-width:812px; }
  /* keep the glass dock as the nav on desktop */
  .ipsMobileFooter{ display:block !important; }
  /* one column: hide the sidebar, let the main column fill the width */
  #ipsLayout_sidebar, .ipsLayout__secondary-column{ display:none !important; }
  .ipsLayout__columns{ display:block !important; }
  .ipsLayout__primary-column{ width:100% !important; max-width:100% !important; flex:none !important; }
}

/* --- Feed/forum rows: hide the topic preview text (titles only) --- */
.ipsData__desc{ display:none !important; }

/* ================================================================
   Stage A.3 — ssslither-style cleanup: blended header, aligned
   column, dock at all widths, new-topic pill
   ================================================================ */
:root{ --ex-wrap:780px; }

/* HEADER: blend into the page (kill the full-width bar) — just a hairline
   under it, content centered to the column so it lines up with the feed. */
.ipsHeader__primary{
  background:transparent !important;
  border-bottom:0 !important;   /* no hairline at the very top; the glass
                                   shadow on .exhale-scrolled separates it */
  box-shadow:none !important;
}
.ipsHeader__primary .ipsWidth,
.ipsHeader__primary .ipsHeader__align{
  max-width:var(--ex-wrap) !important; margin-inline:auto !important;
}

/* One centered column at the same width, so header + feed align */
.ipsWidth--main-content,
.ipsLayout__main > .ipsWidth,
.ipsLayout__main .ipsWidth,
#elCmsPageWrap{
  max-width:var(--ex-wrap) !important; margin-inline:auto !important;
}

/* "View in the app" bar (#exhale-a2hs-bar, injected inline by the theme
   header) was full-bleed 100%. Match it to the site column width so it
   lines up with the content instead of spanning edge-to-edge, and round
   it into a tidy inset banner. Its own width/background come from a <style>
   in the theme header that loads AFTER custom.css, so a plain #id rule ties
   on specificity and loses on source order — `html body #id` outranks it
   and wins regardless. (Background is left as the theme's gradient.) */
html body #exhale-a2hs-bar{
  max-width:var(--ex-wrap) !important;
  margin:8px auto 0 !important;
  left:0 !important; right:0 !important;
  box-sizing:border-box !important;
  border-radius:14px !important; overflow:hidden !important;
}
@media (max-width:979px){
  /* on phones the column already fills the screen — keep small side gutters
     so the bar matches the content padding rather than touching the edges */
  html body #exhale-a2hs-bar{ margin:8px 12px 0 !important; }
}

/* Glass dock: force visible at EVERY width (was disappearing on wide desktop) */
.ipsMobileFooter{ display:block !important; }

/* NEW-TOPIC button → a beautiful gradient pill instead of a bare circle */
.exhale-fab{
  width:auto !important; height:auto !important; padding:13px 21px !important;
  border-radius:999px !important; gap:9px; font-size:15px !important; font-weight:700;
  background:linear-gradient(135deg, #8b6dff, #6d4be6) !important;
  box-shadow:0 10px 26px rgba(109,75,230,.5) !important;
}
.exhale-fab::after{ content:"New topic"; white-space:nowrap; letter-spacing:.2px; }
.exhale-fab:hover{ filter:brightness(1.06); transform:translateY(-2px); }

/* ================================================================
   Stage B — homepage feed rows: transparent column, circular
   thumbnails, clear "started by / last reply", stat pills
   ================================================================ */

/* Transparent column — dissolve the box so rows sit on the page bg */
.ipsWidget, .ipsWidget__content, .cWidgetContainer, .cWidgetContainer--isWidget,
.ipsData--topic-feed-widget{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.ipsWidget__header{ background:transparent !important; border:0 !important; padding-inline:2px !important; }

/* Row */
.ipsData--topic-feed-widget .ipsData__item{
  display:flex !important; gap:15px; align-items:flex-start;
  padding:18px 2px !important; background:transparent !important;
  border-bottom:1px solid var(--ex-line) !important;
}

/* Circular thumbnail (was a big square) */
.ipsData--topic-feed-widget .ipsData__image,
.ipsData--topic-feed-widget .tthumb__image{
  flex:0 0 58px !important; width:58px !important; height:58px !important;
  border-radius:50% !important; overflow:hidden !important; margin:0 !important;
}
.ipsData--topic-feed-widget .ipsData__image img,
.ipsData--topic-feed-widget .tthumb__image img{
  width:100% !important; height:100% !important; object-fit:cover; border-radius:50% !important;
}

/* Content stacks: category, title, then a footer line */
.ipsData--topic-feed-widget .ipsData__content{ display:flex !important; flex-direction:column; gap:6px; flex:1 1 auto; min-width:0; }
.ipsData--topic-feed-widget .ipsData__main{ display:flex; flex-direction:column; gap:4px; }
.ipsData--topic-feed-widget .ipsData__title h4 a{ font-size:1.04rem; font-weight:700; line-height:1.32; }

/* "Started by" = original poster (under the title) */
.ipsData--topic-feed-widget .ipsData__meta{ font-size:.72rem; color:var(--ex-muted); }
.ipsData--topic-feed-widget .ipsData__meta::before{ content:"Started by "; opacity:.65; }

/* Footer line: last reply on the left, stat pills on the right */
.ipsData--topic-feed-widget .ipsData__extra{ display:flex !important; align-items:center; gap:12px; flex-wrap:wrap; margin-top:2px; }

/* Last reply — hide the duplicate original-author cluster, label the real one */
.ipsData--topic-feed-widget .ipsData__last--author{ display:none !important; }
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"]{
  display:inline-flex !important; align-items:center; gap:6px; font-size:.72rem; color:var(--ex-muted);
}
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"]::before{ content:"Last reply "; opacity:.65; }
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto{ width:18px !important; height:18px !important; flex:0 0 18px; }
.ipsData--topic-feed-widget .ipsData__last-text{ display:inline-flex; align-items:center; gap:5px; }
.ipsData--topic-feed-widget .ipsData__last-primary,
.ipsData--topic-feed-widget .ipsData__last-secondary{ display:inline-flex; align-items:center; }

/* Stat pills (views / replies) */
.ipsData--topic-feed-widget .ipsData__stats{ display:flex !important; gap:8px; margin:0 0 0 auto; }
.ipsData--topic-feed-widget .ipsData__stats li{
  display:inline-flex !important; align-items:center; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid var(--ex-line);
  border-radius:999px; padding:4px 11px; font-size:.68rem; font-weight:600; color:var(--ex-muted);
}
.ipsData--topic-feed-widget .ipsData__stats li[data-stattype="forums_comments"]{ color:var(--ex-purple); border-color:rgba(139,109,255,.3); }

/* Fade + rise each row in as it scrolls into view (JS-free, GPU-driven).
   Above-the-fold rows appear instantly; the rest fade in as you reach them
   — which lines up with the lazy-loading thumbnails. */
@media (prefers-reduced-motion: no-preference){
  .ipsData--topic-feed-widget .ipsData__item{
    animation: exRowIn .5s ease both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
@keyframes exRowIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ================================================================
   Stage B.1 — cleanup pass
   ================================================================ */

/* Smaller topic headline (was too big) */
.ipsData--topic-feed-widget .ipsData__title h4 a{
  font-size:15px !important; font-weight:600 !important; line-height:1.35 !important;
}

/* Hide the floating ChatPro message bubble (bottom-left) */
.chatpro--launcher{ display:none !important; }

/* Ditch the Exhale+ "Browse ad-free" inline promo */
.exhale-feed-card{ display:none !important; }

/* Site footer: match the page background (no distinct bar) */
.ipsFooter, .ipsFooter__footer, .ipsFooter__widgets{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}

/* Lock everyone to the dark scheme: hide the light / dark / system
   (contrast) toggle in the footer so users can't switch to light mode.
   The THEME selector (Purple & Pink / Blurple) in the footer links stays,
   so members can still pick a theme — just not a light color scheme. */
.ipsColorSchemeChanger{ display:none !important; }

/* ----------------------------------------------------------------
   MOBILE site footer cleanup. IPS lays .ipsFooter__align out for
   desktop (social icons on one side, links on the other), which on a
   phone reads as "icons shoved right, links wrapping centered below".
   Restack it as ONE tidy centered column: scheme toggle · social ·
   links · copyright — each row centered with even spacing.
   (This is the site footer .ipsFooter__footer — NOT the glass dock
   .ipsMobileFooter, which is handled separately.)
   ---------------------------------------------------------------- */
@media (max-width:979px){
  .ipsFooter__footer .ipsFooter__align{
    display:flex !important; flex-direction:column !important;
    align-items:center !important; justify-content:center !important;
    gap:16px !important; text-align:center !important; width:100% !important;
  }
  /* social icons: one centered row */
  .ipsFooter__footer .ipsSocialIcons{
    display:flex !important; flex-flow:row wrap !important; justify-content:center !important;
    align-items:center !important; gap:16px !important;
    margin:0 !important; padding:0 !important; list-style:none !important; width:auto !important;
  }
  .ipsFooter__footer .ipsSocialIcons > li{ margin:0 !important; }
  /* pull the footer up now that the scheme toggle row is gone */
  .ipsFooter__footer{ padding-top:6px !important; margin-top:0 !important; }
  .ipsFooter__footer .ipsFooter__align{ gap:14px !important; padding-top:0 !important; }
  /* footer links: centered, wrapping cleanly with even spacing */
  .ipsFooter__footer .ipsFooterLinks{
    display:flex !important; flex-flow:row wrap !important; justify-content:center !important;
    align-items:center !important; gap:8px 18px !important;
    margin:0 !important; padding:0 !important; list-style:none !important; width:auto !important;
  }
  .ipsFooter__footer .ipsFooterLinks > li{ margin:0 !important; }
  /* copyright: stacked + centered */
  .ipsFooter__footer .ipsCopyright{
    display:flex !important; flex-direction:column !important; align-items:center !important;
    gap:4px !important; margin:0 !important; text-align:center !important; width:100% !important;
  }
  /* the divider between social + links: slim + centered, not full-bleed */
  .ipsFooter__footer .ipsFooter__align hr{
    width:100% !important; max-width:260px !important; margin:0 auto !important;
    border:0 !important; border-top:1px solid var(--ex-line) !important;
  }
}

/* Dock: force it visible at desktop widths too (ID beats IPS's hide rule) */
#ipsMobileFooter{ display:block !important; visibility:visible !important; opacity:1 !important; }

/* Dock: equal space above/below the icons */
#ipsMobileFooter{ padding:6px !important; }
#ipsMobileFooter > ul{ align-items:center !important; }
#ipsMobileFooter .ipsMobileFooter__link{ width:42px !important; height:42px !important; padding:0 !important; }
#ipsMobileFooter .ipsMobileFooter__icon{ margin:0 !important; display:flex !important; align-items:center; justify-content:center; }

/* New-topic pill → anchored to the top-right of the ~900px column (header area),
   compact. right:calc(50% - 450px) lines its right edge up with the column;
   max() keeps it in the corner on narrower screens. */
#exhale-fab{
  position:fixed !important;
  top:70px !important; bottom:auto !important;
  right:max(14px, calc(50% - 450px)) !important;
  width:auto !important; height:auto !important;
  padding:8px 15px !important; gap:7px !important;
  font-size:13px !important; font-weight:700 !important; border-radius:999px !important;
  background:linear-gradient(135deg, #8b6dff, #6d4be6) !important;
  box-shadow:0 6px 16px rgba(109,75,230,.4) !important;
  z-index:9500 !important;
}

/* ================================================================
   Stage C — feedback pass: dock visibility, last-reply on ONE
   line, orderly stacked starter/last-reply rows, spacing
   ================================================================ */

/* --- DOCK: it WAS rendering on wide desktop, just nearly invisible
   (the .62 glass melted into the near-black page). Make it a solid,
   readable glass pill so it reads on every width. --- */
.ipsMobileFooter, #ipsMobileFooter{
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.8) !important;
  backdrop-filter:blur(30px) saturate(1.8) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* --- ORDERLY ROWS ---------------------------------------------------
   Two clean, aligned lines under the title:
     [·] Started by  Username · 8 hours ago
     [avatar] Last reply  Username · 6 minutes ago
   Room above (title → lines) and equal room below (lines → hairline). */

/* Give the title breathing room before the two meta lines */
.ipsData--topic-feed-widget .ipsData__main{ margin-bottom:8px !important; }

/* Both meta lines: same size/colour, single row, vertical rhythm */
.ipsData--topic-feed-widget .ipsData__meta,
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"]{
  display:flex !important; align-items:center; gap:6px;
  font-size:.72rem !important; line-height:1.3 !important; color:var(--ex-muted) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
  margin:0 !important;
}
.ipsData--topic-feed-widget .ipsData__meta{ margin-bottom:5px !important; }

/* Starter line — small round avatar dot if the widget emits one, else a
   subtle bullet so the two lines still align on the left edge */
.ipsData--topic-feed-widget .ipsData__meta .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__meta img{
  width:18px !important; height:18px !important; flex:0 0 18px !important;
  border-radius:50% !important; object-fit:cover; margin:0 !important;
}

/* Last-reply line — force it to stay on ONE line (was wrapping) */
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"] *{
  white-space:nowrap !important;
}
.ipsData--topic-feed-widget .ipsData__last-text{
  display:inline-flex !important; flex-direction:row !important;
  align-items:center; gap:5px; white-space:nowrap !important;
}
.ipsData--topic-feed-widget .ipsData__last-primary,
.ipsData--topic-feed-widget .ipsData__last-secondary{
  display:inline !important; white-space:nowrap !important;
}
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last img{
  width:18px !important; height:18px !important; flex:0 0 18px !important;
  border-radius:50% !important; object-fit:cover; margin:0 !important;
}

/* Stat pills: drop them onto their own line under the two meta rows so
   nothing competes for horizontal space (keeps last-reply on one line) */
.ipsData--topic-feed-widget .ipsData__stats{
  margin:8px 0 0 0 !important; flex-wrap:wrap;
}

/* ================================================================
   Stage C.1 — compact "who's online" + forums list at the top
   Collapse the big online-users block into a single discreet line
   ("N are online →") and shrink the forums list into a quiet strip.
   ================================================================ */

/* Who's online widget — hide the grid of member photos, keep only the
   header/count line, make it small and quiet. */
.ipsWidget [data-role="activeUsers"],
.ipsWidgetOnlineUsers .ipsData,
[data-widgetkey*="online"] .ipsPhotoPanel,
[data-widgetkey*="online"] ul.ipsData{ display:none !important; }

.ipsWidgetOnlineUsers, [data-widgetkey*="online"]{
  padding:6px 2px !important; background:transparent !important; border:0 !important;
}
.ipsWidgetOnlineUsers .ipsWidget__header,
[data-widgetkey*="online"] .ipsWidget__header{
  background:transparent !important; padding:0 !important; border:0 !important;
  font-size:.74rem !important; color:var(--ex-muted) !important; font-weight:600 !important;
}

/* Forums-list widget — quiet strip, not a big card */
[data-widgetkey*="forum"] .ipsWidget__content,
.ipsWidgetForumList .ipsWidget__content{
  background:transparent !important; border:0 !important; padding:2px !important;
}

/* ================================================================
   Stage C.2 — New topic INTO the dock + forums chip strip
   ================================================================ */

/* --- NEW TOPIC → a compact "+" icon button that reads as the dock's
   primary create action: a round purple button raised just above the
   glass dock, centered, always visible on desktop + mobile. --- */
#exhale-fab, .exhale-fab{
  position:fixed !important;
  left:50% !important; right:auto !important;
  bottom:78px !important; top:auto !important;
  transform:translateX(-50%) !important;
  width:54px !important; height:54px !important;
  padding:0 !important; gap:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:0 !important;                 /* hide the "New topic" text label */
  border-radius:50% !important;
  background:linear-gradient(135deg, #8b6dff, #6d4be6) !important;
  box-shadow:0 10px 26px rgba(109,75,230,.5) !important;
  z-index:9600 !important;
}
/* render a crisp "+" glyph regardless of the button's inner markup */
#exhale-fab::after, .exhale-fab::after{
  content:"+" !important; font-size:30px !important; font-weight:400 !important;
  line-height:1 !important; color:#fff !important; letter-spacing:0 !important;
}
/* hide any inner icon/text so we don't double up with the "+" */
#exhale-fab > *, .exhale-fab > *{ display:none !important; }
#exhale-fab:hover, .exhale-fab:hover{ filter:brightness(1.06); transform:translateX(-50%) translateY(-2px) !important; }

/* --- FORUMS CHIP STRIP: turn the forums-list widget into a compact,
   horizontally-scrolling row of forum-name chips under the header. --- */
[data-widgetkey*="forum"] .ipsWidget__content > ul,
[data-widgetkey*="forum"] ul.ipsData,
.ipsWidgetForumList .ipsWidget__content > ul{
  display:flex !important; flex-wrap:nowrap !important; gap:8px !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch;
  padding:4px 2px 10px !important; margin:0 !important; list-style:none !important;
  scrollbar-width:none;
}
[data-widgetkey*="forum"] .ipsWidget__content > ul::-webkit-scrollbar,
.ipsWidgetForumList .ipsWidget__content > ul::-webkit-scrollbar{ display:none; }

[data-widgetkey*="forum"] .ipsWidget__content > ul > li,
.ipsWidgetForumList .ipsWidget__content > ul > li{
  flex:0 0 auto !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important;
}
/* the forum name becomes the chip; kill descriptions / stats / last-post */
[data-widgetkey*="forum"] .ipsData__desc,
[data-widgetkey*="forum"] .ipsData__meta,
[data-widgetkey*="forum"] .ipsData__last,
[data-widgetkey*="forum"] .ipsData__stats,
[data-widgetkey*="forum"] .ipsData__image,
[data-widgetkey*="forum"] .ipsData__icon{ display:none !important; }

[data-widgetkey*="forum"] .ipsData__title a,
[data-widgetkey*="forum"] li > a,
.ipsWidgetForumList li a{
  display:inline-block !important; padding:6px 13px !important;
  border-radius:999px !important; background:rgba(255,255,255,.05) !important;
  border:1px solid var(--ex-line) !important;
  font-size:.74rem !important; font-weight:600 !important; white-space:nowrap !important;
  color:#d7d5ef !important;
}
[data-widgetkey*="forum"] .ipsData__title a:hover,
.ipsWidgetForumList li a:hover{
  background:rgba(139,109,255,.18) !important; border-color:rgba(139,109,255,.4) !important; color:#fff !important;
}

/* ================================================================
   Stage D — built against the REAL forum markup
   ================================================================ */

/* ---------- TOPIC ROWS: two orderly lines w/ avatars -------------
   DOM per row:
     .ipsData__content
       .ipsData__main    → .ipsData__category, .ipsData__title, .ipsData__meta (text only)
       .ipsData__extra   → .ipsData__stats,
                            .ipsData__last.ipsData__last--author  (STARTER: photo+name+start time)
                            .ipsData__last[latestUserPhoto]        (LAST REPLY: photo+name+reply time)
   We drop the text-only meta line and instead surface BOTH avatar
   clusters as the two aligned rows the user asked for. ---------- */

/* Room between the title block and the two meta lines */
.ipsData--topic-feed-widget .ipsData__main{ margin-bottom:0 !important; }
.ipsData--topic-feed-widget .ipsData__title{ margin-bottom:0 !important; }

/* Hide the text-only starter line (the avatar cluster replaces it) */
.ipsData--topic-feed-widget .ipsData__meta{ display:none !important; }

/* Stack the extra block: starter line, last-reply line, then pills */
.ipsData--topic-feed-widget .ipsData__extra{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:6px !important; margin-top:10px !important; flex-wrap:nowrap !important;
}
.ipsData--topic-feed-widget .ipsData__last--author{ order:1; }
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"]{ order:2; }
.ipsData--topic-feed-widget .ipsData__stats{ order:3; margin:2px 0 0 0 !important; }

/* Both meta lines share one clean style: [avatar] name label · time */
.ipsData--topic-feed-widget .ipsData__last,
.ipsData--topic-feed-widget .ipsData__last--author{
  display:flex !important; align-items:center !important; gap:7px !important;
  font-size:.72rem !important; line-height:1.3 !important; color:var(--ex-muted) !important;
  white-space:nowrap !important; overflow:hidden; min-width:0; margin:0 !important; max-width:100%;
}
/* tiny round avatar */
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last--author .ipsUserPhoto{
  width:19px !important; height:19px !important; flex:0 0 19px !important;
  border-radius:50% !important; overflow:hidden !important; margin:0 !important; display:block !important;
}
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto img,
.ipsData--topic-feed-widget .ipsData__last--author .ipsUserPhoto img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important;
}
/* the text cluster stays inline on ONE line */
.ipsData--topic-feed-widget .ipsData__last-text{
  display:inline-flex !important; flex-direction:row !important; align-items:center !important;
  gap:4px !important; white-space:nowrap !important; min-width:0; overflow:hidden;
}
.ipsData--topic-feed-widget .ipsData__last-primary,
.ipsData--topic-feed-widget .ipsData__last-secondary{
  display:inline-flex !important; align-items:center !important; white-space:nowrap !important;
}
/* homepage feed: usernames blend with the meta text — same muted colour,
   not bold — so the line reads as one quiet "name started this topic · 2hr". */
.ipsData--topic-feed-widget .ipsData__last-primary a.ipsUsername{ color:var(--ex-muted) !important; font-weight:400 !important; }
.ipsData--topic-feed-widget .ipsData__last-secondary{ color:var(--ex-muted) !important; }

/* action labels + separator (kill the old "Last reply " prefix) */
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"]::before,
.ipsData--topic-feed-widget .ipsData__meta::before{ content:"" !important; }
.ipsData--topic-feed-widget .ipsData__last--author .ipsData__last-primary::after{
  content:" started this topic"; color:var(--ex-muted); opacity:.75; font-weight:400; margin-left:4px;
}
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"] .ipsData__last-primary::after{
  content:" replied"; color:var(--ex-muted); opacity:.75; font-weight:400; margin-left:4px;
}
.ipsData--topic-feed-widget .ipsData__last-secondary::before{ content:"·"; opacity:.5; margin-right:4px; }

/* ---------- WHO'S ONLINE → one discreet "N online" line ----------
   The homepage widget lists only logged-in members (no total, no
   guests). The TRUE total ("1,984 users online") lives on /online/.
   So: collapse the list, show a CSS-counter fallback immediately
   (members online), and let the tiny header script inject the real
   guest-inclusive total as #exhale-online-count (which then hides
   the fallback via :has). ---------- */
[data-blockid^="app_core_whosOnline"]{
  background:transparent !important; border:0 !important; box-shadow:none !important; margin:0 0 6px !important;
}
[data-blockid^="app_core_whosOnline"] .ipsWidget__header{ display:none !important; } /* hide "Exhalers Online" title + link */
[data-blockid^="app_core_whosOnline"] .ipsWidget__content{
  counter-reset: exOnline; padding:2px 0 0 !important; background:transparent !important; text-align:center !important;
}
[data-blockid^="app_core_whosOnline"] .ipsList--csv{
  display:block !important; max-height:0 !important; overflow:hidden !important; margin:0 !important; padding:0 !important;
}
[data-blockid^="app_core_whosOnline"] .ipsList--csv li{ counter-increment: exOnline; }
/* instant fallback (members online) — replaced the moment JS injects the real total */
[data-blockid^="app_core_whosOnline"] .ipsWidget__content::after{
  content:"● " counter(exOnline) " online now";
  display:inline-block; font-size:.72rem; font-weight:600; color:var(--ex-muted); letter-spacing:.02em;
}
[data-blockid^="app_core_whosOnline"] .ipsWidget__content:has(#exhale-online-count)::after{ content:none !important; }
/* the real guest-inclusive total, injected by the header script */
#exhale-online-count{
  display:inline-block; font-size:.72rem; font-weight:600; color:var(--ex-muted) !important;
  letter-spacing:.02em; text-decoration:none;
}
#exhale-online-count:hover{ color:var(--ex-purple) !important; }

/* ---------- FORUMS LIST → horizontal chip strip ------------------
   Real DOM: #elforumsCategoriesBlock .ipsSideMenu .ipsSideMenu__list
   > li > a.ipsSideMenu_item (category) > nested ul (the forums).
   Hide the parent category link + counts, lay the forums out as chips. */
/* One inline row: [FORUMS]  chip chip chip →  (chips scroll horizontally) */
#elforumsCategoriesBlock{
  display:flex !important; align-items:center !important; gap:12px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
#elforumsCategoriesBlock .ipsWidget__header{
  flex:0 0 auto !important; margin:0 !important;
  background:transparent !important; border:0 !important; padding:0 !important;
  font-size:.7rem !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ex-muted) !important;
}
#elforumsCategoriesBlock .ipsWidget__content{
  flex:1 1 auto !important; min-width:0 !important;
  padding:0 !important; background:transparent !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#elforumsCategoriesBlock .ipsWidget__content::-webkit-scrollbar{ display:none !important; }
#elforumsCategoriesBlock .ipsSideMenu,
#elforumsCategoriesBlock .ipsSideMenu--truncate{ max-height:none !important; overflow:visible !important; }
/* hide the top-level category anchor ("Discussions") and its count badges */
#elforumsCategoriesBlock .ipsSideMenu > .ipsSideMenu__list > li > a.ipsSideMenu_item{ display:none !important; }
#elforumsCategoriesBlock .ipsBadge{ display:none !important; }
/* single horizontal, non-wrapping chip row */
#elforumsCategoriesBlock .ipsSideMenu__list{
  display:flex !important; flex-wrap:nowrap !important; gap:8px !important;
  margin:0 !important; padding:0 !important; list-style:none !important; white-space:nowrap !important;
}
#elforumsCategoriesBlock .ipsSideMenu__list li{ margin:0 !important; padding:0 !important; flex:0 0 auto !important; }
#elforumsCategoriesBlock a.ipsSideMenu_item{
  display:inline-flex !important; align-items:center !important;
  padding:6px 13px !important; border-radius:999px !important;
  background:rgba(255,255,255,.05) !important; border:1px solid var(--ex-line) !important;
  font-size:.74rem !important; font-weight:600 !important; color:#d7d5ef !important; white-space:nowrap !important;
}
#elforumsCategoriesBlock a.ipsSideMenu_item:hover{
  background:rgba(139,109,255,.18) !important; border-color:rgba(139,109,255,.4) !important; color:#fff !important;
}
#elforumsCategoriesBlock .ipsSideMenu__text{ white-space:nowrap !important; }

/* ================================================================
   Stage C.3 — DESKTOP DOCK: make the glass pill airtight
   The dock renders on desktop but IPS's own footer styling is
   mobile-scoped, so on wide screens it can show up bare/faint.
   Re-assert the full pill here so it looks identical at every width.
   ================================================================ */
html[data-ips-scheme-active] .ipsMobileFooter,
html[data-ips-scheme-active] #ipsMobileFooter,
.ipsMobileFooter, #ipsMobileFooter{
  display:block !important; visibility:visible !important; opacity:1 !important;
  position:fixed !important; left:50% !important; right:auto !important;
  bottom:12px !important; top:auto !important;
  transform:translateX(-50%) !important;
  width:auto !important; max-width:calc(100% - 24px) !important; height:auto !important;
  padding:6px !important; margin:0 !important;
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.8) !important;
  backdrop-filter:blur(30px) saturate(1.8) !important;
  border:1px solid rgba(255,255,255,.22) !important; border-radius:999px !important;
  box-shadow:0 16px 44px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10) !important;
  z-index:9000 !important;
}
.ipsMobileFooter > ul, #ipsMobileFooter > ul{
  display:flex !important; flex-wrap:nowrap !important; gap:2px !important;
  align-items:center !important; justify-content:center !important;
  margin:0 !important; padding:0 !important; list-style:none !important; width:auto !important;
}
.ipsMobileFooter__item, #ipsMobileFooter .ipsMobileFooter__item{
  flex:0 0 auto !important; margin:0 !important; width:auto !important;
}

/* ================================================================
   Stage E — mobile polish
   ================================================================ */

/* 1) Hide breadcrumbs (we navigate via the dock + chips) */
.ipsBreadcrumb, .ipsBreadcrumbWrapper, .ipsBreadcrumb__wrap,
nav[aria-label="Breadcrumb"], [data-role="breadcrumbList"]{ display:none !important; }

/* 6) Narrower column — cap every content area + the feed and center it
   (--ex-wrap is already defined once, higher up — no need to redeclare) */
#elCmsPageWrap, .cCmsRecord, .ipsLayout__main,
.cWidgetContainer[data-widget-area],
.ipsData--topic-feed-widget,
[data-blockid^="app_core_whosOnline"],
#elforumsCategoriesBlock{
  max-width:var(--ex-wrap) !important; margin-inline:auto !important;
}

/* 7) Even alignment of the two meta lines + kill the double middot.
   Evidence from the live render: the STARTER cluster carries a native
   "·" separator; the LAST-REPLY cluster carries a reply-arrow icon
   instead. So: drop our universal "·", hide the reply arrow, and add
   a single "·" only to the "replied" label. */
.ipsData--topic-feed-widget .ipsData__last-secondary::before{ content:"" !important; }
.ipsData--topic-feed-widget .ipsData__last i,
.ipsData--topic-feed-widget .ipsData__last [class*="fa-reply"],
.ipsData--topic-feed-widget .ipsData__last svg{ display:none !important; }
.ipsData--topic-feed-widget .ipsData__last[data-ips-hook="latestUserPhoto"] .ipsData__last-primary::after{
  content:" replied" !important; color:var(--ex-muted); opacity:.75; font-weight:400; margin-left:4px;
}
.ipsData--topic-feed-widget .ipsData__last--author .ipsData__last-primary::after{
  content:" started this topic" !important; color:var(--ex-muted); opacity:.75; font-weight:400; margin-left:4px;
}
/* lock both avatars to the same size/baseline so the two lines align */
.ipsData--topic-feed-widget .ipsData__last,
.ipsData--topic-feed-widget .ipsData__last--author{ min-height:20px; }
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last--author .ipsUserPhoto{
  width:20px !important; height:20px !important; flex:0 0 20px !important;
}

/* 3) "+" as the MIDDLE dock icon (header script moves #exhale-fab into
   the dock as .exhale-plus-item). Style it to sit inline in the row. */
.ipsMobileFooter .exhale-plus-item, #ipsMobileFooter .exhale-plus-item{
  flex:0 0 auto !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.ipsMobileFooter #exhale-fab, #ipsMobileFooter #exhale-fab, .exhale-plus-item #exhale-fab{
  position:static !important; transform:none !important; left:auto !important; right:auto !important;
  top:auto !important; bottom:auto !important; margin:0 2px !important;
  width:42px !important; height:42px !important;              /* match the other dock icons */
  box-shadow:0 3px 10px rgba(109,75,230,.45) !important; z-index:auto !important;
}
.ipsMobileFooter #exhale-fab::after, #ipsMobileFooter #exhale-fab::after{ font-size:24px !important; } /* smaller glyph */
.ipsMobileFooter #exhale-fab:hover, #ipsMobileFooter #exhale-fab:hover{ transform:translateY(-1px) !important; }

/* ================================================================
   Stage F — polish round
   ================================================================ */

/* Hide the "Topics" widget heading + pull the feed up (kill dead space).
   :has scopes it to the widget that actually wraps the topic feed. */
.ipsWidget:has(> .ipsWidget__content .ipsData--topic-feed-widget) > .ipsWidget__header,
.ipsWidget:has(.ipsData--topic-feed-widget) > .ipsWidget__header{ display:none !important; }
.ipsWidget:has(.ipsData--topic-feed-widget) > .ipsWidget__content{ padding-top:0 !important; }
.ipsWidget:has(.ipsData--topic-feed-widget){ margin-top:2px !important; }

/* Side gutters so nothing sits flush on the mobile edge */
.ipsData--topic-feed-widget .ipsData__item{ padding-inline:16px !important; }
[data-blockid^="app_core_whosOnline"] .ipsWidget__content{ padding-inline:16px !important; }

/* FORUMS strip: left/right padding + a right-edge fade + a swipe hint */
#elforumsCategoriesBlock{ padding-inline:16px !important; position:relative; }
#elforumsCategoriesBlock .ipsWidget__content{
  -webkit-mask-image:linear-gradient(to right, #000 86%, transparent);
          mask-image:linear-gradient(to right, #000 86%, transparent);
}
/* gentle nudge to signal there's more to the right (runs twice on load) */
@media (prefers-reduced-motion: no-preference){
  #elforumsCategoriesBlock .ipsSideMenu__list{ animation: exSwipeHint 2.2s ease 1.1s 2; }
}
@keyframes exSwipeHint{
  0%,100%{ transform:translateX(0); }
  14%{ transform:translateX(-16px); }
  28%{ transform:translateX(0); }
}

/* Online-count line: left-aligned with the gutter so it reads as a
   deliberate status line, not a random centered blob */
[data-blockid^="app_core_whosOnline"] .ipsWidget__content{ text-align:left !important; }

/* Desktop: FORCE the glass dock (belt-and-suspenders — some desktop
   widths were still dropping it) and keep the old header nav hidden */
@media (min-width:980px){
  /* Re-declare the WHOLE pill at desktop, at high specificity
     (html[data-ips-scheme-active] body #id), so nothing IPS does at
     desktop widths can make it differ from mobile. This is the same
     glass pill, byte-for-byte, just lifted higher off the bottom. */
  html[data-ips-scheme-active] body #ipsMobileFooter{
    display:block !important; visibility:visible !important; opacity:1 !important;
    position:fixed !important; top:auto !important; right:auto !important;
    bottom:34px !important; left:50% !important; transform:translateX(-50%) !important;
    width:auto !important; max-width:calc(100% - 24px) !important; height:auto !important;
    padding:6px !important; margin:0 !important;
    background:rgba(255,255,255,.10) !important;
    -webkit-backdrop-filter:blur(30px) saturate(1.8) !important;
            backdrop-filter:blur(30px) saturate(1.8) !important;
    border:1px solid rgba(255,255,255,.22) !important; border-radius:999px !important;
    box-shadow:0 16px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10) !important;
    z-index:9000 !important;
  }
  html[data-ips-scheme-active] body #ipsMobileFooter > ul{
    display:flex !important; flex-wrap:nowrap !important; gap:2px !important;
    align-items:center !important; justify-content:center !important;
    width:auto !important; margin:0 !important; padding:0 !important; list-style:none !important;
  }
  html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__item{
    flex:0 0 auto !important; margin:0 !important; width:auto !important;
  }
  html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__link{
    width:42px !important; height:42px !important; padding:0 !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    flex-direction:row !important;
  }
  /* the #1 desktop-vs-mobile difference: kill the text labels IPS re-shows */
  html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__text{ display:none !important; }
  html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__icon{ margin:0 !important; }

  .ipsHeader__primary [data-ips-header-content="navigation"],
  .ipsHeader__secondary, .ipsResponsive_showDesktop nav{ display:none !important; }
}

/* ================================================================
   Stage G — notifications in header, out of the dock
   The header user bar ALREADY contains a working notifications item
   (.ipsUserNav > li[data-el="notifications"], #elFullNotifications);
   IPS just hides it at mobile widths and routes to the dock copy.
   So: force the header bell visible everywhere, remove the dock one.
   ================================================================ */

/* Show the header notifications bell at ALL widths, right by the user link */
.ipsHeader .ipsUserNav > li[data-el="notifications"]{
  display:inline-flex !important; align-items:center !important; margin-inline:2px !important;
}
.ipsHeader .ipsUserNav > li[data-el="notifications"] .ipsUserNav__link{
  color:var(--ex-muted) !important; padding:6px !important; background:transparent !important;
}
.ipsHeader .ipsUserNav > li[data-el="notifications"] .ipsUserNav__link:hover{ color:#fff !important; }
.ipsHeader .ipsUserNav > li[data-el="notifications"] .ipsUserNav__icon{ font-size:18px !important; }

/* Remove notifications from the dock (now lives in the header) */
#ipsMobileFooter li[data-el="notifications"],
.ipsMobileFooter li[data-el="notifications"]{ display:none !important; }

/* "+" — use its native plus glyph at icon scale so it matches the row */
.ipsMobileFooter #exhale-fab > *, #ipsMobileFooter #exhale-fab > *{ display:inline-flex !important; }
.ipsMobileFooter #exhale-fab::after, #ipsMobileFooter #exhale-fab::after{ content:none !important; }
.ipsMobileFooter #exhale-fab i, #ipsMobileFooter #exhale-fab i{
  font-size:18px !important; line-height:1 !important; color:#fff !important; margin:0 !important;
}

/* ================================================================
   Stage H — feed row polish + glass "+"
   ================================================================ */

/* "+" → a frosted GLASS circle (not purple), on desktop + mobile */
.ipsMobileFooter #exhale-fab, #ipsMobileFooter #exhale-fab,
.ipsMobileFooter .exhale-plus-item #exhale-fab{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  -webkit-backdrop-filter:blur(6px) !important; backdrop-filter:blur(6px) !important;
  box-shadow:none !important;
}
.ipsMobileFooter #exhale-fab:hover, #ipsMobileFooter #exhale-fab:hover{
  background:rgba(255,255,255,.2) !important;
}

/* Perfectly align the two meta lines: a strict [avatar | text] grid so
   the "started" and "replied" rows share identical column edges. */
.ipsData--topic-feed-widget .ipsData__last,
.ipsData--topic-feed-widget .ipsData__last--author{
  display:grid !important; grid-template-columns:20px 1fr !important;
  align-items:center !important; column-gap:7px !important;
  padding:0 !important; margin:0 !important; min-height:20px;
}
.ipsData--topic-feed-widget .ipsData__last > .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last--author > .ipsUserPhoto{
  grid-column:1 !important; margin:0 !important;
}
.ipsData--topic-feed-widget .ipsData__last > .ipsData__last-text,
.ipsData--topic-feed-widget .ipsData__last--author > .ipsData__last-text{
  grid-column:2 !important; margin:0 !important;
}

/* Move views + comment-count pills to the RIGHT-hand side of the row */
.ipsData--topic-feed-widget .ipsData__stats{
  align-self:flex-end !important; margin:4px 0 0 auto !important;
}

/* ================================================================
   Stage I — DOCK: compact shrink-to-fit pill + the "+" contained
   in its slot (fixes the thin wide bar with the "+" bulging out).
   High specificity + all widths so desktop == mobile exactly.
   ================================================================ */
html[data-ips-scheme-active] body #ipsMobileFooter{
  width:-moz-fit-content !important; width:fit-content !important;
  max-width:calc(100% - 24px) !important; padding:6px !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter > ul{
  display:flex !important; flex-wrap:nowrap !important;
  width:-moz-fit-content !important; width:fit-content !important;
  justify-content:center !important; align-items:center !important; gap:4px !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__item{
  flex:0 0 auto !important; margin:0 !important; width:auto !important;
}
/* every slot the SAME 40px so the row is even and nothing pokes out */
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__link,
html[data-ips-scheme-active] body #ipsMobileFooter #exhale-fab{
  width:40px !important; height:40px !important; padding:0 !important; margin:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  box-sizing:border-box !important;
}
/* the "+" = a glass circle SMALLER than its 40px slot, so it can NEVER
   poke out of the pill no matter how tall the row renders */
html[data-ips-scheme-active] body #ipsMobileFooter #exhale-fab{
  width:34px !important; height:34px !important;
  border-radius:50% !important; background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important;
  -webkit-backdrop-filter:blur(4px) !important; backdrop-filter:blur(4px) !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter #exhale-fab i{
  font-size:17px !important; color:#fff !important; line-height:1 !important;
}

/* ================================================================
   Stage J — ONE dock spec for ALL widths (desktop === mobile).
   Highest-specificity, non-media so IPS's per-breakpoint sizing
   can't make desktop and mobile diverge. Only `bottom` differs.
   ================================================================ */
html[data-ips-scheme-active] body #ipsMobileFooter{
  position:fixed !important; left:50% !important; right:auto !important; top:auto !important;
  transform:translateX(-50%) !important;
  display:block !important; visibility:visible !important; opacity:1 !important;
  width:-moz-fit-content !important; width:fit-content !important;
  max-width:calc(100% - 24px) !important; height:auto !important; min-height:0 !important;
  padding:5px !important; margin:0 !important; border-radius:999px !important;
  /* neutral LIQUID GLASS — very transparent so content shows through and
     WARPS via the SVG displacement filter as it scrolls behind.
     1st backdrop-filter = plain-blur fallback (Safari); 2nd = warp (Chromium). */
  background:rgba(255,255,255,.105) !important;   /* 25% more transparent than .14 */
  -webkit-backdrop-filter:blur(18px) saturate(1.7) !important;
          backdrop-filter:blur(18px) saturate(1.7) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.4) !important;
  z-index:9000 !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter > ul{
  display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
  align-items:center !important; justify-content:center !important;
  gap:6px !important; width:auto !important; height:auto !important;
  margin:0 !important; padding:0 !important; list-style:none !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__item{
  flex:0 0 auto !important; margin:0 !important; padding:0 !important;
  width:auto !important; height:auto !important;
}
/* every icon slot: identical 40px square, centered */
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__link{
  width:40px !important; height:40px !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border-radius:50% !important;
  display:flex !important; flex-direction:row !important;
  align-items:center !important; justify-content:center !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__text{ display:none !important; }
html[data-ips-scheme-active] body #ipsMobileFooter .ipsMobileFooter__icon{
  margin:0 !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
/* "+" = a glass circle contained inside its 40px slot (never pokes out) */
html[data-ips-scheme-active] body #ipsMobileFooter #exhale-fab{
  width:34px !important; height:34px !important; padding:0 !important; margin:0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.16) !important;
  border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  -webkit-backdrop-filter:blur(4px) !important; backdrop-filter:blur(4px) !important;
}
html[data-ips-scheme-active] body #ipsMobileFooter #exhale-fab i{
  font-size:17px !important; color:#fff !important; line-height:1 !important; margin:0 !important;
}
/* only difference between the two: how high off the bottom it floats */
@media (min-width:980px){ html[data-ips-scheme-active] body #ipsMobileFooter{ bottom:34px !important; } }
@media (max-width:979px){ html[data-ips-scheme-active] body #ipsMobileFooter{ bottom:12px !important; } }

/* ================================================================
   Stage K — homepage feed: clamp topic titles to 2 lines (desktop),
   with a trailing ellipsis on overflow.
   ================================================================ */
@media (min-width:980px){
  .ipsData--topic-feed-widget .ipsData__title h4 a{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important; line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
}

/* ================================================================
   Stage L — lock the started/replied avatar column so both meta
   lines share an identical left edge + identical avatar size.
   ================================================================ */
.ipsData--topic-feed-widget .ipsData__last,
.ipsData--topic-feed-widget .ipsData__last--author{
  display:grid !important; grid-template-columns:22px 1fr !important;
  align-items:center !important; column-gap:8px !important;
  padding:0 !important; margin:0 !important;
}
.ipsData--topic-feed-widget .ipsData__last > .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last--author > .ipsUserPhoto{
  grid-column:1 !important; grid-row:1 !important;
  width:22px !important; height:22px !important; min-width:22px !important; flex:none !important;
  margin:0 !important; border-radius:50% !important; overflow:hidden !important;
}
.ipsData--topic-feed-widget .ipsData__last > .ipsUserPhoto img,
.ipsData--topic-feed-widget .ipsData__last--author > .ipsUserPhoto img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important;
}
.ipsData--topic-feed-widget .ipsData__last > .ipsData__last-text,
.ipsData--topic-feed-widget .ipsData__last--author > .ipsData__last-text{
  grid-column:2 !important; grid-row:1 !important; min-width:0 !important;
}

/* ================================================================
   Stage M — swap notifications ⇄ menu.
   Notifications bell goes BACK into the dock; the hamburger/menu
   moves UP into the header (custom.js relocates it). The header
   then shows the same thing at every width: logo + user + menu.
   ================================================================ */

/* notifications: out of the header, back into the dock */
.ipsHeader .ipsUserNav > li[data-el="notifications"]{ display:none !important; }
#ipsMobileFooter li[data-el="notifications"],
.ipsMobileFooter li[data-el="notifications"]{ display:list-item !important; }

/* header identical desktop == mobile: hide the desktop nav bar + the
   other user-bar icons, leaving just the user link and the menu button */
.ipsHeader__primary [data-ips-header-content="navigation"]{ display:none !important; }
.ipsHeader .ipsUserNav > li[data-el="inbox"],
.ipsHeader .ipsUserNav > li[data-el="reports"],
.ipsHeader .ipsUserNav > li[data-el="assignments"],
.ipsHeader .ipsUserNav > li[data-el="activity"]{ display:none !important; }

/* the hamburger/menu, relocated into the header user bar by custom.js */
.ipsHeader .ipsUserNav > li[data-el="more"]{
  display:inline-flex !important; align-items:center !important; margin-inline:4px !important;
}
.ipsHeader .ipsUserNav > li[data-el="more"] > button,
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__link{
  width:auto !important; height:auto !important; padding:6px !important; margin:0 !important;
  background:transparent !important; border:0 !important; border-radius:8px !important;
  color:var(--ex-muted) !important; display:inline-flex !important; align-items:center !important;
}
.ipsHeader .ipsUserNav > li[data-el="more"] > button:hover,
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__link:hover{ color:#fff !important; }
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__text{ display:none !important; }
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__icon svg{ width:20px !important; height:20px !important; }

/* ================================================================
   Stage N — DEFINITIVE meta-avatar alignment. Both "started" and
   "replied" rows: flex, avatar forced to a fixed 24px box flush-left
   (overrides IPS .ipsUserPhoto--fluid), text after it. High
   specificity (+ .ipsData__extra) and last in file = final word.
   ================================================================ */
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last,
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last--author{
  display:flex !important; flex-direction:row !important; align-items:center !important;
  gap:8px !important; margin:0 !important; padding:0 !important;
  grid-template-columns:none !important;
}
/* hard-cap the avatar to 24px — descendant selector, no aspect-ratio,
   every dimension pinned so IPS's fluid photo can't balloon */
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__last--author .ipsUserPhoto{
  order:-1 !important; flex:0 0 24px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:24px !important; height:24px !important; max-width:24px !important; max-height:24px !important;
  min-width:24px !important; min-height:24px !important;
  margin:0 !important; padding:0 !important; box-sizing:border-box !important;
  border-radius:50% !important; overflow:hidden !important;
}
.ipsData--topic-feed-widget .ipsData__last .ipsUserPhoto img,
.ipsData--topic-feed-widget .ipsData__last--author .ipsUserPhoto img{
  width:24px !important; height:24px !important; max-width:24px !important; max-height:24px !important;
  object-fit:cover !important; border-radius:50% !important; display:block !important; margin:0 !important;
}
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last > .ipsData__last-text,
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last--author > .ipsData__last-text{
  flex:1 1 auto !important; min-width:0 !important; margin:0 !important;
}

/* ================================================================
   Stage O — spacing, glassy hamburger, header width, bigger thumbs
   ================================================================ */

/* (1) Mobile: breathing room under the header + around forums/online */
@media (max-width:979px){
  .ipsHeader{ margin-bottom:10px !important; }
  #elforumsCategoriesBlock{ margin:12px 0 !important; }
  [data-blockid^="app_core_whosOnline"]{ margin:10px 0 14px !important; }
}

/* (2) Hamburger/menu — glassy rounded-square so it's obviously a button.
   Opens the site navigation (keeps its popovertarget). Same everywhere. */
.ipsHeader .ipsUserNav > li[data-el="more"]{
  display:inline-flex !important; align-items:center !important; margin-inline:8px !important; position:relative;
}
.ipsHeader .ipsUserNav > li[data-el="more"] > button,
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__link{
  width:38px !important; height:38px !important; padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.5) !important; backdrop-filter:blur(10px) saturate(1.5) !important;
  border:1px solid rgba(255,255,255,.20) !important; border-radius:11px !important; color:#fff !important;
}
.ipsHeader .ipsUserNav > li[data-el="more"] > button:hover,
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__link:hover{ background:rgba(255,255,255,.17) !important; }
.ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__text{ display:none !important; }
.ipsHeader .ipsUserNav > li[data-el="more"] svg{ width:18px !important; height:18px !important; }

/* (5) Desktop: header content in line with the topics column (780px + 16px gutter) */
@media (min-width:980px){
  .ipsHeader__primary .ipsWidth,
  .ipsHeader__primary .ipsHeader__align{
    max-width:780px !important; margin-inline:auto !important;
    padding-inline:16px !important; box-sizing:border-box !important;
  }
}

/* (4) Desktop: topic thumbnails 25% larger (58 -> 72px) */
@media (min-width:980px){
  .ipsData--topic-feed-widget .ipsData__image,
  .ipsData--topic-feed-widget .tthumb__image{
    flex:0 0 72px !important; width:72px !important; height:72px !important;
  }
  .ipsData--topic-feed-widget .ipsData__image img,
  .ipsData--topic-feed-widget .tthumb__image img{ width:72px !important; height:72px !important; }
}

/* ================================================================
   Stage P — hamburger visible on mobile + 25% smaller on desktop
   ================================================================ */
/* IPS hides the header user bar on mobile, which was hiding the moved
   menu button. Force the bar + the user link + the menu visible at
   every width so the hamburger always shows top-right. */
.ipsHeader__end{ display:flex !important; align-items:center !important; }
.ipsHeader .ipsUserNav{ display:inline-flex !important; align-items:center !important; visibility:visible !important; }
.ipsHeader .ipsUserNav > li#cUserLink,
.ipsHeader .ipsUserNav > li[data-el="more"]{
  display:inline-flex !important; visibility:visible !important;
}

/* desktop: hamburger 25% smaller than mobile (38 -> 29px, icon 18 -> 14) */
@media (min-width:980px){
  .ipsHeader .ipsUserNav > li[data-el="more"] > button,
  .ipsHeader .ipsUserNav > li[data-el="more"] .ipsMobileFooter__link{
    width:29px !important; height:29px !important; border-radius:9px !important;
  }
  .ipsHeader .ipsUserNav > li[data-el="more"] svg{ width:14px !important; height:14px !important; }
}

/* ================================================================
   Stage Q — tighten the gap between the title and the meta lines
   ================================================================ */
.ipsData--topic-feed-widget .ipsData__content{ gap:2px !important; }
.ipsData--topic-feed-widget .ipsData__main{ gap:3px !important; margin:0 !important; }
.ipsData--topic-feed-widget .ipsData__main h4,
.ipsData--topic-feed-widget .ipsData__title{ margin:0 !important; }
.ipsData--topic-feed-widget .ipsData__extra{ margin-top:5px !important; }

/* ================================================================
   Stage R — usernames align EXACTLY. Grid with a fixed 24px avatar
   column so both meta rows start their text at an identical x
   (flex gap was resolving slightly differently between the rows).
   ================================================================ */
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last,
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last--author{
  display:grid !important;
  grid-template-columns:24px 1fr !important;
  column-gap:8px !important;
  align-items:center !important;
  gap:8px !important;
}
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last > .ipsUserPhoto,
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last--author > .ipsUserPhoto{
  grid-column:1 !important; grid-row:1 !important; justify-self:center !important; order:0 !important;
}
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last > .ipsData__last-text,
.ipsData--topic-feed-widget .ipsData__extra .ipsData__last--author > .ipsData__last-text{
  grid-column:2 !important; grid-row:1 !important; min-width:0 !important; margin:0 !important; padding:0 !important;
}

/* ================================================================
   Stage S — ONE header at every width. The header is
   .ipsResponsive_header--desktop and IPS hides it on mobile (swapping
   a --mobile variant), which was hiding the relocated hamburger.
   Force the desktop header everywhere + hide the mobile variant so
   the header is identical AND the hamburger shows on mobile.
   ================================================================ */
.ipsHeader.ipsResponsive_header--desktop{ display:block !important; visibility:visible !important; }
.ipsResponsive_header--mobile{ display:none !important; }
.ipsHeader__end,
.ipsHeader [data-ips-header-content="user"]{ display:flex !important; align-items:center !important; }
.ipsHeader .ipsUserNav{ display:inline-flex !important; align-items:center !important; }
.ipsHeader .ipsUserNav > li[data-el="more"]{ display:inline-flex !important; visibility:visible !important; }

/* ================================================================
   Stage T — tidy the mobile header after forcing the desktop one:
   kill the secondary row (stray breadcrumb/search) at ALL widths,
   and add side gutters so the logo isn't clipped on the edge.
   ================================================================ */
.ipsHeader__secondary{ display:none !important; }

@media (max-width:979px){
  .ipsHeader__primary > .ipsWidth,
  .ipsHeader__primary .ipsHeader__align{
    max-width:100% !important; margin-inline:0 !important;
    padding-inline:16px !important; box-sizing:border-box !important;
  }
  /* keep the logo from being clipped by any negative offset */
  .ipsHeader .ipsLogo{ margin-left:0 !important; }

  /* Logo on mobile: we run the DESKTOP header at every width, but its
     logo is a <picture> whose <source media="(max-width:979px)"> is a
     1x1 TRANSPARENT png — IPS blanks the desktop logo on phones because
     it normally shows a separate mobile header instead. So on phones the
     real logo genuinely isn't rendered. Hide the blanked <picture> (and
     the duplicate text label) and paint the real logo from the theme's
     own logo vars as a background so it always shows. */
  .ipsHeader [data-ips-header-content="logo"]{
    display:inline-flex !important; align-items:center !important; flex:0 0 auto !important;
  }
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo__image,
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo__text{ display:none !important; }
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo{
    display:inline-block !important; width:96px !important; height:24px !important;
    background-repeat:no-repeat !important; background-position:left center !important;
    background-size:contain !important;
  }
  /* tighten the gap to the online count so the row fits the menu too */
  #exhale-online-count{ margin-left:10px !important; }
  /* hide the "Jordan Miller" username top-right on mobile (keep avatar)
     to free up room for the hamburger menu. */
  .ipsHeader #cUserLink .ipsUserNav__text,
  .ipsHeader .ipsUserNav > li[data-el="user"] .ipsUserNav__text{ display:none !important; }
  /* header profile photo: a little bigger AND a true circle. Force a
     square box (aspect-ratio + equal w/h + object-fit) on both the
     wrapper and the <img> — the oval came from a non-square box getting
     border-radius:50%. Also target a bare <img> in case IPS doesn't wrap
     it in .ipsUserPhoto. */
  .ipsHeader #cUserLink .ipsUserPhoto,
  .ipsHeader #cUserLink .ipsUserPhoto img,
  .ipsHeader #cUserLink > a > img,
  .ipsHeader .ipsUserNav > li[data-el="user"] .ipsUserPhoto,
  .ipsHeader .ipsUserNav > li[data-el="user"] .ipsUserPhoto img,
  .ipsHeader .ipsUserNav > li[data-el="user"] > a > img{
    width:34px !important; height:34px !important; min-width:34px !important;
    flex:0 0 34px !important; aspect-ratio:1/1 !important;
    object-fit:cover !important; border-radius:50% !important; overflow:hidden !important;
    box-sizing:border-box !important; padding:0 !important; display:block !important;
  }
  /* header bar is always dark → always paint the dark (light-ink) logo */
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo{
    background-image:var(--set__logo-dark) !important;
  }
}

/* Desktop: the theme's logo-height setting doesn't take, so cap the real
   logo image height here (a little smaller than before). */
@media (min-width:980px){
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo__image img,
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo img{
    height:26px !important; max-height:26px !important; width:auto !important;
  }
}


/* ================================================================
   Stage U — anti-FOUC: hide the elements custom.js relocates until
   they're placed, so they don't flash in their original spot.
   (Pairs with the reveal-on-load guard in the theme Header.)
   ================================================================ */
#exhale-fab{ opacity:0 !important; }
.ipsMobileFooter #exhale-fab, #ipsMobileFooter #exhale-fab{ opacity:1 !important; }
#ipsMobileFooter li[data-el="more"], .ipsMobileFooter li[data-el="more"]{ display:none !important; }

/* ================================================================
   Stage V — site footer: constrain to the content column width
   (780px, centered) instead of spanning the whole screen.
   ================================================================ */
.ipsFooter .ipsWidth,
.ipsFooter__footer .ipsWidth,
.ipsFooter__container,
#ipsLayout_footer .ipsWidth,
.ipsFooter__inner{
  max-width:780px !important; margin-inline:auto !important;
  padding-inline:16px !important; box-sizing:border-box !important;
}

/* ================================================================
   Stage W — stronger swipe hint; online count in header (green dot);
   hide in-content who's-online widget; guest sign-in safety
   ================================================================ */

/* (1) stronger forum-pills swipe hint: further left (-44px), 3 times */
@media (prefers-reduced-motion: no-preference){
  #elforumsCategoriesBlock .ipsSideMenu__list{ animation:exSwipeHint 1.7s ease .8s 3 !important; }
}
@keyframes exSwipeHint{
  0%,100%{ transform:translateX(0); }
  22%{ transform:translateX(-44px); }
  44%{ transform:translateX(0); }
}

/* (2) online count relocated into the header, right of the logo, w/ green dot */
[data-blockid^="app_core_whosOnline"]{ display:none !important; }
.ipsHeader__start [data-ips-header-content="logo"]{ display:inline-flex !important; align-items:center !important; }
#exhale-online-count{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  margin-left:14px !important; font-size:.72rem !important; font-weight:600 !important;
  color:var(--ex-muted) !important; text-decoration:none !important; white-space:nowrap;
}
#exhale-online-count:hover{ color:#fff !important; }
.ex-online-dot{
  width:8px; height:8px; border-radius:50%; background:#22c55e; flex:0 0 8px;
  box-shadow:0 0 7px rgba(34,197,94,.75); display:inline-block;
}

/* (3) guest safety: keep sign in / register visible in the header */
.ipsHeader .ipsUserNav > li[data-el="register"],
.ipsHeader .ipsUserNav > li[data-el="signin"],
.ipsHeader .ipsUserNav a[href*="/register"],
.ipsHeader .ipsUserNav a[href*="/login"]{ display:inline-flex !important; visibility:visible !important; }

/* ================================================================
   Stage X — equal space above/below the forums pills. Collapse the
   emptied who's-online container (guarded so it never eats the
   forums block) and pull the topic feed up under the pills.
   ================================================================ */
.ipsWidget__content--wrap:has(> .ipsWidget[data-blockid^="app_core_whosOnline"]){ display:none !important; }
.cWidgetContainer[data-widget-area="header"]:has([data-blockid^="app_core_whosOnline"]):not(:has(#elforumsCategoriesBlock)){
  display:none !important; margin:0 !important; padding:0 !important; min-height:0 !important;
}
/* symmetric margin on the pills, and no extra gap before the feed */
#elforumsCategoriesBlock{ margin-block:14px !important; }
.ipsWidget:has(.ipsData--topic-feed-widget){ margin-top:0 !important; padding-top:0 !important; }
.ipsWidget:has(.ipsData--topic-feed-widget) > .ipsWidget__content{ padding-top:0 !important; margin-top:0 !important; }
.ipsData--topic-feed-widget{ margin-top:0 !important; padding-top:0 !important; }

/* ================================================================
   Stage Y — remove the emptied online-widget SECTION from the widget
   grid entirely (it was still holding a row + gap below the pills),
   and zero the inter-widget gap so the pills' 16px margins define the
   spacing — equal above and below.
   ================================================================ */
section.cWidgetContainer--isWidget:has(.ipsWidget[data-blockid^="app_core_whosOnline"]):not(:has(#elforumsCategoriesBlock)):not(:has(.ipsData--topic-feed-widget)){
  display:none !important;
}
.cWidgetContainer--main{ gap:0 !important; row-gap:0 !important; }
#elforumsCategoriesBlock{ margin:16px 0 !important; }

/* ================================================================
   Stage Z — mobile 3-line title clamp + "Read topic" pill
   ================================================================ */

/* Mobile: clamp topic titles to 3 lines with a trailing … */
@media (max-width:979px){
  .ipsData--topic-feed-widget .ipsData__title h4 a{
    display:-webkit-box !important;
    -webkit-line-clamp:3 !important; line-clamp:3 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important; text-overflow:ellipsis !important;
  }
}

/* Read-topic pill reverted — restore views + replies to the RIGHT */
.ipsData--topic-feed-widget .ipsData__stats{
  display:flex !important; width:auto !important; align-self:flex-end !important;
  justify-content:flex-end !important; align-items:center !important; gap:8px !important;
  margin:6px 0 0 auto !important;
}
.exhale-read-pill{ display:none !important; }

/* ================================================================
   Stage AA — sticky glassy header (all widths) + purple scroll bar
   ================================================================ */
.ipsHeader{ position:sticky !important; top:0 !important; z-index:8000 !important; }
/* NOTE: the frosted-glass-on-scroll rules live just below the "always dark"
   block, so they can override the solid #0b0a10 on the painted layers
   (.ipsHeader__primary / .ipsMobileHeader). See "Header glass on scroll". */

/* ================================================================
   Header bar is ALWAYS the dark-mode color (both schemes) so the
   light-ink logo + header items stay legible even in light mode.
   ================================================================ */
.ipsHeader,
.ipsHeader__primary,
.ipsMobileHeader{
  background:#0b0a10 !important;
}

/* ---- Header glass on scroll --------------------------------------
   At the very top the header is solid #0b0a10 (logo stays legible).
   Once scrolled (custom.js #8 adds .exhale-scrolled to <html>), turn
   the PAINTED layers translucent + blur so page content frosts behind
   the sticky header. Higher specificity than the solid rule above, so
   it wins; the parent .ipsHeader goes transparent so the tint/blur
   isn't doubled. */
html.exhale-scrolled .ipsHeader__primary,
html.exhale-scrolled .ipsMobileHeader{
  background:rgba(11,10,16,.55) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6) !important;
          backdrop-filter:blur(22px) saturate(1.6) !important;
}
html.exhale-scrolled .ipsHeader{
  background:transparent !important;
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
html.exhale-scrolled .ipsMobileHeader{
  box-shadow:0 6px 20px rgba(0,0,0,.35) !important;
}
/* header text/icons stay light on the dark bar */
html[data-ips-scheme-active="light"] .ipsHeader .ipsUserNav__text,
html[data-ips-scheme-active="light"] .ipsHeader__start,
html[data-ips-scheme-active="light"] .ipsHeader__end,
html[data-ips-scheme-active="light"] .ipsMobileHeader .ipsMobileNavIcons__username{
  color:#f0eef8 !important;
}
/* the header is dark, so always use the DARK (light-ink) logo variant */
@media (min-width:980px){
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo__image--light{ display:none !important; }
  .ipsHeader [data-ips-header-content="logo"] .ipsLogo__image--dark{ display:inline-block !important; }
}

/* progress bar pinned to the header's bottom edge */
#exhale-progress{
  position:absolute !important; left:0; right:0; bottom:0; top:auto !important; height:3px;
  background:transparent; overflow:visible; z-index:2; pointer-events:none;
}
/* desktop: constrain the bar to the 780 topic-column width, centered */
@media (min-width:980px){
  #exhale-progress{
    left:50% !important; right:auto !important; transform:translateX(-50%) !important;
    width:780px !important; max-width:calc(100% - 32px) !important;
  }
  /* the desktop height is a min-height:85px scoped to
     .ipsResponsive_header--desktop .ipsHeader__primary — beat it with
     higher specificity and set a compact 52px. */
  html body .ipsResponsive_header--desktop .ipsHeader__primary,
  html body .ipsResponsive_header--desktop .ipsHeader__primary > .ipsWidth,
  html body .ipsResponsive_header--desktop .ipsHeader__align{
    min-height:52px !important; height:auto !important; padding-block:0 !important;
    align-items:center !important;
  }
  html body .ipsResponsive_header--desktop [data-ips-header-content="logo"]{ min-height:0 !important; }
}
#exhale-progress-bar{
  position:relative;
  height:100%; width:0;
  /* logo gradient — purple accent → blue-purple emphasis → blue at the
     leading tip, so the snake head is the logo's blue. */
  background:linear-gradient(90deg,#6d4be6,#7b74f2,#4f9dff);
  box-shadow:0 0 8px rgba(123,116,242,.6);
}
/* forked "snake tongue" flicking off the leading tip of the bar, same
   purple as the bar's tip. */
#exhale-progress-bar::after{
  content:""; position:absolute; right:-9px; top:50%;
  width:13px; height:11px;
  transform:translateY(-50%);
  transform-origin:left center;
  background:linear-gradient(90deg,#7b74f2,#4f9dff);
  clip-path:polygon(0% 38%, 55% 38%, 100% 0%, 62% 50%, 100% 100%, 55% 62%, 0% 62%);
  filter:drop-shadow(0 0 4px rgba(79,157,255,.6));
  animation:exTongueFlick 3.4s ease-in-out infinite;
}
@keyframes exTongueFlick{
  0%,84%,100%{ transform:translateY(-50%) translateX(0) scaleX(1); }
  90%{ transform:translateY(-50%) translateX(3px) scaleX(1.18); }
  95%{ transform:translateY(-50%) translateX(0) scaleX(1); }
}
@media (prefers-reduced-motion:reduce){
  #exhale-progress-bar::after{ animation:none !important; }
}

/* ================================================================
   Stage BB — topic view: keep posts within the screen on mobile
   (content was overflowing → text clipped on both edges).
   ================================================================ */
@media (max-width:979px){
  .ipsComment, .cPost, article.ipsComment,
  .ipsComment__content, .cPost__content,
  .ipsComments, .ipsColumns, .ipsColumns__primary,
  .ipsLayout__content, .ipsLayout__main, .ipsLayout__primary-column{
    max-width:100% !important; box-sizing:border-box !important; min-width:0 !important;
  }
  .ipsComment__content, .cPost__content,
  .ipsComment .ipsRichText, .cPost .ipsRichText, [data-role="commentContent"]{
    padding-inline:14px !important; box-sizing:border-box !important;
    overflow-wrap:break-word !important; word-break:break-word !important;
  }
  .ipsRichText img, .ipsComment img, .cPost img{ max-width:100% !important; height:auto !important; }
}

/* ================================================================
   Stage CC — contain the forums chip strip so it scrolls INSIDE its
   box and never widens the page (it was stretching topic pages to
   682px, clipping the post text). Belt at every wrapper level.
   ================================================================ */
#elforumsCategoriesBlock{ max-width:100% !important; min-width:0 !important; overflow:hidden !important; }
#elforumsCategoriesBlock .ipsWidget__content,
#elforumsCategoriesBlock .ipsSideMenu,
#elforumsCategoriesBlock .ipsSideMenu--truncate{
  max-width:100% !important; min-width:0 !important;
  overflow-x:auto !important; -webkit-overflow-scrolling:touch;
}
#elforumsCategoriesBlock .ipsSideMenu__list{ min-width:0 !important; }

/* ================================================================
   Stage DD — topic posts: side gutters on mobile so the avatar,
   admin controls (top-right) and reaction chips (bottom-right) all
   sit inside the screen with breathing room.
   ================================================================ */
@media (max-width:979px){
  .ipsComment, article.ipsComment, .cComment,
  .ipsComment__wrap, .ipsComments > li, .ipsComments__item{
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
  }
  /* avoid double-padding the body text (Stage BB already handled it) */
  .ipsComment .ipsComment__content, .cPost__content{ padding-inline:0 !important; }
}

/* ================================================================
   Stage EE — topic posts are article.ipsEntry (NOT .ipsComment).
   Add side gutters on mobile so the avatar, top-right controls and
   bottom-right reaction chips all sit inside the screen.
   ================================================================ */
@media (max-width:979px){
  .ipsEntry{
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
  }
  .ipsEntry__content, .ipsRichText{
    max-width:100% !important; overflow-wrap:break-word !important; word-break:break-word !important;
  }
  .ipsRichText img, .ipsEntry img{ max-width:100% !important; height:auto !important; }
}

/* ================================================================
   Stage FF — forum topic LIST width on mobile (v2, scoped).
   Diagnostic (vp:430) showed main.ipsLayout__main carries ~52px
   margin on EACH side, capping content to 325px. Changing that
   globally also shrank the custom HOMEPAGE feed, which we don't
   want. So instead we leave main alone and widen ONLY the forum
   listing card (.ipsBox--forumsTable) with a self-correcting
   full-bleed: span the viewport minus a clean 12px gutter each
   side, regardless of the parent's gutter. The homepage feed
   (.ipsData--topic-feed-widget) is untouched and looks exactly as
   it did before today.
   ================================================================ */
@media (max-width:979px){
  .ipsBox--forumsTable{
    width:calc(100vw - 24px) !important;
    margin-left:calc(50% - 50vw + 12px) !important;
    margin-right:calc(50% - 50vw + 12px) !important;
    box-sizing:border-box !important;
  }
}

/* ================================================================
   Stage GG — inside a topic: breathing room + sleek action pill.
   1) Topic header (title + follow row) gets a side gutter on mobile
      so nothing presses the screen edge.
   2) Follow control shrinks from a full-width bar to a small,
      left-aligned pill.
   3) New glass Reply / Next-unread pill (replaces the old pink
      circle + floating arrow); shown only inside topics, above dock.
   ================================================================ */

/* 1) topic header side gutter on mobile */
@media (max-width:979px){
  .ipsBox--topicHeader{
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
  }
}

/* 2) Follow → compact left-aligned pill (all widths) */
.ipsBox--topicHeader [data-role="followButton"],
.ipsBox--topicHeader .ipsFollow,
.ipsBox--topicHeader .ipsButton--follow{
  width:auto !important; max-width:max-content !important;
  display:inline-flex !important; align-items:center !important;
  margin-right:auto !important; flex:0 0 auto !important;
  padding:4px 10px !important; border-radius:999px !important;
  font-size:11px !important; line-height:1 !important;
}
.ipsBox--topicHeader .ipsFollow i,
.ipsBox--topicHeader .ipsButton--follow i{ font-size:10px !important; }
/* don't let the follow row stretch its child full width */
.ipsBox--topicHeader .ipsButtonBar,
.ipsBox--topicHeader .ipsButtonRow{
  justify-content:flex-start !important;
}

/* ----------------------------------------------------------------
   DESKTOP: hide the redundant top-of-topic Follow control so the
   title spans the FULL header width. Following is still available
   via the "Follow topic" toggle in the reply form (and IPS's
   auto-follow-on-reply preference), so nothing is lost — most
   readers never use the header button anyway.
   Mobile keeps the compact Follow pill (rules above), untouched.
   ---------------------------------------------------------------- */
@media (min-width:980px){
  body[data-pagecontroller="topic"] .ipsBox--topicHeader [data-role="followButton"],
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsFollow,
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsButton--follow{
    display:none !important;
  }
  /* collapse ONLY the bar/column that held the follow control (matched
     via :has so we never hit a bar that carries anything else) */
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsButtonBar:has([data-role="followButton"]),
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsButtonRow:has([data-role="followButton"]),
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsButtons:has([data-role="followButton"]),
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsPageHeader__secondary:has([data-role="followButton"]),
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsPageHeader__meta:has([data-role="followButton"]){
    display:none !important;
  }
  /* let the title reflow across the whole header row */
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsPageHeader__primary{
    flex:1 1 100% !important; width:100% !important; max-width:100% !important;
  }
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsPageHeader__title,
  body[data-pagecontroller="topic"] .ipsBox--topicHeader .ipsPageHeader__title h1{
    width:100% !important; max-width:100% !important; margin-right:0 !important;
  }
}

/* 3) TWO separate floating glass pills (Reply + Next) — NOT wrapped in an
   outer pill. The container is just a transparent centering row, sitting
   close above the dock. */
.exhale-topic-actions{
  position:fixed; left:50%; transform:translateX(-50%); bottom:66px; z-index:8500;
  display:flex; align-items:center; gap:8px; padding:0;
  background:none !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
/* keep a little space above the dock at each breakpoint (dock floats higher
   on desktop, so the pills need to float higher too or they hide behind it) */
@media (min-width:980px){ .exhale-topic-actions{ bottom:94px; } }
@media (max-width:979px){ .exhale-topic-actions{ bottom:74px; } }
/* each pill = the SAME clear glass as the dock (Stage J), not purple */
.exhale-topic-actions a{
  display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 16px;
  white-space:nowrap; border-radius:999px; text-decoration:none !important;
  font-family:'Inter Tight',system-ui,sans-serif; font-weight:700; font-size:11px;
  color:var(--ex-muted) !important;
  background:rgba(255,255,255,.105);
  -webkit-backdrop-filter:blur(18px) saturate(1.7); backdrop-filter:blur(18px) saturate(1.7);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.exhale-topic-actions a:hover{ background:rgba(255,255,255,.18); color:#fff !important; }
.exhale-topic-actions a:active{ transform:scale(.94); }
.exhale-topic-actions a i{ font-size:9px; }
/* hide for guests / logged-out and while the reply dialog is open */
body[data-memberid="0"] .exhale-topic-actions{ display:none !important; }
.ipsDialog_open .exhale-topic-actions{ display:none !important; }
html[data-ips-scheme-active="light"] .exhale-topic-actions a{
  background:rgba(255,255,255,.72); border-color:rgba(0,0,0,.1); color:#5a5a6a !important;
}
html[data-ips-scheme-active="light"] .exhale-topic-actions a:hover{ background:#fff; color:#111 !important; }

/* ================================================================
   Stage HH — quote link as a glassy pill + hide the "Member" group
   label (div/span.ipsEntry__group) to declutter the author row.
   ================================================================ */
a[data-action="quoteComment"]{
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  padding:5px 12px !important; border-radius:999px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important;
  color:var(--ex-muted) !important; font-weight:600 !important; text-decoration:none !important;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
a[data-action="quoteComment"]:hover{
  background:rgba(139,109,255,.22) !important; border-color:rgba(139,109,255,.4) !important; color:#fff !important;
}
html[data-ips-scheme-active="light"] a[data-action="quoteComment"]{
  background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; color:#5a5a6a !important;
}
html[data-ips-scheme-active="light"] a[data-action="quoteComment"]:hover{
  background:rgba(139,109,255,.14) !important; border-color:rgba(139,109,255,.35) !important; color:#111 !important;
}
/* remove the redundant "Member" group title (mods can be color-coded instead) */
.ipsEntry__group{ display:none !important; }

/* ================================================================
   Stage II — inline topic-event rows (e.g. "X changed the title to…")
   sit inside the topic feed's ipsPull full-bleed with NO side gutter,
   so on mobile they bleed off both edges. The posts (article.ipsEntry)
   already get a 16px gutter from Stage EE; give the same gutter to the
   NON-post rows in the feed without touching the posts themselves.
   ================================================================ */
@media (max-width:979px){
  .ipsEntries--topic > form > *:not(article):not(span):not(input):not([data-role="pageActionOptions"]),
  .ipsEntries--topic > .ipsButtonBar{
    padding-left:16px !important; padding-right:16px !important;
    box-sizing:border-box !important; max-width:100% !important;
    overflow-wrap:break-word !important; word-break:break-word !important;
  }
}

/* ================================================================
   Stage JJ — mobile bottom-of-topic cleanup:
   1) remove the standalone mobile "Follow" bar under the topic
   2) give the reply composer (+ its toggles/Submit) and the
      prev/next topic pager clean side gutters (they ride ipsPull)
   3) let the site footer clear the fixed glass dock so its text
      isn't covered — extra bottom room, dock stays put
   ================================================================ */
@media (max-width:979px){
  /* 1) kill the redundant mobile follow bar (the top-of-topic Follow pill stays) */
  .ipsPageActions.ipsResponsive_showPhone{ display:none !important; }

  /* 2) side gutters for the reply area + topic pager */
  #replyForm{
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
  }
  .ipsPager{
    padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important;
  }

  /* 3) scroll clearance so the footer sits above the floating dock */
  .ipsFooter__footer{ padding-bottom:104px !important; }
}

/* ================================================================
   Stage KK — DESKTOP only: the post author column (avatar, username,
   stats) is far too wide, squeezing comment text. Narrow the column
   and shrink the avatar a touch so the post body gets more width.
   (Handles both flex and grid article layouts; first-simple first
   post is single-column already, so its track isn't touched.)
   ================================================================ */
@media (min-width:980px){
  .ipsEntry--post:not(.ipsEntry--first-simple){
    grid-template-columns:150px minmax(0,1fr) !important;
  }
  .ipsEntry__author-column{
    width:150px !important; flex:0 0 150px !important;
    min-width:0 !important; box-sizing:border-box !important;
  }
  .ipsEntry__author-column .ipsAvatarStack{
    width:78px !important; max-width:78px !important; margin-left:auto !important; margin-right:auto !important;
  }
  .ipsEntry__author-column .ipsUserPhoto,
  .ipsEntry__author-column .ipsUserPhoto > img{
    width:78px !important; height:78px !important; object-fit:cover !important;
  }
  .ipsEntry__content{ min-width:0 !important; flex:1 1 auto !important; }

  /* Post/reply count + reactions: keep both on ONE line always. In the
     narrow 150px column IPS lets the stat list wrap, so wide numbers
     (e.g. 12.4k) drop to a second line while small ones stay on one —
     the inconsistency the members noticed. Force a single centered row. */
  .ipsEntry__author-column .ipsEntry__authorStats{
    display:flex !important; flex-flow:row nowrap !important;
    justify-content:center !important; align-items:center !important;
    gap:12px !important; margin:0 auto !important; padding:0 !important;
    list-style:none !important; max-width:100% !important;
  }
  .ipsEntry__author-column .ipsEntry__authorStats > li{
    flex:0 0 auto !important; margin:0 !important; white-space:nowrap !important;
  }
  .ipsEntry__author-column .ipsEntry__authorStats > li a{
    display:inline-flex !important; align-items:center !important; gap:4px !important;
    white-space:nowrap !important;
  }
}

/* ================================================================
   Stage LL — elevated quote blocks: a purple→bright-blue gradient
   accent down the left edge + a soft purple background (was a stark
   blue). Seamless on both light and dark.
   ================================================================ */
.ipsQuote{
  position:relative !important;
  background:linear-gradient(135deg, rgba(139,109,255,.13), rgba(139,109,255,.05)) !important;
  border:1px solid rgba(139,109,255,.20) !important;
  border-left:0 !important;
  border-radius:12px !important;
  overflow:hidden !important;
}
.ipsQuote::before{
  content:"" !important; position:absolute !important;
  left:0 !important; top:0 !important; bottom:0 !important; width:4px !important;
  background:linear-gradient(180deg, #8b6dff 0%, #4f9dff 100%) !important;
}
/* nested quotes: slightly deeper so they stay distinct */
.ipsQuote .ipsQuote{
  background:linear-gradient(135deg, rgba(139,109,255,.16), rgba(139,109,255,.06)) !important;
}
.ipsQuote_citation{ border-bottom:1px solid rgba(139,109,255,.14) !important; }
/* brighter quote text — the default gray is hard to read */
.ipsQuote_contents,
.ipsQuote_contents p{ color:rgba(255,255,255,.88) !important; }
html[data-ips-scheme-active="light"] .ipsQuote{
  background:linear-gradient(135deg, rgba(139,109,255,.10), rgba(139,109,255,.035)) !important;
  border-color:rgba(139,109,255,.18) !important;
}
html[data-ips-scheme-active="light"] .ipsQuote_contents,
html[data-ips-scheme-active="light"] .ipsQuote_contents p{ color:rgba(0,0,0,.82) !important; }

/* ================================================================
   Stage NN — mobile: match the FIRST post width to replies + even
   out the title gutters.
   The OP is nested inside .ipsBox--topicHeader, which already gives a
   16px gutter; Stage EE's .ipsEntry padding then double-gutters it,
   making the OP text 16px narrower per side than replies. Remove the
   redundant padding on the article that lives in the header box.
   ================================================================ */
@media (max-width:979px){
  .ipsBox--topicHeader .ipsEntry{
    padding-left:0 !important; padding-right:0 !important;
  }
  /* title: right gutter was ~19px larger than left — drop the stray
     margin and let the title span the full header width */
  .ipsBox--topicHeader .ipsPageHeader__primary{
    flex:1 1 100% !important; width:100% !important; max-width:100% !important;
  }
  .ipsBox--topicHeader .ipsPageHeader__title{ width:100% !important; max-width:100% !important; }
  .ipsBox--topicHeader .ipsPageHeader__title h1{ margin-right:0 !important; }
}

/* ================================================================
   Stage OO — emoji/icon picker on mobile: the editor's
   <dialog.ipsIconPicker__dialog> gets anchored to the toolbar button
   on narrow screens and its fixed width spills off the right edge.
   Pin it to the viewport (centered, small gutters) so it always fits
   and the emote grid wraps instead of clipping.
   ================================================================ */
@media (max-width:979px){
  /* Centered modal, forced. The picker is placed by a positioning library
     that anchors it to the toolbar button via an inline transform — that's
     why it landed off to the right and spilled past the screen edge (which
     also forced Safari to shrink the whole page to fit the overflow).
     Match the picker whatever element/tag IPS renders it as (dialog, a
     bare .ipsIconPicker__dialog, or a popover/dropdown wrapping it), then
     pin it dead-center, hard-capped to the viewport width, scrolling
     inside — never overflowing the sides, never resizing the layout. */
  dialog.ipsIconPicker__dialog,
  .ipsIconPicker__dialog,
  [class*="IconPicker__dialog"],
  [popover]:has(> .ipsIconPicker),
  [popover]:has(.ipsIconPicker__container),
  i-dropdown:has(.ipsIconPicker__container),
  .ipsMenu:has(.ipsIconPicker__container){
    position:fixed !important;
    inset:0 !important;                 /* pin to all edges … */
    margin:auto !important;             /* …then auto-margins center the box */
    transform:none !important;          /* neutralise the positioning lib's transform */
    width:92vw !important; max-width:92vw !important; min-width:0 !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    height:-moz-max-content !important; height:max-content !important;
    max-height:66vh !important;
    box-sizing:border-box !important;
    overflow:auto !important; -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important; overscroll-behavior:contain !important;
    z-index:9800 !important;
  }
  /* inner bits fill the panel + never push it wider than the viewport */
  .ipsIconPicker,
  .ipsIconPicker__container,
  .ipsIconPicker [data-role="icons"],
  .ipsIconPicker [data-icon-category]{
    max-width:100% !important; width:100% !important; box-sizing:border-box !important;
  }
  .ipsIconPicker input,
  .ipsIconPicker input[type="search"]{ width:100% !important; box-sizing:border-box !important; }

  /* THE FIX: make the emote grid its own finger-scrollable area. Give it a
     bounded height + real overflow scroll (so there's actually something to
     scroll), and enable vertical touch panning. Both the container and the
     icons list are targeted since IPS's scroller may be either one. */
  .ipsIconPicker__container,
  .ipsIconPicker [data-role="icons"]{
    max-height:52vh !important; height:auto !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    overscroll-behavior:contain !important;
    -ms-touch-action:pan-y !important;
  }
  /* keep the search box pinned above the scroll area, not scrolling away */
  .ipsIconPicker input[type="search"]{ position:sticky !important; top:0 !important; z-index:1 !important; }
  /* belt-and-suspenders: don't let any stray overflow zoom the page out.
     Use `clip`, NOT `hidden` — `hidden` makes <body> a scroll container,
     which breaks the sticky header on mobile; `clip` does not. */
  body{ overflow-x:clip !important; }
}

/* ================================================================
   Stage PP — emote sizing + picker polish
   (C) custom emotes (stored under /emoticons/) were rendering huge
       in the editor + posts because Stage EE's content-image rule
       (height:auto) stripped their size — cap them back to ~55px.
   (B) in the picker they were cropped to strips — show each fully.
   (A) drop the dark-purple fill on the picker's search box so it
       blends with the lighter panel.
   ================================================================ */
/* (C) keep emotes small wherever they're rendered */
.ipsRichText img[src*="/emoticons/"],
.ipsEntry img[src*="/emoticons/"],
.ipsComposeArea img[src*="/emoticons/"],
[contenteditable] img[src*="/emoticons/"],
.ProseMirror img[src*="/emoticons/"]{
  width:auto !important; height:auto !important;
  max-width:55px !important; max-height:55px !important;
  vertical-align:middle !important;
}
/* (B) picker emotes: show the whole image, not a cropped strip */
.ipsIconPicker img,
.ipsIconPicker__dialog img{
  width:auto !important; height:auto !important;
  max-width:100% !important; max-height:48px !important;
  object-fit:contain !important; aspect-ratio:auto !important;
}
/* (A) seamless search box in the picker */
.ipsIconPicker input,
.ipsIconPicker input[type="search"],
.ipsIconPicker__dialog input[type="search"]{
  background:transparent !important;
}

/* ================================================================
   Stage QQ — moderation: when comments are selected for moderation,
   the floating "With N selected" action bar was sitting UNDER the
   Reply/Next pills, so the admin couldn't tap its buttons. Hide the
   pills whenever any moderation checkbox is checked so the mod
   actions take precedence.
   ================================================================ */
body:has(input[data-role="moderation"]:checked) .exhale-topic-actions{
  display:none !important;
}

/* ================================================================
   Stage RR — "Back to <forum>" pill (JS-injected above the topic
   title) since breadcrumbs are hidden.
   ================================================================ */
.exhale-back-forum{
  display:inline-flex; align-items:center; gap:7px;
  margin:2px 0 14px; padding:7px 14px 7px 12px;
  border-radius:999px; text-decoration:none !important;
  font-family:'Inter Tight',system-ui,sans-serif; font-weight:600; font-size:13px;
  color:var(--ex-muted) !important;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.exhale-back-forum:hover{
  background:rgba(139,109,255,.18); border-color:rgba(139,109,255,.35); color:#fff !important;
}
.exhale-back-forum i{ font-size:11px; }
html[data-ips-scheme-active="light"] .exhale-back-forum{
  background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:#5a5a6a !important;
}

/* ================================================================
   Stage SS — flatten the topic view: make box fills match the page
   background and neutralise the purple box/reply borders so posts +
   the reply area read as one dark surface (less "boxy"). Quote blocks
   keep their own styling.
   ================================================================ */
body[data-pagecontroller="topic"]{
  --i-box--bo-co: transparent !important;   /* Stage UU: no faint box hairlines (both schemes) */
}
/* dark fill only in dark mode — in light mode let IPS's light box bg
   stand so posts don't render as black boxes with dark text. */
html[data-ips-scheme-active="dark"] body[data-pagecontroller="topic"]{
  --i-box--ba-co: var(--ex-bg) !important;
  --i-boxHeader--ba-co: var(--ex-bg) !important;
}
body[data-pagecontroller="topic"] .ipsComposeAreaWrapper,
body[data-pagecontroller="topic"] .ipsComposeArea,
body[data-pagecontroller="topic"] .ipsComposeArea_editor,
body[data-pagecontroller="topic"] .ipsEditor,
body[data-pagecontroller="topic"] #replyForm{
  background:transparent !important;
  border-color:rgba(255,255,255,.1) !important;
  box-shadow:none !important;
}
body[data-pagecontroller="topic"] .ipsComposeArea:focus-within,
body[data-pagecontroller="topic"] .ipsEditor:focus-within{
  border-color:rgba(255,255,255,.16) !important; box-shadow:none !important;
}

/* ================================================================
   Stage TT — forum topic-LIST view cleanup. Scope is the forums app
   MINUS the topic view (so the homepage feed + topic pages are
   untouched):  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]).
     (a) flatten the light-purple box fills to the dark page bg;
     (b) hide the Sort By / Filter controls (nobody uses them) by
         removing the whole filters bar — the admin "Select all" that
         also lived in that bar is relocated into the pager by
         custom.js #10 BEFORE the bar is hidden, so it survives;
     (c) de-chrome the top button bar so the list sits higher;
     (d) turn the pager (first/prev/pages/next/last + page-jump) into
         clear glass pills that match the dock.
   Purple usernames/links and the Start-new-topic button are kept.
   ================================================================ */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]){
  --i-box--bo-co: transparent !important;   /* no faint chrome hairlines (both schemes) */
}
/* dark fill only in dark mode — light mode keeps IPS's light box bg so
   the forum header/description box isn't a black rectangle. */
html[data-ips-scheme-active="dark"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]){
  --i-box--ba-co: var(--ex-bg) !important;
  --i-boxHeader--ba-co: var(--ex-bg) !important;
}

/* Stage TT.2 — hide the last-page (»») pager arrow. Users can still
   jump anywhere via the "Page X of Y" dropdown, so the jump-to-end
   arrow is redundant. (First-page arrow is left alone.) */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__last{
  display:none !important;
}

/* Stage TT.3 — hide the forum-header stats + Following segmented bar
   (the little chart button and the follow control). Matched by the
   follow control so we only ever hide the bar that contains it — the
   pager and Start-new-topic button are untouched. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar:has([data-role="followButton"]),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons:has([data-role="followButton"]),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader__meta:has([data-role="followButton"]){
  display:none !important;
}

/* Stage TT.4 — erase the faint gray divider hairlines in the forum
   header/toolbar chrome. Topic-ROW separators (.ipsData__item) are
   left intact so the list is still easy to scan. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsHeader,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader__primary,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar--top,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar__end,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar__pagination,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPager,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox__content,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) hr{
  border:0 !important;
  box-shadow:none !important;
}
/* the pager bars carry a purple tint box — flatten to the page bg */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar__pagination{
  background:transparent !important;
}
/* bottom pager: give it room to breathe below the last topic row */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar:not(.ipsButtonBar--top){
  margin-top:26px !important; padding-top:0 !important; padding-bottom:0 !important;
}

/* (a) flatten the listing card + drop any unread row tint */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item{
  background:transparent !important;
}
/* keep every row separator the SAME soft gray — the first row was
   rendering a brighter/white divider. Recolor only (no extra borders). */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData--table > li{
  border-color:var(--ex-line) !important;
}
/* circular preview thumbnails, matching the homepage feed.
   Pin an explicit size — without a width/height cap IPS renders the
   image at its native (huge) dimensions. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__image,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .tthumb__image{
  border-radius:50% !important; overflow:hidden !important; aspect-ratio:1/1 !important;
  width:75px !important; height:75px !important; min-width:75px !important; max-width:75px !important;
  flex:0 0 75px !important; padding:0 !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__image img,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .tthumb__image img{
  width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important;
}
/* hide the purple status dot / star before each title (unread /
   featured indicators — not intuitive, so remove them entirely).
   Cover every place IPS may render the marker: the icon slot, the
   .ipsItemStatus indicator, and leading circle/star glyphs. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__icon,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsItemStatus,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [data-role="status"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item i.fa-circle,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item i.fa-solid.fa-circle,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item i.fa-star,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item i.fa-solid.fa-star,
/* round 2 — pseudo-element bullets + any explicitly status/indicator/
   badge/flag-named node in the row. These CANNOT match the title link
   or its text, so a miss is harmless (it never hides a title). */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__title::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__title > a::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__main::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsBadge,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [class*="ItemStatus"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [class*="Indicator"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [class*="ndicator"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [data-role="flag"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item [data-role="unread"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .fa-circle,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .fa-solid.fa-circle,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .fa-star{
  display:none !important;
  content:none !important;
}

/* Stage TT.5 — "you've replied here" cue. IPS marks topics you've
   posted in with a star indicator; we keep that glyph hidden (above)
   but reuse its PRESENCE (:has still matches hidden nodes) to draw a
   slim purple gradient bar down the row's left edge — the subtle
   at-a-glance "you engaged with this" signal from the old layout.
   Multiple hooks are OR'd so we catch whichever markup IPS/SuperTopics
   actually uses. Unread dots (fa-circle) are deliberately NOT a hook. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(i.fa-star),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(i.fa-solid.fa-star),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(.ipsItemStatus--posted),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has([data-ipstooltip*="posted" i]),
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has([title*="you" i][title*="posted" i]){
  position:relative !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(i.fa-star)::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(i.fa-solid.fa-star)::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has(.ipsItemStatus--posted)::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has([data-ipstooltip*="posted" i])::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item:has([title*="you" i][title*="posted" i])::before{
  content:"" !important;
  position:absolute !important; left:0 !important; top:12px !important; bottom:12px !important;
  width:4px !important; border-radius:0 4px 4px 0 !important;
  /* blue-purple logo gradient: periwinkle → blue */
  background:linear-gradient(180deg,#7b74f2,#4f9dff) !important;
  box-shadow:0 0 10px rgba(79,157,255,.5) !important;
  pointer-events:none !important; z-index:2 !important;
}

/* (b)+(c) remove the Sort/Filter bar and de-chrome the top button bar.
   custom.js #10 has already lifted the admin "Select all" into the pager. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsDataFilters{
  display:none !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar--top{
  background:transparent !important; border:0 !important;
  padding:0 !important; margin:0 0 10px !important;
}

/* (d) glass pills for the pager (matches the dock's clear glass) */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination{
  display:flex !important; flex-wrap:nowrap !important; gap:6px !important;
  align-items:center !important; list-style:none !important;
  padding:0 !important; margin:4px 0 !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li{
  margin:0 !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li > a,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__pageJump button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-width:34px !important; height:34px !important; padding:0 12px !important;
  border-radius:999px !important; box-sizing:border-box !important;
  font-family:'Inter Tight',system-ui,sans-serif !important;
  font-weight:600 !important; font-size:13px !important; line-height:1 !important;
  color:var(--ex-muted) !important; text-decoration:none !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li > a:hover,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__pageJump button:hover{
  background:rgba(139,109,255,.18) !important;
  border-color:rgba(139,109,255,.35) !important; color:#fff !important;
}
/* current page = solid purple fill so it's unmistakable which page you're on.
   Broadened across the shapes IPS may use for the active pill: the classic
   .ipsPagination__active, an <a>/<span> child, or an aria-current marker. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__active > a,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__active > span,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination li[aria-current] > a,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination li[aria-current] > span,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination a[aria-current]{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-width:34px !important; height:34px !important; padding:0 12px !important;
  border-radius:999px !important; box-sizing:border-box !important;
  background:var(--ex-purple-fill,#6d4be6) !important;
  border:1px solid var(--ex-purple,#8b6dff) !important;
  color:#fff !important; font-weight:800 !important;
}
/* if the active page happens to fall outside the first-4 window we cap to
   on mobile, never let it get hidden — the current page must always show */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__active,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination li[aria-current]{
  display:inline-flex !important;
}
/* first/prev when already on page 1 = dimmed, not clickable */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__inactive > a{
  opacity:.4 !important; pointer-events:none !important;
}
/* the relocated admin "Select all" rides at the right end of the pager */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li.exhale-selectall-moved{
  display:inline-flex !important; margin-left:auto !important;
}

/* ================================================================
   Stage UU — topic view: erase the faint gray divider hairlines in
   the header/toolbar chrome (header border, topic-header box, button
   bars, stats, pager), then — on MOBILE ONLY — separate individual
   replies with a single clean hairline so the thread reads cleanly
   without going back to the boxy look.
   ================================================================ */
/* NOTE: post elements (.ipsBox, .ipsBox--topicHeader, .ipsComment,
   .ipsEntry) are deliberately NOT in this list — their fills are
   already flattened via --i-box--bo-co (Stage SS), and zeroing their
   top/bottom borders here clipped the premium-member purple outline
   into a lopsided shape. Only the header/toolbar chrome is zeroed. */
body[data-pagecontroller="topic"] .ipsHeader,
body[data-pagecontroller="topic"] .ipsPageHeader,
body[data-pagecontroller="topic"] .ipsButtonBar,
body[data-pagecontroller="topic"] .ipsButtonBar--top,
body[data-pagecontroller="topic"] .ipsPager,
body[data-pagecontroller="topic"] .ipsData__stats,
body[data-pagecontroller="topic"] .ipsData__stats > *{
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
  box-shadow:none !important;
}

/* one hairline between replies — mobile only */
@media (max-width:979px){
  body[data-pagecontroller="topic"] .ipsEntries--topic article.ipsEntry,
  body[data-pagecontroller="topic"] .ipsEntries article.ipsEntry{
    border-top:1px solid rgba(255,255,255,.09) !important;
    border-bottom-color:transparent !important;
  }
}

/* ================================================================
   Stage VV — kill the load-time "usernames overlap then snap" flash.
   custom.css is render-blocking, but the feed rows are still
   re-laid-out a beat after first paint (web-font swap + IPS /
   SuperTopics hydration), which briefly stacks the two meta
   usernames before our grid settles. Starting the row containers at
   opacity:0 and fading them in masks that settle completely, so the
   overlap is never visible. Covers both the homepage feed and the
   forum topic-list view.
   ================================================================ */
@keyframes exSettleIn{ from{ opacity:0; } to{ opacity:1; } }
/* Homepage feed: quick fade-in. */
.ipsData--topic-feed-widget{
  animation:exSettleIn .22s ease both;
}
/* Forum topic-list rows: HOLD each row invisible for 0.45s through the
   reflow where the two meta usernames briefly stack (opacity:0 during
   the delay via fill-mode `both`), THEN fade the settled row in — so
   the overlap is never on screen. (Preferred over an instant fade,
   which let the "sloppy" stacking flash through.) */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item{
  animation:exSettleIn .28s ease .45s both;
}
/* Mobile hydrates / swaps the web font later than desktop, so the meta
   usernames stack for longer — 0.45s wasn't enough and the overlap
   peeked through. Hold mobile rows invisible longer to cover it. */
@media (max-width:979px){
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item{
    animation:exSettleIn .3s ease .85s both !important;
  }
}

/* ================================================================
   Stage WW — DESKTOP (≥980px) forum topic-LIST only:
   1) widen the content column toward the header width (the 780px
      feed cap felt far too narrow on an iPad-wide screen);
   2) left-justify the "Start new topic" button (was right-aligned).
   Scoped to the forum listing so the homepage feed keeps its width.
   ================================================================ */
@media (min-width:980px){
  /* WIDTH: every width cap in the theme is driven by var(--ex-wrap),
     so bump the variable for the forum listing — this catches whatever
     wrapper the earlier explicit selectors were missing. Then override
     the two HARD-CODED 812px caps as well. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]){
    --ex-wrap:780px !important;   /* match the topic view exactly */
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsWidth,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsWidth--main-content,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__main,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__content,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__container,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsColumns{
    max-width:var(--ex-wrap) !important;   /* 780 — was a leftover 1100 */
  }
  /* MAIN is a flex-COLUMN child of .ipsLayout__app; unlike the header
     and footer it wasn't stretching, so it shrank to its content (544).
     Force it to fill, then cap at 780 centered so it lines up with the
     header/footer content and the topic view. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__main{
    align-self:center !important;
    width:100% !important;
    max-width:var(--ex-wrap) !important;
    margin-left:auto !important; margin-right:auto !important;
    flex:0 0 auto !important;
  }

  /* LEFT-JUSTIFY "Start new topic": the button href varies by IPS
     version (startTopic / ?do=add / /add/), so match all shapes, kill
     any float/right-align on the button AND its wrapper. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) a[href*="startTopic"],
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) a[href*="do=add"],
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) a[href*="/add/"]{
    align-self:flex-start !important; float:none !important;
    margin-left:0 !important; margin-right:auto !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) *:has(> a[href*="startTopic"]),
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) *:has(> a[href*="do=add"]),
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) *:has(> a[href*="/add/"]){
    justify-content:flex-start !important; text-align:left !important;
    margin-left:0 !important; margin-right:auto !important;
  }
  /* the actual wrapper (confirmed from page HTML) is ul.ipsButtons--main,
     with the <a> two levels down — the rule above only reached the <li>.
     Target the flex <ul> directly so the button sits on the LEFT. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) ul.ipsButtons:has(a[href*="do=add"]),
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) ul.ipsButtons:has(a[href*="startTopic"]){
    justify-content:flex-start !important; text-align:left !important;
  }
}

/* Start-new-topic — LEFT at EVERY width (the rule above was desktop-only,
   so tablet/narrow widths still showed IPS's default, which shoves the
   last button right via an auto inline-margin on the <li>). No media
   query here, and we zero that auto margin directly. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main{
  display:flex !important;
  justify-content:flex-start !important;
  margin-left:0 !important; margin-right:auto !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main > li,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main > li:first-child,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main > li:last-child{
  margin-inline-start:0 !important;
  margin-left:0 !important;
}

/* Start-new-topic — shared look at EVERY width: animated flowing gradient
   (same keyframes as the reply Submit button) + a "+" icon to match the
   dock's + button. The animation runs on the compositor, so it costs
   nothing at load. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main .ipsButton--primary,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="do=add"],
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="startTopic"]{
  background:linear-gradient(90deg,#7b74f2,#4f9dff,#7b74f2,#6d4be6) !important;
  background-size:300% 100% !important;
  animation:exReplyGradient 4s ease infinite !important;
  border:0 !important; color:#fff !important;
  box-shadow:0 8px 22px rgba(109,75,230,.4) !important;
}
/* swap the pencil glyph for a plus (matches the footer nav +) */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="do=add"] i.fa-pen-to-square::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="startTopic"] i.fa-pen-to-square::before,
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="do=add"] i::before{
  content:"\2b" !important;   /* fa-plus */
}
@media (prefers-reduced-motion:reduce){
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main .ipsButton--primary,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="do=add"],
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="startTopic"]{
    animation:none !important;
  }
}

/* ================================================================
   Stage XX — DESKTOP (≥980px): the FIRST post (inside
   .ipsBox--topicHeader) was excluded from Stage KK's author-column
   narrowing, so it kept a wide author track and its body rendered
   narrower than the replies. Give it the same slim 150px author
   column so the OP body matches the reply width. The :has() guard
   means it only fires when the OP actually has a two-column author
   layout — single-column first posts are left alone.
   ================================================================ */
@media (min-width:980px){
  .ipsBox--topicHeader .ipsEntry:has(.ipsEntry__author-column){
    grid-template-columns:150px minmax(0,1fr) !important;
  }
  .ipsBox--topicHeader .ipsEntry__author-column{
    width:150px !important; flex:0 0 150px !important;
    min-width:0 !important; box-sizing:border-box !important;
  }
  .ipsBox--topicHeader .ipsEntry__author-column .ipsAvatarStack,
  .ipsBox--topicHeader .ipsEntry__author-column .ipsUserPhoto,
  .ipsBox--topicHeader .ipsEntry__author-column .ipsUserPhoto > img{
    width:78px !important; max-width:78px !important; height:78px !important;
    margin-left:auto !important; margin-right:auto !important; object-fit:cover !important;
  }
  .ipsBox--topicHeader .ipsEntry__content{ min-width:0 !important; flex:1 1 auto !important; }
}

/* ================================================================
   Stage YY — topic overview footer (cTopicOverview): hide the
   "Popular Days" cell (eats space, not needed) and let "Most Popular
   Posts" span the full width of the bottom instead of sitting in the
   right column. Targets the item classes directly, so it covers both
   the phone (--main) and desktop (--sidebar) copies of the block.
   ================================================================ */
body[data-pagecontroller="topic"] .cTopicOverview__item--popularDays{
  display:none !important;
}
body[data-pagecontroller="topic"] .cTopicOverview__item--popularPosts{
  grid-column:1 / -1 !important;
  flex-basis:100% !important; width:100% !important; max-width:100% !important;
}

/* ================================================================
   Stage ZZ — DESKTOP (≥980px) forum topic-LIST: header, footer and
   the topics column all read from the SAME --ex-wrap variable, so
   they line up at one width. (Earlier stages hard-coded the header
   and footer to 780px, which no longer matched the widened list.)
   Real element classes confirmed from page HTML:
     header  → .ipsHeader__primary > .ipsWidth.ipsHeader__align
     footer  → .ipsFooter__footer > .ipsWidth  +  .ipsFooter__align
               .ipsFooter__widgets.ipsWidth
   ================================================================ */
@media (min-width:980px){
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsHeader__primary .ipsWidth,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsHeader__primary .ipsHeader__align,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsHeader__primary .ipsWidth.ipsHeader__align{
    max-width:var(--ex-wrap) !important; margin-inline:auto !important;
    box-sizing:border-box !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsFooter__footer .ipsWidth,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsFooter__widgets.ipsWidth,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsFooter__align{
    max-width:var(--ex-wrap) !important; margin-inline:auto !important;
    box-sizing:border-box !important;
  }
}

/* ================================================================
   Stage AB — topic reply form: make it impossible to miss.
   1) "Leave a comment" heading above the editor.
   2) Glowing purple→blue gradient border around the whole box
      (the inner editor keeps its grey border, untouched).
   3) Animated flowing-gradient Submit Reply button + the primary
      "Reply to this topic" CTA.
   4) Smaller post usernames on desktop so long names stop wrapping.
   ================================================================ */
@keyframes exReplyGradient{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes exReplyGlow{ 0%,100%{box-shadow:0 0 16px rgba(139,109,255,.25)} 50%{box-shadow:0 0 30px rgba(139,109,255,.52)} }

/* 1+2) glowing gradient border box + heading */
body[data-pagecontroller="topic"] #replyForm{
  position:relative !important;
  border:2px solid transparent !important;
  border-radius:16px !important;
  padding:18px !important;
  background:
    linear-gradient(var(--ex-bg),var(--ex-bg)) padding-box,
    linear-gradient(135deg,#8b6dff,#4f9dff,#8b6dff) border-box !important;
  box-shadow:0 0 20px rgba(139,109,255,.32) !important;
  animation:exReplyGlow 3.2s ease-in-out infinite !important;
}
body[data-pagecontroller="topic"] #replyForm::before{
  content:"Leave a comment";
  display:block;
  font-family:inherit;                 /* match the rest of the site (body font) */
  font-weight:700; font-size:14px; letter-spacing:normal;
  color:#fff; margin:0 0 12px 2px;
}
/* light mode: white inner fill (keep the gradient border) + dark heading */
html[data-ips-scheme-active="light"] body[data-pagecontroller="topic"] #replyForm{
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,#8b6dff,#4f9dff,#8b6dff) border-box !important;
}
html[data-ips-scheme-active="light"] body[data-pagecontroller="topic"] #replyForm::before{
  color:#1a1a1a !important;
}
/* mobile: pull it in from the screen edges so the glow border shows */
@media (max-width:979px){
  body[data-pagecontroller="topic"] #replyForm{
    margin-left:12px !important; margin-right:12px !important;
    width:auto !important; padding:14px !important;
  }
}

/* 3) animated flowing-gradient Submit Reply + the reply CTA */
body[data-pagecontroller="topic"] #replyForm button[type="submit"],
body[data-pagecontroller="topic"] #replyForm .ipsButton--primary[type="submit"],
body[data-pagecontroller="topic"] a.ipsButton--primary[href*="#replyForm"]{
  background:linear-gradient(90deg,#7b74f2,#4f9dff,#7b74f2,#6d4be6) !important;
  background-size:300% 100% !important;
  border:0 !important; color:#fff !important;
  box-shadow:0 4px 18px rgba(139,109,255,.5) !important;
  animation:exReplyGradient 4s ease infinite !important;
  transition:transform .15s ease, box-shadow .2s ease !important;
}
body[data-pagecontroller="topic"] #replyForm button[type="submit"]:hover,
body[data-pagecontroller="topic"] a.ipsButton--primary[href*="#replyForm"]:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 6px 26px rgba(139,109,255,.7) !important;
}

/* respect reduced-motion: keep the gradient look, drop the animation */
@media (prefers-reduced-motion:reduce){
  body[data-pagecontroller="topic"] #replyForm,
  body[data-pagecontroller="topic"] #replyForm button[type="submit"],
  body[data-pagecontroller="topic"] a.ipsButton--primary[href*="#replyForm"]{
    animation:none !important;
  }
}

/* 4) smaller post usernames on desktop (long names were wrapping) */
@media (min-width:980px){
  body[data-pagecontroller="topic"] .ipsEntry__author-column .ipsUsername{
    font-size:13px !important; line-height:1.22 !important;
    overflow-wrap:anywhere !important;
  }
}

/* ================================================================
   Stage AC — forum topic-LIST desktop: the list rendered at ~half
   width because the forum view RESERVES the right sidebar column for
   the list (unlike the topic view). Force the layout to a single
   column so the list fills the same 780px the header/footer use, i.e.
   the exact width of the topic view.
   ================================================================ */
@media (min-width:980px){
  /* FORCE flex here. An early global rule sets .ipsLayout__columns to
     display:block on every page; in block mode the forum-list primary
     column collapses to 544px, but in flex (with the sidebar hidden)
     flex:1 makes it fill the full 780. Body-scoped so it beats the
     global block rule. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__columns{
    display:flex !important;
    flex-direction:row !important;
    gap:0 !important;
  }
  /* hide the reserved sidebar in every form it may take */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__secondary-column,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__secondary-sticky-outer,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__secondary-sticky-inner,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) #ipsLayout_sidebar,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [class*="ipsLayout__secondary"]{
    display:none !important;
    width:0 !important;
  }
  /* the list column takes the full row, no reserved track */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__primary-column,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [class*="ipsLayout__primary"]{
    width:100% !important; max-width:100% !important;
    flex:1 1 100% !important; grid-column:1 / -1 !important; grid-area:auto !important;
  }
  /* and the list card + list fill that column edge to edge */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData--table{
    max-width:100% !important; width:100% !important;
    margin-left:0 !important; margin-right:0 !important;
  }
}

/* ================================================================
   Stage AD — forum topic-LIST desktop: the list card carries IPS's
   `ipsPull` full-bleed (margin-inline:-66px), which blew the rows out
   to ~912px — wider than the 780px header/footer/column. On desktop we
   don't want that full-bleed; pin the list to its column so it lines
   up with everything else. (Mobile keeps Stage FF's full-bleed.)
   Diagnostic-confirmed: plain margin-left/right couldn't beat the
   logical `margin-inline`, so override that property directly.
   ================================================================ */
@media (min-width:980px){
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable.ipsPull{
    margin:0 !important;
    margin-inline:0 !important;
    width:auto !important;
    max-width:100% !important;
  }
}

/* Disabled "Prev" pill on page 1 (custom.js #16 tags/injects .exhale-prev-stub
   when there's no working Prev link) so the pager reads like pages 2+:
   Prev · 1 2 3 4 · Next. Grayed + non-interactive at every width. */
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination .exhale-prev-stub{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  list-style:none !important; margin:0 !important;
  min-width:34px; height:34px; padding:0 12px; box-sizing:border-box;
  border-radius:999px !important; text-transform:uppercase;
  font-family:'Inter Tight',system-ui,sans-serif; font-weight:600; font-size:12px; line-height:1; letter-spacing:.02em;
  color:var(--ex-muted) !important; background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important;
  opacity:.4 !important; pointer-events:none !important; cursor:default !important;
}
body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination .exhale-prev-stub > span{
  color:inherit !important; padding:0 !important; background:none !important; border:0 !important;
}
html[data-ips-scheme-active="light"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination .exhale-prev-stub{
  background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.12) !important; color:#57536b !important;
}

/* ================================================================
   Stage AE — MOBILE (≤979px) forum-list pager + Start-new-topic.
   1) Pager: page-jump sits hard LEFT (DOM order), NEXT pinned hard
      RIGHT via margin-left:auto — no more "arbitrary" spread.
   2) Start new topic: was full-width & gigantic; make it a
      content-width pill, a little taller, still left-aligned.
   ================================================================ */
@media (max-width:979px){
  /* --- pager: mirror the desktop pager, but keep it to ONE line. IPS
     hides the numbered pills on mobile; reveal them, cap to the first 4,
     and compact them so [1 2 3 4] + "Page X of Y" + Next all fit. --- */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination{
    display:flex !important; flex-wrap:nowrap !important;
    align-items:center !important; width:100% !important; gap:5px !important;
  }
  /* un-hide the numbered page links (they already get the pill styling from
     the non-media-query rules above — IPS just display:none's them here) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__page,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li.ipsPagination__page{
    display:inline-flex !important;
  }
  /* …but never more than 4: hide the 5th numbered pill onward */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__page ~ .ipsPagination__page ~ .ipsPagination__page ~ .ipsPagination__page ~ .ipsPagination__page{
    display:none !important;
  }
  /* compact pills so the whole pager fits one line on narrow phones */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li > a,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__pageJump button{
    min-width:32px !important; height:34px !important; padding:0 10px !important; font-size:12px !important;
  }
  /* keep the "Page X of Y" pill on ONE line + slim (it was wrapping) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__pageJump button{
    white-space:nowrap !important; padding:0 9px !important; font-size:11.5px !important; line-height:1.2 !important;
  }
  /* drop the non-essential bits on mobile so everything fits one line:
     the admin select-all, and the first/last («/») jump arrows. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination > li.exhale-selectall-moved,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__first,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__last{
    display:none !important;
  }
  /* natural order: [Prev] 1 2 3 4 Next [Page X of Y] — no auto-margin push
     that was shoving Next off the right edge. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination__next{
    order:0 !important; margin-left:0 !important;
  }
  /* mobile size for the disabled "Prev" pill (custom.js #16 adds it on page 1) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPagination .exhale-prev-stub{
    min-width:32px !important; height:34px !important; padding:0 10px !important; font-size:12px !important;
  }

  /* --- Start new topic: full-width sleek gradient band, snug under the
     description (kills the big floaty gaps + the "random" left pill). --- */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main{
    display:flex !important; width:100% !important; margin:4px 0 14px !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main > li{
    flex:1 1 auto !important; width:100% !important; max-width:100% !important; margin:0 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main .ipsButton--primary,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtons--main a[href*="do=add"]{
    display:flex !important; align-items:center !important; justify-content:center !important;
    width:100% !important; max-width:100% !important; box-sizing:border-box !important;
    padding:15px 20px !important; font-size:15px !important; line-height:1 !important;
    /* gradient + animation come from the shared rule above */
  }

  /* --- forum-list rows on mobile: a touch of space under the title, and
     the reply/view counts as sleek pills (parity with the desktop list) --- */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__title{
    margin-bottom:7px !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats{
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    gap:6px !important; margin:8px 0 0 !important; padding:0 !important; list-style:none !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats li{
    display:inline-flex !important; align-items:center !important;
    padding:4px 11px !important; border-radius:999px !important;
    background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.09) !important;
    font-size:12px !important; color:var(--ex-muted) !important; white-space:nowrap !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats li[data-stattype="forums_comments"]{
    color:#b9a8ff !important; border-color:rgba(139,109,255,.25) !important;
  }
  html[data-ips-scheme-active="light"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats li{
    background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.12) !important; color:#57536b !important;
  }
  html[data-ips-scheme-active="light"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats li[data-stattype="forums_comments"]{
    color:#6d4be6 !important; border-color:rgba(109,75,230,.3) !important;
  }
  /* show the count text (IPS keeps the icon span hidden → empty pills otherwise) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats-icon{ display:none !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__stats-label{
    display:inline !important; font-size:12px !important; font-weight:500 !important;
    color:inherit !important; white-space:nowrap !important;
  }

  /* --- FIX: starter ("X, date") and last-reply ("Y ↩ 1 day") were
     overlapping on multi-line-title rows because only the DESKTOP block
     ever laid these two lines out — on mobile the last-reply sat out of
     normal flow. Stack the whole row as one clean column so each piece
     gets its own line: title · starter · last reply · stat pills.
     display:contents dissolves the main/extra wrappers so their leaf
     children become direct flex items we can order (same technique the
     desktop block uses). --- */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__content{
    display:flex !important; flex-direction:column !important;
    align-items:stretch !important; min-width:0 !important; gap:0 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__main,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__extra{
    display:contents !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__title{ order:1 !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__meta{ order:2 !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last{ order:3 !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats{ order:4 !important; }
  /* both meta lines: normal flow, own line, one row each, no overlap */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__meta,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last{
    position:static !important; float:none !important; clear:none !important;
    display:flex !important; flex-flow:row wrap !important; align-items:baseline !important;
    gap:0 5px !important; margin:2px 0 0 !important; padding:0 !important;
    font-size:12px !important; line-height:1.35 !important; color:var(--ex-muted) !important;
    white-space:normal !important; overflow:visible !important; max-width:100% !important;
  }
  /* hide the last-reply avatar on mobile (the ↩ + name is enough) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last a.ipsUserPhoto,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last .ipsUserPhoto,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last img{
    display:none !important;
  }
}

/* ================================================================
   Stage AF — DESKTOP (≥980px) forum-list row polish.
   (a) replies/views become compact icon pills;
   (b) title column grows, checkbox + right columns shrink;
   (c) breathing room under the "Started by" line;
   (d) label the two ambiguous meta lines: "Started by …" under the
       title, and an uppercase "LAST REPLY" over the right column.
   ================================================================ */
@media (min-width:980px){
  /* Make the WHOLE row a flex line so the content fills to the checkbox
     (kills the dead space on the right) and the title gets the width. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item.tthumb_topicRow{
    display:flex !important; align-items:center !important; gap:16px !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__image{
    flex:0 0 auto !important;
  }
  /* content is the row's stretch child — fill everything between the
     thumbnail and the checkbox (descendant selector, not '>', so it
     applies no matter how IPS nests it). */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__content{
    flex:1 1 auto !important; min-width:0 !important;
    display:flex !important; align-items:center !important; gap:20px !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__item .ipsData__mod{
    flex:0 0 auto !important; align-self:center !important; margin-left:10px !important;
  }
  /* Lay content out as a grid so each piece lands in a named area:
       title  |  pills          (pills span the right column,
       meta   |  pills           vertically centered)
       last   |  pills
     display:contents dissolves the main/extra wrappers so their leaf
     children (title, meta / stats, last) become direct grid items —
     that's what lets the last-reply drop UNDER "Started by" while the
     stat pills stay pinned top-right on a straight rail. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__content{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:"title stats" "meta stats" "last stats" !important;
    column-gap:20px !important; row-gap:2px !important; align-items:start !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__main,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__extra{
    display:contents !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__title{
    grid-area:title !important; min-width:0 !important; margin:0 0 7px 0 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__meta{
    grid-area:meta !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last{
    grid-area:last !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats{
    grid-area:stats !important; align-self:center !important; justify-self:end !important;
  }
  /* bigger title + spacing under the starter line */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__title h4 a{
    font-size:16px !important; line-height:1.3 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__meta{
    margin:0 !important; color:var(--ex-muted) !important; font-size:12px !important;
    line-height:1.3 !important; /* match the last-reply line so the two sit close */
  }
  /* (d) clarity — "Started by" prefix on the under-title line */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__meta::before{
    content:"Started by "; opacity:.55;
  }

  /* (a) replies/views → compact icon pills */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats{
    display:flex !important; flex-direction:row !important; gap:6px !important; margin:0 !important; padding:0 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats li{
    display:inline-flex !important; align-items:center !important;
    padding:4px 11px !important; border-radius:999px !important;
    background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.09) !important;
    font-size:12px !important; color:var(--ex-muted) !important; white-space:nowrap !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats li[data-stattype="forums_comments"]{
    color:#b9a8ff !important; border-color:rgba(139,109,255,.25) !important;
  }
  /* light mode: the white-on-white glass pill is invisible — tint it
     with a dark translucent fill/border and readable text. */
  html[data-ips-scheme-active="light"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats li{
    background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.12) !important; color:#57536b !important;
  }
  html[data-ips-scheme-active="light"] body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats li[data-stattype="forums_comments"]{
    color:#6d4be6 !important; border-color:rgba(109,75,230,.3) !important;
  }
  /* Show the count TEXT inside the pill (reliable — IPS keeps the icon
     span hidden, so pseudo-icons never rendered → empty pills). */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats-icon{ display:none !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__stats-label{
    display:inline !important; font-size:12px !important; font-weight:500 !important;
    color:inherit !important; white-space:nowrap !important;
  }

  /* (d) last-reply — ONE small line UNDER "Started by", in the same
     12px muted font as the reply/view counts.
     Lay it out with flex + nowrap so the visible pieces (name, time)
     sit on a SINGLE row no matter how IPS tags/nests them — and,
     crucially, WITHOUT us setting display on the children. That matters:
     IPS ships both a full ("10 minutes ago") and an abbreviated
     ("10 min") relative time and hides the short one with display:none;
     if we blanket-set display we resurrect it and the time prints twice.
     Flex lays out only the still-visible children, so we get one line
     AND one timestamp. Same trick on the inner text wrapper in case the
     name/time are nested inside it. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last{
    grid-area:last !important; margin:0 !important; min-width:0 !important;
    display:flex !important; flex-flow:row nowrap !important; align-items:baseline !important;
    gap:0 5px !important; white-space:nowrap !important; overflow:hidden !important;
    font-size:12px !important; color:var(--ex-muted) !important; font-weight:400 !important;
    line-height:1.3 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last-text{
    display:inline-flex !important; flex-flow:row nowrap !important; align-items:baseline !important;
    gap:0 5px !important; white-space:nowrap !important; min-width:0 !important;
    font-size:12px !important; color:var(--ex-muted) !important; line-height:1.3 !important;
  }
  /* hide the avatar (display:none survives the flex layout) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last a.ipsUserPhoto,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last .ipsUserPhoto,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last img{
    display:none !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last a{
    color:var(--ex-purple) !important; font-weight:400 !important; font-size:12px !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last time{
    font-size:12px !important; color:var(--ex-muted) !important;
  }
  /* "Last reply by" prefix */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__last-text::before{
    content:"Last reply by" !important;
    text-transform:none !important; letter-spacing:normal !important; font-size:12px !important; font-weight:400 !important;
    color:var(--ex-muted) !important; opacity:.55 !important; margin:0 !important;
  }

  /* (b) narrow the admin checkbox column so the title gets the room */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsData__mod{
    flex:0 0 auto !important; width:auto !important; min-width:0 !important;
    margin-left:8px !important; padding-left:0 !important; padding-right:0 !important;
  }
}

/* ================================================================
   Stage AG — DESKTOP (≥980px): sleeker top section.
   1) "Start new topic" sits INLINE on the pager row (button hard-left,
      the page-numbers scooted to its right) instead of floating alone.
   2) The forum title + description get a stylized glass/gradient panel.
   ================================================================ */
@media (min-width:980px){
  /* (1) button inline with the pager row -------------------------- */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [data-controller="forums.front.forum.forumPage"]{
    position:relative !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [data-controller="forums.front.forum.forumPage"] > .ipsButtons--main{
    position:absolute !important; top:0 !important; left:0 !important;
    margin:0 !important; width:200px !important; height:50px !important;
    display:flex !important; align-items:center !important; z-index:3 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [data-controller="forums.front.forum.forumPage"] > .ipsButtons--main > li{
    width:100% !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) [data-controller="forums.front.forum.forumPage"] > .ipsButtons--main .ipsButton--primary{
    width:100% !important; height:46px !important; padding:0 18px !important; white-space:nowrap !important;
  }
  /* the top pager bar rises into the button's vacated space: clear its
     left for the button and vertically centre the numbers alongside it. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsBox--forumsTable{ margin-top:0 !important; }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsButtonBar--top{
    padding-left:216px !important; min-height:50px !important;
    display:flex !important; align-items:center !important;
  }

  /* (2) forum title + description: plain + left-aligned (no panel), with
     tightened spacing above and below so the top section moves up. */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list{
    margin:0 0 12px !important; padding:0 !important; margin-inline:0 !important;
    background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list::after{ content:none !important; }
  /* align the title + desc to the SAME left edge as the button (zero the
     header's inner left inset — the button anchors to the column edge). */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list .ipsPageHeader__row,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list .ipsPageHeader__primary,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list .ipsPageHeader__title,
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list .ipsPageHeader__desc{
    padding-left:0 !important; margin-left:0 !important;
  }
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsPageHeader--topic-list .ipsPageHeader__desc{
    margin-top:4px !important; color:var(--ex-muted) !important;
  }
  /* pull the whole top block up a little (less dead space under the site header) */
  body[data-pageapp="forums"]:not([data-pagecontroller="topic"]) .ipsLayout__main .ipsWidth--main-content{
    padding-top:6px !important;
  }
}

/* ================================================================
   Stage WW — PWA launch splash + "Add to Home Screen" banner
   (behaviour injected by custom.js #12 and #13)
   ================================================================ */
/* (1) Branded launch splash. Shown ONLY when Exhale is opened as an
   installed web app (standalone) on a cold start, so the user sees the
   logo + a loading spinner instead of a black screen while IPS loads.
   Fades out the moment the page finishes loading. */
#exhale-splash{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:#0b0a10; opacity:1; transition:opacity .45s ease;
}
#exhale-splash.exhale-splash--hide{ opacity:0; pointer-events:none; }
.exhale-splash__logo{
  width:min(56vw,240px); height:78px;
  background:var(--set__logo-dark) center/contain no-repeat;
  animation:exhaleSplashPulse 1.6s ease-in-out infinite;
}
.exhale-splash__spin{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.14); border-top-color:#7b74f2;
  animation:exhaleSplashSpin .8s linear infinite;
}
@keyframes exhaleSplashPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@keyframes exhaleSplashSpin{ to{ transform:rotate(360deg); } }

/* (2) "View in the app" — reskin IPS 5's OWN native PWA install promo
   (<i-pwa-install id="ipsPwaInstall"> + #iPwaInstall__learnPopover) to the
   theme, instead of injecting our own. IPS keeps ownership of WHEN it
   shows and the real install flow, so there's exactly one banner. We only
   restyle it — deliberately NOT touching display/visibility, so IPS's
   show/hide logic (installed, dismissed, unsupported browser) still runs. */
i-pwa-install#ipsPwaInstall{
  /* branding blurple gradient (purple → periwinkle → blue) instead of the
     default card fill */
  background:linear-gradient(120deg,#6d4be6 0%,#7b74f2 52%,#4f9dff 100%) !important;
  border:0 !important; border-bottom:1px solid rgba(0,0,0,.14) !important;
  color:#fff !important;
  align-items:center !important;   /* vertically center the icon + text + dismiss */
  gap:11px !important; padding:8px 12px !important;
  font-family:'Inter Tight',system-ui,sans-serif !important;
}
#ipsPwaInstall .iPwaInstall__icon{
  width:40px !important; height:40px !important; flex:0 0 40px !important;
  border-radius:10px !important; object-fit:cover !important;
  border:0 !important;   /* no white frame around the app icon */
}
#ipsPwaInstall .iPwaInstall__title{
  font-size:13.5px !important; font-weight:800 !important; color:#fff !important;
  line-height:1.2 !important; letter-spacing:-.01em !important;
}
#ipsPwaInstall .iPwaInstall__desc{
  font-size:11.5px !important; color:rgba(255,255,255,.85) !important; line-height:1.3 !important;
}
#ipsPwaInstall .iPwaInstall__desc strong,
#ipsPwaInstall .iPwaInstall__learnMore{
  color:#fff !important; font-weight:800 !important; text-decoration:underline !important;
}
#ipsPwaInstall .iPwaInstall__dismiss{ color:#fff !important; opacity:.9 !important; }

/* the "Learn more" install-instructions popover — small polish only
   (IPS themes its text/card automatically for light + dark). */
#iPwaInstall__learnPopover .iPwaInstallPopover__icon{ border-radius:13px !important; }

/* ================================================================
   Stage XX — Create-a-topic form: stack the right-hand "Moderator
   Options" sidebar (After posting… / Unlock time / Lock time) UNDER
   the main form instead of in a right column.
   ================================================================ */
.ipsColumns--new-topic{
  display:flex !important;
  flex-direction:column !important;
}
.ipsColumns--new-topic > .ipsColumns__primary,
.ipsColumns--new-topic > .ipsColumns__secondary{
  flex:1 1 auto !important; width:100% !important; max-width:100% !important;
  min-width:0 !important; flex-basis:auto !important;
}
/* the "lines" divider was a vertical rule between the columns — turn it
   into a horizontal separator above the now-stacked options block */
.ipsColumns--new-topic > .ipsColumns__secondary{
  border-inline-start:0 !important; border-left:0 !important;
  border-top:1px solid var(--ex-line) !important;
  margin-top:16px !important; padding-top:8px !important;
}

/* custom.js #15 hides the fields I never use on the create-topic form
   (Follow topic — default-on stays on, Publish time, Unlock time, Lock
   time), leaving just the compact "After posting…" block. Any field row it
   hides is display:none'd in JS; nothing else needed here. */

/* ================================================================
   Stage YY — GUEST mobile header nav. Guests get Sign In + Sign Up +
   hamburger crammed into the header, which pushed the hamburger — their
   ONLY navigation (Forums, etc.) — off-screen. Reclaim room so it always
   shows: drop the online count for guests on mobile (members keep it),
   and pin the hamburger so it can never be shrunk/clipped away.
   ================================================================ */
@media (max-width:979px){
  html[data-ips-guest] #exhale-online-count{ display:none !important; }
  html[data-ips-guest] .ipsHeader .ipsUserNav--guest{
    flex-wrap:nowrap !important; gap:8px !important; min-width:0 !important;
  }
  html[data-ips-guest] .ipsHeader .ipsUserNav--guest > li[data-el="more"]{
    display:inline-flex !important; flex:0 0 auto !important;
  }
  html[data-ips-guest] .ipsHeader .ipsUserNav--guest > li[data-el="sign-up"] .ipsUserNav__link--sign-up{
    padding-inline:13px !important;
  }
}
/* very narrow phones: icon-only Sign In so Sign Up + hamburger still fit */
@media (max-width:420px){
  html[data-ips-guest] .ipsHeader .ipsUserNav--guest > li[data-el="sign-in"] .ipsUserNav__text{
    display:none !important;
  }
}

/* ================================================================
   Stage AG — MEMBER PROFILE page. The header (cover photo + name) and
   the two-column body were collapsing to a min-content sliver — every
   word wrapping one letter per line. Root cause: a FLEX ANCESTOR
   (.ipsLayout__columns / .ipsLayout__primary-column) was shrinking to
   content, so forcing width:100% on the inner boxes did nothing (100%
   of a collapsed parent is still collapsed). Fix the WHOLE chain from
   the layout column down: make each a full-width block so nothing can
   shrink-wrap. Scoped to the profile page (data-pagecontroller=
   "profile"), so hovercards and every other page are untouched.
   ================================================================ */
/* GLOBAL: the main content area (.ipsLayout__main) is a flex item inside the
   flex .ipsLayout__app. When a page's content is fully shrinkable (profiles,
   the forums index category feed, etc.) it can shrink to 0 width — collapsing
   everything into a one-letter-per-line sliver. Main should ALWAYS fill its
   slot, so force a definite full width + grow on every page. Its own max-width
   cap (780px) still applies, so the theme column is unchanged. */
.ipsLayout__main,
.ipsLayout__main > .ipsWidth--main-content,
.ipsLayout__main .ipsContentWrap{
  width:100% !important; min-width:0 !important;
  flex:1 1 auto !important; align-self:stretch !important; box-sizing:border-box !important;
}
/* everything below the main column: plain full-width blocks so nothing
   shrink-wraps (100% now resolves against a non-zero parent). */
body[data-pagecontroller="profile"] .ipsLayout__columns,
body[data-pagecontroller="profile"] .ipsLayout__primary-column,
body[data-pagecontroller="profile"] .ipsProfileContainer,
body[data-pagecontroller="profile"] .ipsProfileContainer > .ipsBox--profileHeader,
body[data-pagecontroller="profile"] .ipsProfileContainer > [data-role="profileContent"]{
  display:block !important; width:100% !important; max-width:100% !important;
  min-width:0 !important; flex:none !important; box-sizing:border-box !important;
}
/* cover-photo banner is always full width, never shrink-wrapped */
body[data-pagecontroller="profile"] .ipsBox--profileHeader .ipsCoverPhoto{
  width:100% !important; max-width:100% !important;
}

/* two-column body on desktop, single column on phones — minmax(0,…)
   keeps either track from collapsing to a min-content sliver */
body[data-pagecontroller="profile"] .ipsProfile--profile{
  display:grid !important;
  grid-template-columns:minmax(0, 300px) minmax(0, 1fr) !important;
  gap:16px !important; align-items:start !important;
  width:100% !important; max-width:100% !important;
}
body[data-pagecontroller="profile"] .ipsProfile--profile > .ipsProfile__aside,
body[data-pagecontroller="profile"] .ipsProfile--profile > .ipsProfile__main{
  min-width:0 !important; max-width:100% !important; box-sizing:border-box !important;
}
@media (max-width:979px){
  body[data-pagecontroller="profile"] .ipsProfile--profile{
    grid-template-columns:minmax(0, 1fr) !important;
  }
}

/* ================================================================
   Stage AH — PAGE / BLOCK EDITOR. When the admin opens the Page
   Editor, IPS reveals the "Available Widgets" panel (#elSidebarManager
   loses [hidden]) and re-wraps every widget in its own pagebuilder
   layout, squeezing the canvas. Our forced single-column / topic-feed
   overrides then collapse the widget content to a min-content sliver.
   While editing, stand our layout down and let IPS lay the canvas out
   natively. Admin-only; regular members never see this mode.
   Gate: html:has(#elSidebarManager:not([hidden])).
   ================================================================ */
html:has(#elSidebarManager:not([hidden])) .ipsLayout__main,
html:has(#elSidebarManager:not([hidden])) .ipsWidth--main-content,
html:has(#elSidebarManager:not([hidden])) .ipsLayout__main .ipsWidth{
  max-width:100% !important; margin-inline:0 !important;
}
/* let the topic-feed widget use IPS's editor layout instead of our
   stacked single-column grid (which collapses in the narrow canvas) */
html:has(#elSidebarManager:not([hidden])) .ipsData--topic-feed-widget .ipsData__item,
html:has(#elSidebarManager:not([hidden])) .ipsData--topic-feed-widget .ipsData__content,
html:has(#elSidebarManager:not([hidden])) .ipsData--topic-feed-widget .ipsData__main,
html:has(#elSidebarManager:not([hidden])) .ipsData--topic-feed-widget .ipsData__title,
html:has(#elSidebarManager:not([hidden])) .ipsData--topic-feed-widget .ipsData__extra{
  display:block !important; width:auto !important; max-width:100% !important;
  min-width:0 !important; flex:none !important; grid-template-columns:none !important;
}