/* ============================================================
   Purple Login — Visual Refinements (v5.7.0)
   ============================================================
   ADDITIVE ONLY. Loads after pl-bundle.min.css. Every rule here
   either uses the existing design tokens (so dark mode and the
   per-section customiser keep working) or is a progressive
   enhancement that older browsers simply ignore.
   ============================================================ */

/* ---- 1. Keyboard focus — visible, on-brand, only when needed ----
   Mouse clicks no longer leave a lingering outline; keyboard users
   get a clear violet ring. Huge accessibility + perceived-quality win. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent-violet, #7C3AED);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 3px);
}
:where(a, button, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ---- 2. Motion respect ----
   The theme ships animated banners, shimmer effects and dozens of
   transitions. Users with vestibular disorders (or "reduce motion"
   enabled on their phone) now get a calm UI automatically. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 3. Card hover elevation — consistent, token-driven ----
   Feed posts, job cards, connection cards and directory cards all
   lift the same way now, using the theme's own shadow scale. */
:where(.feed-post, .post-card, .conn-card, .job-card, .dir-card, .privacy-card):hover {
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05));
  transition: box-shadow var(--transition-normal, 0.2s ease);
}

/* ---- 4. Button micro-interaction ----
   A 1px press-down on activation makes every button feel responsive.
   Purely additive; no colors or sizes touched. */
:where(button, .btn-primary, .btn-gray-small, input[type="submit"]):active {
  transform: translateY(1px);
}
:where(button, .btn-primary, .btn-gray-small, input[type="submit"]) {
  transition: transform var(--transition-fast, 0.15s ease),
              box-shadow var(--transition-fast, 0.15s ease);
}

/* ---- 5. Text rendering polish ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---- 6. Media polish ----
   Lazy-loaded feed media fades in instead of popping; broken images
   are hidden instead of showing the browser's broken-image icon. */
img[loading="lazy"] {
  transition: opacity var(--transition-normal, 0.2s ease);
}

/* ---- 7. Skeleton loading utility ----
   Ready-to-use shimmer class for AJAX regions (feed load-more,
   mailbox, notifications). Apply .pl-skeleton to a placeholder div. */
.pl-skeleton {
  position: relative;
  overflow: hidden;
  background: #eef0f3; /* literal — must stay visible on the all-white palette */
  border-radius: var(--radius-sm, 3px);
  min-height: 14px;
}
.pl-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, 0.35), transparent);
  animation: pl-skeleton-shimmer 1.4s infinite;
}
@keyframes pl-skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* ---- 8. OPTIONAL: modern radius scale (disabled by default) ----
   The whole UI currently uses a uniform 3px radius. Uncomment this
   block for a softer, more contemporary look — every card, input and
   button updates automatically because they all read these tokens.
   Left off by default to preserve the current visual identity.

:root {
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-3xl: 14px;
}
*/


/* ---- 9. [v5.7.5] Transparent icon controls — platform-wide ----
   Per design direction: icon tabs, icon toggles and icon-only buttons
   carry NO background fill anywhere; icons render in the primary text
   color (black in light mode, light in dark mode). Labeled action
   buttons (Save, Apply, Read more, etc.) are intentionally NOT touched.
   Active tabs stay identifiable via the purple underline/icon. */
.nd-tab, .nd-tab.active, .nd-tab:hover,
.post-menu-btn, .post-menu-btn:hover,
.post-dropdown, .dropdown-item, .dropdown-item:hover,
.nd-panel-header button, .nd-panel-header button:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.nd-tab, .post-menu-btn, .dropdown-item {
  color: var(--c-text-primary, #000) !important;
  -webkit-text-fill-color: var(--c-text-primary, #000) !important;
}
.nd-tab.active {
  color: var(--c-accent-purple, #5B2C8A) !important;
  -webkit-text-fill-color: var(--c-accent-purple, #5B2C8A) !important;
}
.nd-tab:hover, .post-menu-btn:hover, .dropdown-item:hover,
.nd-panel-header button:hover {
  opacity: .65;
}


/* ---- 10. [v5.7.7] White compact header & footer ----
   Per design direction: no gradient/background on the fixed header and
   footer — clean white bars with a hairline border, dark text, compact
   buttons. Selectors use html body prefix so these rules outrank the
   per-site Custom Overrides CSS (which also uses !important) through
   higher specificity, regardless of print order. Dark theme gets a
   matching dark bar. */
html body .site-header,
html body .site-footer {
  background: #ffffff !important;
  box-shadow: none !important;
  color: var(--c-text-primary, #1a1a1a) !important;
}
html body .site-header { border-bottom: 1px solid var(--c-border, #e5e7eb) !important; }
html body .site-footer { border-top: 1px solid var(--c-border, #e5e7eb) !important; }
html body .site-header a,
html body .site-header .logo-text,
html body .site-header .hamburger-btn,
html body .footer-text,
html body .footer-text a {
  color: var(--c-text-primary, #1a1a1a) !important;
  -webkit-text-fill-color: var(--c-text-primary, #1a1a1a) !important;
}

/* Compact, quiet header buttons (Dashboard / Jobs / Logout / theme toggle) */
html body .header-button {
  background: transparent !important;
  color: var(--c-text-primary, #1a1a1a) !important;
  -webkit-text-fill-color: var(--c-text-primary, #1a1a1a) !important;
  border: 1px solid var(--c-border-dark, #d1d5db) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}
html body .header-button:hover {
  background: transparent !important;
  border-color: var(--c-text-primary, #1a1a1a) !important;
  transform: none !important;
}

/* Compact tabs platform-wide: same look, ~25% tighter */
html body .conn-tab, html body .jobs-tab, html body .reg-tab,
html body .pj-tab, html body .eng-tab, html body .cpv-tab {
  padding: 6px 13px !important;
  font-size: 12px !important;
}
html body .up-tog-label { padding: 3px 10px !important; font-size: 11px !important; }
html body .nd-tab { padding: 3px 2px !important; }




/* ============================================================
   ---- 11. [v5.7.8] SIGNATURE LOOK — "Live Wire" ----
   ============================================================
   Design thesis: Purple Login's identity is electric — deep purple,
   the technical Share Tech face, warm cream canvas, living scene
   banners. This section amplifies that instead of borrowing the
   blue/grey professional-network template.

   ONE bold element: a slowly drifting purple→magenta energy line
   under the header (static twin above the footer). Everything else
   is quiet support: purple-tinted card elevation, gradient logo,
   soft avatar rings, tinted scrollbars. Reduced-motion users get a
   static line automatically (section 2 kills the animation).     */

/* Signature: the energy line */
html body .site-header { border-bottom: none !important; position: fixed; }
html body .site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    #6a1b9a, #7C3AED 30%, #c2185b 50%, #7C3AED 70%, #6a1b9a);
  background-size: 200% 100%;
  animation: pl-livewire 9s linear infinite;
}
html body .site-footer { border-top: none !important; position: fixed; }
html body .site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, #6a1b9a, #7C3AED 45%, #c2185b);
  opacity: .55;
}
@keyframes pl-livewire {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* Gradient wordmark (overrides section 10's flat dark fill) */
html body .site-header .site-logo .logo-text {
  background: linear-gradient(120deg, #6a1b9a, #7C3AED 55%, #c2185b) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: .4px;
}

/* [v5.8.1] Rectangular geometry — crisp 2–4px corners across the UI */
:root {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --radius-2xl: 4px;
  --radius-3xl: 4px;
  --post-card-radius: 4px;
  --scrollbar-thumb: rgba(124, 58, 237, 0.35);
  --scrollbar-track: rgba(124, 58, 237, 0.08);
}

/* Cards: purple-tinted elevation, gentle lift (replaces section 3's grey hover) */
:where(.feed-post, .post-card, .conn-card, .job-card, .dir-card, .privacy-card,
       .cpv-news-card, .padmin-stat-card) {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(106, 27, 154, 0.07), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow var(--transition-normal, 0.2s ease),
              transform var(--transition-normal, 0.2s ease);
}
:where(.feed-post, .post-card, .conn-card, .job-card, .dir-card, .privacy-card,
       .cpv-news-card, .padmin-stat-card):hover {
  box-shadow: 0 8px 20px rgba(106, 27, 154, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}

/* Primary actions: soft glow on hover — energy, not noise */
:where(.btn-primary, .form-save, .post-btn, .submit-post-btn,
       button[name^="save_"]):hover {
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
}

/* Avatars: faint violet ring — people are the product */
:where(.post-avatar, .comment-avatar, .sidebar-avatar, .comment-form-avatar) {
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.16);
}

/* Scrollbars pick up the tint everywhere webkit vars aren't used */
/* [v5.9.4] Invisible scrollbars — scrolling still works everywhere.
   overflow stays auto on every scroll container, so wheel, trackpad,
   touch and keyboard scrolling are untouched; only the visible
   scroller chrome is removed. */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track { display: none !important; background: transparent !important; }

/* Dark theme: rings/shadows brighten slightly so they read on dark */
html body[data-theme="dark"] :where(.post-avatar, .comment-avatar,
    .sidebar-avatar, .comment-form-avatar) {
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.28);
}


/* ============================================================
   ---- 12. [v5.7.9] TYPE SYSTEM + SPATIAL RHYTHM ----
   ============================================================
   Typography becomes a deliberate pairing instead of one face for
   everything: the user's chosen Global Font (via --font-main, e.g.
   Nunito Sans) stays as the READING face; Share Tech — always loaded
   by the font-loader — returns as the technical DISPLAY accent for
   headings, sidebar section labels and statistics. Secondary text
   gains real hierarchy (previously every grey token was near-black),
   and the spacing tokens tighten for a denser, calmer rhythm.      */

:root {
  --font-display: 'Share Tech', var(--font-main, sans-serif);

  /* Text hierarchy: primary stays black; supporting text steps back */
  --c-text-muted:  #5b6472;
  --c-text-light:  #78808f;
  --c-text-faded:  #8b93a2;
  --c-text-dim:    #4b5563;

  /* Tighter spatial rhythm (density classes still layer on top) */
  --post-card-padding: 14px;
  --post-card-margin-bottom: 10px;
  --col2-padding-top: 16px;
  --col2-padding-bottom: 16px;
  --col2-padding-left: 12px;
  --col2-padding-right: 12px;
  --form-input-padding: 7px 11px;
}

/* Display face on identity moments — technical accent, used with restraint */
html body .profile-form h2,
html body .sw-head,
html body .nd-panel-header span,
html body .nav-section > .nav-item > a {
  font-family: var(--font-display) !important;
  letter-spacing: .05em;
}
html body .nav-section > .nav-item > a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--c-text-dim, #4b5563);
}

/* Headings: tighter leading, slight negative tracking on large sizes */
h1, h2, h3 { line-height: 1.25; }
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.01em; }

/* Numbers line up: tabular figures wherever counts and stats render */
.sw-val, .sw-row, .nd-badge, .eng-badge, .cpv-tab-badge,
.pv-stat, .padmin-stat-card, .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.sw-val { font-family: var(--font-display); font-size: 13px; }

/* Reading comfort: relaxed body copy where people actually read */
.post-content, .comment-text, .cpv-news-content, .job-desc, .cv-entry {
  line-height: 1.6;
  letter-spacing: .002em;
}

/* Supporting text steps back visually */
.post-time, .comment-time, .cpv-news-date, .sidebar-email, .sw-lbl {
  color: var(--c-text-faded, #8b93a2) !important;
  font-size: 11px;
}

/* Forms breathe evenly */
.profile-form label { letter-spacing: .01em; }
input::placeholder, textarea::placeholder { color: #a3aab8; opacity: 1; }

/* Dark theme: hierarchy tokens already correct in themes.css (its
   body[data-theme] selector outranks this :root block), so only the
   faded meta-text needs a dark-safe value */
html body[data-theme="dark"] .post-time,
html body[data-theme="dark"] .comment-time,
html body[data-theme="dark"] .sidebar-email,
html body[data-theme="dark"] .sw-lbl {
  color: #8b93a2 !important;
}


/* ---- 13. [v5.9.0] Plain background ----
   The warm cream canvas is replaced with a plain white background.
   Cards keep their borders and violet elevation for separation. Dark
   theme is untouched (its body[data-theme] token block outranks
   :root). Admin can still tune page/columns colors from the now
   admin-only Site Settings. */
:root {
  /* canvas */
  --c-bg-body: #ffffff;
  --c-bg-page: #ffffff;
  --c-bg-cream: #ffffff;
  /* [v5.9.6] every container surface defaults to white — separation
     comes from hairline borders and the violet elevation, not tints.
     Dark mode and the alternate themes (midnight/arctic/rigid/ember)
     override all of these with their own body[data-theme] token
     blocks, so this applies to the default light theme only. */
  --c-bg-panel: #ffffff;
  --c-bg-white: #ffffff;
  --c-bg-light: #ffffff;
  --c-bg-muted: #ffffff;
  --c-bg-off-white: #ffffff;
  --c-bg-subtle: #ffffff;
  --c-bg-dim: #ffffff;
  --c-bg-input-alt: #ffffff;
  --c-bg-lavender: #ffffff;
  --c-bg-purple-tint: #ffffff;
  --post-card-bg: #ffffff;
  --post-media-bg: #ffffff;
  --cv-bg: #ffffff;
}


/* ============================================================
   ---- 14. [v5.9.1] FLOATING PANELS on a pure white canvas ----
   ============================================================
   The four columns become distinct panels that float on the white
   page: air around and between them, hairline borders, crisp 4px
   corners, and the violet elevation from the Live Wire pass. Each
   column keeps its own internal scrollbar, so panels stay fixed
   while content scrolls inside them.

   Admin control preserved: these are token/default-level styles —
   the admin's Site Settings column-color overrides (emitted with
   higher-specificity !important rules) still repaint any panel.  */

:root {
  --column-gap: 6px;          /* ~1.6mm air BETWEEN the panels     */
  --col1-bg: #ffffff;
  --col2-bg: #ffffff;
  --col3-bg: #ffffff;
  --col4-bg: #ffffff;
}

/* Air AROUND the grid so panels float free of banner and footer */
html body .dashboard-grid {
  padding: 6px; /* ~1.6mm frame around the grid */
}

/* The panels themselves */
html body .left-sidebar,
html body .center-content,
html body .users-panel,
html body .right-sidebar {
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(106, 27, 154, 0.06),
              0 6px 18px rgba(106, 27, 154, 0.05);
}

/* Top banner floats to match: inset with rounded corners */
html body .info-banner {
  margin: 6px 6px 0;
  border-radius: 4px;
  overflow: hidden;
}

/* Mobile (single column): keep a slim gutter so panels still float */
@media (max-width: 992px) {
  html body .dashboard-grid { padding: 5px; }
  html body .info-banner { margin: 5px 5px 0; }
}


/* ============================================================
   ---- 15. [v5.9.9] WHITE IS LAW (default theme) ----
   ============================================================
   All backgrounds are forced pure white on the default light theme —
   including over any previously-saved Site Settings color swatches.
   The TOP BANNER is the single exception: it keeps its gradient or
   animated scene as the only decorated element on the page.
   The :not([data-theme]) guard means dark mode and the alternate
   themes (midnight / arctic / rigid / ember) are untouched.      */
/* [v5.11.1] The canvas BEHIND the panels is the one admin-tunable
   color (Site Settings -> Background -> Canvas, saved as --c-bg-body).
   The panels themselves stay locked white. */
html body:not([data-theme]) .dashboard-wrapper,
html body:not([data-theme]) .dashboard-center {
  background: var(--c-bg-body, #ffffff) !important;
}
html body:not([data-theme]) .left-sidebar,
html body:not([data-theme]) .center-content,
html body:not([data-theme]) .users-panel,
html body:not([data-theme]) .right-sidebar,
html body:not([data-theme]) .feed-post,
html body:not([data-theme]) .post-card {
  background: #ffffff !important;
}
/* the one exception — the top banner keeps its color/scene */
html body:not([data-theme]) .info-banner {
  background: var(--top-banner-bg) !important;
}


/* ============================================================
   ---- 16. [v5.10.1] COMPACT FEED COMPOSER ----
   ============================================================
   The Post/Poll switcher is enforced as slim underline tabs (an old
   grey button override was re-painting them as filled blocks), and
   the whole composer tightens: smaller heading, slimmer tabs, shorter
   textarea, reduced vertical rhythm. */

/* Section heading: smaller, tighter */
html body .dir-header { margin-bottom: 6px !important; }
html body .dir-header h2 {
  font-size: 15px !important;
  margin: 0 0 4px !important;
  letter-spacing: .02em;
}

/* Post / Poll: slim underline tabs — never filled buttons */
html body .composer-tab {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 13px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  line-height: 1.5 !important;
  margin-bottom: -2px !important;
}
html body .composer-tab.active {
  background: transparent !important;
  border-bottom: 2px solid var(--c-primary, #6a1b9a) !important;
  color: var(--c-primary, #6a1b9a) !important;
  -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important;
}
html body .composer-tab:hover:not(.active) {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  background: transparent !important;
}

/* Composer body: shorter, tighter */
html body .post-textarea {
  min-height: 48px !important;
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
}


/* ---- 16b. [v5.10.2] Composer trigger hover affordance ---- */
html body #pl-composer-trigger:hover {
  border-color: var(--c-accent-violet, #7C3AED) !important;
  box-shadow: 0 1px 6px rgba(124, 58, 237, 0.10);
}
html body #pl-composer-trigger button:hover { opacity: .7; }


/* ---- 16c. [v5.10.3] Media attach preview: image tiles must render ----
   The theme sized .preview-item video but never .preview-item img (an
   original oversight, present since v5.6.6) — attached images produced
   an empty tile with only the remove button. Enforced here as well as
   fixed at the source in style.css. */
html body .preview-item img,
html body .preview-item video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: 1 !important;
}


/* ============================================================
   ---- 17. [v5.10.4] HALF-SIZE POST HEADER + ENGAGEMENT BAR ----
   ============================================================
   Per direction: the author block at the top of each post and the
   like/dislike/send/comment/save bar at the bottom both shrink to
   roughly half their previous footprint. The engagement bar also
   loses its lavender gradient — white with a hairline top border,
   consistent with white-is-law. */

/* Author header: half-size avatar, tighter type, less air */
:root { --post-avatar-size: 24px; }   /* was 44px */
html body .post-avatar {
  width: 24px !important;
  height: 24px !important;
}
html body .post-header { margin-bottom: 2px !important; gap: 6px !important; }
html body .post-author-name { font-size: 11px !important; line-height: 1.3 !important; }
html body .post-author-name a { font-size: 11px !important; }
html body .post-time { font-size: 9px !important; }

/* Engagement bar: half height, white, slim icons and chips */
html body .engagement-bar {
  padding: 3px 8px !important;          /* was 7px 10px */
  margin-top: 5px !important;
  gap: 1px !important;
  background: #ffffff !important;       /* was lavender gradient */
  border-top: 1px solid var(--c-border, #e5e7eb) !important;
}
html body .engagement-btn {
  padding: 1px 3px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
html body .engagement-btn svg {
  width: 11px !important;
  height: 11px !important;
}
/* count chips: half-size, quiet until non-zero styling applies */
html body .eng-badge-count {
  min-width: 11px !important;
  height: 11px !important;
  line-height: 11px !important;
  font-size: 7px !important;
  border-radius: 3px !important;
}


/* ---- 17b. [v5.10.5] Like/Dislike +15% ----
   The two primary reaction buttons step up ~15% from the half-size
   baseline so they read as the main actions in the bar; send/comment/
   save stay at the compact size. */
html body .engagement-btn.like-btn,
html body .engagement-btn.dislike-btn {
  padding: 2px 4px !important;
  font-size: 11px !important;
}
html body .engagement-btn.like-btn svg,
html body .engagement-btn.dislike-btn svg {
  width: 13px !important;    /* 11px x 1.15 ~= 12.7 -> 13px */
  height: 13px !important;
}
html body .engagement-btn.like-btn .eng-badge-count,
html body .engagement-btn.dislike-btn .eng-badge-count {
  min-width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  font-size: 8px !important;
}


/* ---- 17c. [v5.10.6] Compact comments block ----
   The empty-comments state stacked default <p> margins on top of
   section/toolbar/list/form paddings, producing a tall dead zone
   between the engagement bar and the comment input. Everything
   tightens; Read Mode is enforced as a quiet outline chip. */
html body .comments-section {
  padding: 4px 14px 6px !important;
  margin-top: 0 !important;
}
html body .comments-toolbar { margin-bottom: 2px !important; }
html body .comments-list { margin-bottom: 2px !important; }
html body .no-comments,
html body p.no-comments,
html body .comments-loading {
  margin: 0 !important;            /* kills the default <p> margins */
  padding: 4px 0 !important;
  font-size: 12px !important;
}
html body .comment-form { padding-top: 4px !important; }

/* Read Mode: quiet outline chip, never a grey filled button */
html body .read-mode-btn {
  background: transparent !important;
  border: 1px solid var(--c-border, #d1d5db) !important;
  color: var(--c-text-dim, #4b5563) !important;
  -webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  box-shadow: none !important;
}
html body .read-mode-btn:hover { border-color: var(--c-primary, #6a1b9a) !important; color: var(--c-primary, #6a1b9a) !important; -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important; }


/* ---- 17d. [v5.10.7] Empty comments: no message, no dead rows ----
   With zero comments the section starts directly at the comment
   input: the empty list collapses entirely and the Read Mode chip
   (which only makes sense with comments to read) stays hidden until
   there is at least one comment. */
html body .comments-list:empty { display: none !important; margin: 0 !important; }
html body .comments-section:has(.comments-list:empty) .comments-toolbar { display: none !important; }
html body .comment-form { border-top: none !important; }


/* ---- 17e. [v5.10.9] Comment "+" menu: like / dislike / reply ONLY ----
   The expanded menu previously also showed edit (pencil) and delete
   (trash) on the viewer's own comments — easily mistaken for forward/
   save at 13px. Per direction the + now reveals exactly the three
   engagement actions, matching the post bar. (Edit/delete for own
   comments are hidden with the menu; restore by deleting this block.) */
/* [v5.11.0] edit/delete restored for the comment's own author —
   the loader only renders them on the viewer's own comments
   (delete additionally for the post author and admins). */
html body .comment-actions-inner .comment-edit-btn,
html body .comment-actions-inner .comment-delete-btn {
  display: inline-flex !important;
}
/* the three that remain: match the post-bar visual language */
html body .comment-action-btn {
  background: transparent !important;
  border: none !important;
  padding: 1px 4px !important;
}
html body .comment-action-btn svg {
  width: 12px !important;
  height: 12px !important;
}
html body .comment-eng-count { font-size: 8px !important; }


/* ---- 17f. [v5.10.10] Comment actions match the post bar exactly ----
   Like / dislike / reply in the comment "+" menu now render in the
   same visual language as the post engagement bar: purple count chip
   first, then the icon — same chip geometry, same colors. */
html body .comment-action-btn {
  display: inline-flex !important;
  flex-direction: row-reverse !important;  /* count chip renders before the icon, like the post bar */
  align-items: center !important;
  gap: 2px !important;
}
html body .comment-eng-count {
  display: inline-block !important;
  min-width: 13px !important;
  height: 13px !important;
  line-height: 13px !important;
  padding: 0 2px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: var(--c-primary, #6a1b9a) !important;
  border-radius: 3px !important;
}
html body .comment-action-btn svg {
  width: 13px !important;
  height: 13px !important;
}


/* ---- 17g. [v5.10.12] Comment actions: inline beside the text + always visible ----
   1) The actions bar now sits ON THE SAME LINE as the comment text
      (text becomes inline; the bar becomes inline-flex right after it).
   2) The icons were rendering white-on-white until hover on some
      setups (inherited currentColor). The stroke is now forced
      directly on the SVGs, which overrides any inherited color —
      dark by default, brand purple when the reaction is active. */
html body .comment-text {
  display: inline !important;
}
html body .comment-actions-bar {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
}

/* toggle (+ / -): quiet outline chip, never grey filled */
html body .comment-actions-toggle {
  background: transparent !important;
  border: 1px solid var(--c-border, #d1d5db) !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

/* buttons + icons: always visible, dark strokes, purple when active */
html body .comment-action-btn,
html body .comment-actions-inner {
  opacity: 1 !important;
  visibility: visible !important;
}
html body .comment-action-btn {
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
html body .comment-action-btn svg {
  stroke: #1a1a1a !important;   /* overrides inherited currentColor entirely */
  opacity: 1 !important;
}
html body .comment-action-btn.active svg,
html body .comment-action-btn:hover svg {
  stroke: var(--c-primary, #6a1b9a) !important;
}


/* ============================================================
   ---- 18. [v5.10.13] FINAL DE-GREY SWEEP ----
   ============================================================
   The last grey-filled utility buttons align with the platform
   language: primary submits go brand purple; secondary utilities
   become quiet outline chips. */

/* Comment "Send": a submit CTA — brand purple like Post */
html body .comment-submit-btn {
  background: var(--c-primary, #6a1b9a) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
}
html body .comment-submit-btn:hover { background: var(--c-primary-dark, #4a148c) !important; }

/* Attach / Schedule: quiet outline chips */
html body .add-media-btn {
  background: transparent !important;
  border: 1px solid var(--c-border, #d1d5db) !important;
  color: var(--c-text-dim, #4b5563) !important;
  -webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
html body .add-media-btn:hover {
  border-color: var(--c-primary, #6a1b9a) !important;
  color: var(--c-primary, #6a1b9a) !important;
  -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important;
}
html body .add-media-btn svg { stroke: currentColor !important; }

/* Site Settings: Save Settings purple; preset slots outline */
html body .cz-btn {
  background: var(--c-primary, #6a1b9a) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
}
html body .cz-btn:hover { background: var(--c-primary-dark, #4a148c) !important; }
html body .cz-preset-btn {
  background: transparent !important;
  border: 1px solid var(--c-border, #d1d5db) !important;
  color: var(--c-text-dim, #4b5563) !important;
  -webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
  box-shadow: none !important;
}
html body .cz-preset-btn:hover { border-color: var(--c-primary, #6a1b9a) !important; color: var(--c-primary, #6a1b9a) !important; -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important; }


/* ---- 19. [v5.11.0] Threaded comments ----
   Replies indent under their parent with a soft guide line; the
   indent caps at depth 5 (the reply handler promotes level-6 replies
   to new top-level comments). New comments stack vertically. */
/* [v5.11.3] Per-level indent tuned to ~5mm (19px). The children block
   sits inside the content column, which is already offset by the
   avatar (24px) + 6px flex gap — the negative margin counteracts that
   structural offset so the NET step per level is ~19-20px. */
html body .comment-children {
  margin-left: -16px;
  padding-left: 6px;
  border-left: 2px solid var(--c-border, #e9e5f2);
  margin-top: 3px;
}
html body .comment-item { margin-bottom: 6px; }
html body .comment-item .comment-avatar { width: 20px !important; height: 20px !important; }
html body .comment-item.c-depth-0 > img.comment-avatar { width: 24px !important; height: 24px !important; }


/* ============================================================
   ---- 20. [v5.11.6] UNIFIED ALIGNMENT ----
   ============================================================
   Banner, columns grid, header content and footer content all share
   the same left/right edges. The banner and the header/footer gutters
   derive from the SAME container variables the grid uses, so
   alignment holds at every density (70% ... full-width). */

/* [v5.11.7 rewrite] The container width is responsive
   (70% -> 80% -> 90% -> 95% -> 100% across breakpoints in style.css),
   so nothing may hard-code it.

   BANNER: it lives INSIDE .dashboard-center, which already carries
   the responsive width — so it simply fills its parent, inset 6px to
   match the panels' grid padding. Aligned at every breakpoint by
   construction, directly below the header. */
html body .info-banner {
  width: calc(100% - 12px) !important;
  margin: 6px auto 0 !important;
  box-sizing: border-box !important;
}

/* HEADER + FOOTER: mirror the exact same breakpoints style.css uses
   for .dashboard-center, so the wordmark and the Dashboard/Jobs/
   Logout buttons align with the container edges at every size.
   Gutter = (100% - container)/2 + the 6px panel inset. */
html body .site-header, html body .site-footer {
  box-sizing: border-box !important;
  padding-left: calc((100% - min(70%, 1400px)) / 2 + 6px) !important;
  padding-right: calc((100% - min(70%, 1400px)) / 2 + 6px) !important;
}
@media (max-width: 1600px) {
  html body .site-header, html body .site-footer {
    padding-left: calc(10% + 6px) !important;
    padding-right: calc(10% + 6px) !important;
  }
}
@media (max-width: 1400px) {
  html body .site-header, html body .site-footer {
    padding-left: calc(5% + 6px) !important;
    padding-right: calc(5% + 6px) !important;
  }
}
@media (max-width: 1200px) {
  html body .site-header, html body .site-footer {
    padding-left: calc(2.5% + 6px) !important;
    padding-right: calc(2.5% + 6px) !important;
  }
}
@media (max-width: 992px) {
  html body .site-header, html body .site-footer { padding-left: 10px !important; padding-right: 10px !important; }
  html body .info-banner { width: calc(100% - 16px) !important; margin: 8px auto 0 !important; }
}


/* ---- 21. [v5.11.8] Thread collapse toggle + Read Mode purge ----
   Read Mode is removed platform-wide; its toolbar row (the tall gap
   between the engagement bar and the first comment) goes with it.
   Parents with replies get a V toggle to expand/contract the thread. */
html body .comments-toolbar { display: none !important; }
html body .comments-section { padding-top: 2px !important; }

html body .thread-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent !important;
  border: none !important;
  padding: 1px 2px !important;
  margin: 1px 0 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--c-primary, #6a1b9a) !important;
  -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important;
  cursor: pointer;
  box-shadow: none !important;
}
html body .thread-toggle .tt-chev { font-size: 9px; line-height: 1; }
html body .thread-toggle:hover { opacity: .7; }


/* ---- 22. [v5.11.9] Post analytics mini-row removed ---- */
html body .nf-analytics-mini { display: none !important; }


/* ---- 23. [v5.11.10] Comment rhythm: max 2-3mm gaps everywhere ----
   Vertical and horizontal spacing throughout the comment area capped
   at ~8-10px (2-3mm). */
html body .comment-item {
  padding: 2px 0 !important;
  margin-bottom: 2px !important;
  gap: 5px !important;                 /* avatar <-> content (horizontal) */
  border-bottom: none !important;      /* the divider added to the gap */
}
html body .comments-list { margin-bottom: 2px !important; }
html body .comment-header { margin: 0 !important; line-height: 1.3 !important; }
html body .comment-content { row-gap: 1px !important; }
html body .comment-text { line-height: 1.35 !important; }
html body .comment-actions-bar { margin-left: 5px !important; }
html body .thread-toggle { margin: 0 !important; }
html body .comment-children { margin-top: 2px !important; padding-left: 6px !important; }
html body .reply-form-wrapper { margin: 2px 0 !important; }
html body .comment-form { padding-top: 3px !important; gap: 5px !important; }


/* ---- 24. [v5.11.11] Comment alignment: avatar locked to the name line ----
   The avatar and the author-name line now sit on the SAME axis: the
   avatar top-aligns with the header row and the header centers its
   text against the avatar height. Name -> comment-text gap <= 2mm;
   thread -> thread <= 2-3mm (re-enforced with explicit zero margins,
   since UA <strong>/<div> defaults contributed stray offsets). */
html body .comment-item { align-items: flex-start !important; }
html body .comment-item .comment-avatar {
  margin: 0 !important;
  align-self: flex-start !important;
}
html body .comment-header {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 20px !important;         /* matches nested avatar height */
  margin: 0 !important;
  padding: 0 !important;
}
html body .comment-item.c-depth-0 > .comment-content > .comment-header { min-height: 24px !important; }
html body .comment-author { margin: 0 !important; line-height: 1.2 !important; }
html body .comment-time { line-height: 1.2 !important; }

/* name -> text: <= 2mm (7px ceiling; set 2px) */
html body .comment-content { display: flex !important; flex-direction: column !important; row-gap: 0 !important; }
html body .comment-text { margin: 2px 0 0 !important; padding: 0 !important; }
html body .comment-actions-bar { margin-top: 0 !important; }

/* thread -> thread: <= 2-3mm */
html body .comment-children { margin-top: 2px !important; }
html body .comment-children .comment-item { margin-bottom: 2px !important; padding: 1px 0 !important; }


/* ---- 25. [v5.11.12] Thread tails level + "+" back inline ----
   FIX A: v5.11.11 made .comment-content a flex COLUMN, which stacked
   the actions bar under the text — regression. Content returns to
   block flow: the text is inline and the + bar flows right beside it
   on the same line (the v5.10.12 behavior), with the <=2mm name->text
   gap now carried by the header's bottom margin (inline elements
   ignore vertical margins).
   FIX B: the vertical thread guide lines ended at uneven depths
   because each nesting container kept trailing padding/margins from
   its last child. All trailing slack is flattened, so every guide
   line ends level with the bottom of the thread's last comment. */

/* A: text + actions on one line again */
html body .comment-content { display: block !important; }
html body .comment-header { margin-bottom: 2px !important; }
html body .comment-text { display: inline !important; margin: 0 !important; }
html body .comment-actions-bar {
  display: inline-flex !important;
  vertical-align: middle !important;
  margin: 0 0 0 6px !important;
}

/* B: guide lines end together at the thread's last item */
html body .comment-children { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html body .comment-children > .comment-item:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
html body .comment-item:last-child > .comment-content > .comment-children { margin-bottom: 0 !important; }


/* ---- 26. [v5.11.13] Flash messages as centered auto-fading toasts ----
   "Post created/updated/deleted" no longer render as a full-width
   block pushing the feed down. They float as a compact toast centered
   over the content column, hold ~1s, fade, and stop intercepting
   clicks — zero layout space consumed. */
html body .success-message {
  position: fixed !important;
  top: 64px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9500 !important;
  width: auto !important;
  max-width: 320px !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: pl-toast 1.4s ease forwards;
  pointer-events: none;
}
@keyframes pl-toast {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}


/* ---- 27. [v5.11.14] 3-line text clamp + full-screen image viewer ----
   Post text shows 3 lines with a fade; clicking the text expands and
   collapses it. Clicking a post image opens the viewer: image on the
   left, post info on the right, live comments below the info. */

/* clamp (overrides the old 200px max-height system) */
html body .post-card .post-content-full:not(.pl-expanded) {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-height: none !important;
  cursor: pointer;
}
html body .post-card .post-content-full.pl-expanded {
  display: block !important;
  max-height: none !important;
  cursor: pointer;
}

/* viewer */
html body #pl-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex;
  background: rgba(10, 8, 16, 0.92);
}
html body #pl-lightbox .plb-media {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 18px; cursor: zoom-out;
}
html body #pl-lightbox .plb-media img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 4px; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
html body #pl-lightbox .plb-side {
  flex: 0 0 360px; max-width: 90vw; background: #ffffff;
  display: flex; flex-direction: column; overflow-y: auto; padding: 12px;
}
html body #pl-lightbox .plb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
html body #pl-lightbox .plb-avatar { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
html body #pl-lightbox .plb-name { font-weight: 700; font-size: 13px; }
html body #pl-lightbox .plb-time { font-size: 10px; color: #4b5563; }
html body #pl-lightbox .plb-text { font-size: 13px; line-height: 1.45; margin-bottom: 8px; border-bottom: 1px solid var(--c-border, #e5e7eb); padding-bottom: 8px; }
html body #pl-lightbox .plb-comments .comments-section { padding: 0 !important; margin: 0 !important; border-top: none !important; }
html body #pl-lightbox #plb-close {
  position: absolute; top: 10px; right: 374px; z-index: 2;
  width: 30px; height: 30px; border-radius: 4px;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  font-size: 20px; line-height: 1; cursor: pointer;
}
html body #pl-lightbox #plb-close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 820px) {
  html body #pl-lightbox { flex-direction: column; }
  html body #pl-lightbox .plb-side { flex: 0 0 45%; max-width: none; }
  html body #pl-lightbox #plb-close { right: 10px; }
}


/* ---- 28. [v5.11.15] Post (...) menu opens HORIZONTALLY, to the left ----
   The edit/delete items previously dropped as a vertical column under
   the dots; the menu now flows right-to-left on the SAME row as the
   dots button: a horizontal strip appearing beside it. */
html body .post-dropdown {
  top: 50% !important;
  right: calc(100% + 4px) !important;   /* sits to the LEFT of the dots */
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}
html body .post-dropdown.active {
  display: inline-flex !important;      /* horizontal row, not a column */
  flex-direction: row-reverse !important; /* first item lands nearest the dots */
  align-items: center !important;
  gap: 2px !important;
}
html body .post-dropdown a,
html body .post-dropdown button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 5px !important;
  margin: 0 !important;
}


/* ---- 29. [v5.11.16] Engagement counts: plain black numerals ----
   The purple chip background behind like/dislike/comment counts is
   removed everywhere (post bar AND comment actions) — counts render
   as plain black numbers beside the icons. Overrides the chip styling
   from sections 17/17f. */
html body .eng-badge-count,
html body .comment-eng-count {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  padding: 0 1px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}
html body .engagement-btn.like-btn .eng-badge-count,
html body .engagement-btn.dislike-btn .eng-badge-count { font-size: 10px !important; }


/* [v5.11.17] Black numerals, final enforcement — beats the per-button
   .like-btn/.dislike-btn/.comment-btn chip rules and active states. */
html body .engagement-btn .eng-badge-count,
html body .engagement-btn.active .eng-badge-count,
html body .comment-action-btn .comment-eng-count,
html body .comment-action-btn.active .comment-eng-count {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  border-radius: 0 !important;
}


/* ---- 30. [v5.11.18] Reactions do NOT change color when active ----
   A liked/disliked state previously painted the comment buttons with
   a dark background (via the generic button.active rule, which the
   comment buttons fall into) and turned post-bar icons purple. Per
   direction, reacting leaves the appearance exactly as it was: same
   icons, same black numerals, no fill. The toggle still works — the
   count changing is the feedback. */

/* comment actions: kill the dark active background + purple strokes */
html body .comment-action-btn.active,
html body button.comment-action-btn.active {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
html body .comment-action-btn.active svg {
  stroke: #1a1a1a !important;
}
html body .comment-action-btn.active .comment-eng-count {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}

/* post bar: active like/dislike/save keep the normal dark look */
html body .engagement-btn.active,
html body .engagement-btn.like-btn.active,
html body .engagement-btn.dislike-btn.active,
html body .engagement-btn.save-btn.active {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
}
html body .engagement-btn.active svg { stroke: #1a1a1a !important; }


/* ---- 31. [v5.11.19] Notifications dashboard: slim, black & white ----
   Same treatment as the rest of the platform: white surfaces, black
   outline icons, no filled tabs, no purple header bar, plain black
   numerals for counts. */

/* tabs: transparent, black icons; active = underline, not a fill */
html body .nd-tab,
html body .nd-tab.active {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  padding: 3px 8px !important;
}
html body .nd-tab svg { stroke: #1a1a1a !important; width: 13px !important; height: 13px !important; }
html body .nd-tab.active { border-bottom-color: #1a1a1a !important; }
html body .nd-tab:hover { opacity: .65; }

/* count badge: plain black numeral, no red pill */
html body .nd-badge {
  background: transparent !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 0 1px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* panel header: white and slim instead of the purple bar */
html body .nd-panel-header,
html body .notif-dash-header {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
html body .nd-panel-header button,
html body .notif-dash-header button {
  background: transparent !important;
  border: none !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  font-size: 10px !important;
  padding: 1px 4px !important;
  cursor: pointer;
}
html body .nd-panel-header button svg,
html body .notif-dash-header button svg { stroke: #1a1a1a !important; }
html body .nd-panel-header button:hover { opacity: .65; }

/* items: tighter rhythm */
html body .notif-dash-item { padding: 4px 8px !important; }
html body .notif-dash-tabs { gap: 0 !important; border-bottom: 1px solid var(--c-border, #e5e7eb) !important; }


/* ---- 32. [v5.11.26] Post text: no boxed background ----
   The post body previously rendered inside a bordered/tinted
   rectangle; it now sits directly on the white card like the rest of
   the content. Enforced over any cached/bundle copy. */
html body .post-card .post-content-full,
html body .feed-post .post-content-full {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


/* ---- 33. [v5.11.28] Posts as mild-rounded rectangles ----
   Refined direction: each post IS its own card again — a clean
   rectangle with a MILD bend on the corners (5px), a hairline
   border, tight gaps between posts, and no heavy shadow. The
   composer block matches. */
html body .center-content .post-card,
html body .center-content .feed-post {
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 5px !important;           /* the mild bend */
  box-shadow: none !important;
  margin: 0 0 6px !important;              /* slim air between posts */
  overflow: hidden;                        /* media + bars respect the bend */
}
html body .center-content .composer-card,
html body .center-content .post-composer,
html body .center-content .create-post-section,
html body .center-content .create-post-card {
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  margin: 0 0 6px !important;
}


/* ---- 34. [v5.11.29] The center WRAPPER disappears — posts float free ----
   The big white rectangle around the whole feed was the center panel
   itself. It is now invisible (transparent, no border, no shadow):
   ONLY the composer and the posts appear, each as its own white
   mild-rounded card floating directly on the canvas. Left/right
   panels keep their floating design. Declared after sections 14/15/33
   so it wins the cascade at equal specificity. */
html body:not([data-theme]) .center-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;      /* [v5.11.30] top too — first card aligns with the side panels' tops */
}
/* the Feed heading no longer floats above the cards adding offset —
   it sits inside the flow tight to the top */
html body .center-content > .dir-header { margin-top: 0 !important; padding-top: 0 !important; }
html body .center-content > .dir-header h2 { margin-top: 0 !important; }
/* the cards ARE the floating surfaces now */
html body:not([data-theme]) .center-content .post-card,
html body:not([data-theme]) .center-content .feed-post,
html body:not([data-theme]) .center-content .create-post-card,
html body:not([data-theme]) .center-content .create-post-section,
html body:not([data-theme]) .center-content .profile-form {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(106, 27, 154, 0.06) !important;
}
/* the "Feed" heading sits quietly on the canvas */
html body .center-content > .dir-header,
html body .center-content .dir-header h2 { background: transparent !important; }


/* ---- 35. [v5.11.31] Comment inline edit form ---- */
html body .comment-edit-form { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
html body .comment-edit-form input {
  font-size: 12px; padding: 3px 8px;
  border: 1px solid var(--c-primary, #6a1b9a); border-radius: 4px;
  min-width: 220px;
}
html body .comment-edit-save {
  background: var(--c-primary, #6a1b9a) !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; border: none !important;
  padding: 3px 10px !important; font-size: 11px !important; border-radius: 4px !important;
}
html body .comment-edit-cancel {
  background: transparent !important; border: 1px solid var(--c-border, #d1d5db) !important;
  color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important;
  padding: 3px 8px !important; font-size: 11px !important; border-radius: 4px !important;
}


/* ---- 36. [v5.11.32] Ultra-compact post header, no band ----
   The author row shrinks to a slim single line with zero chrome:
   transparent (no strip/border), 2px rhythm, small metadata. Card
   padding tightens to 8px; the engagement bar's full-bleed negative
   margins re-tuned to the new padding so the bend still clips it
   cleanly. */
html body .post-card { padding: 6px 8px 4px !important; }

html body .post-header {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 3px !important;
  min-height: 0 !important;
  gap: 5px !important;
}
html body .post-header .post-avatar { width: 20px !important; height: 20px !important; }
html body .post-author-name, html body .post-author-name a { font-size: 11px !important; line-height: 1.2 !important; }
html body .post-time,
html body .post-header .post-edited,
html body .post-header .post-rev,
html body .post-modified-tag {
  font-size: 9px !important;
  line-height: 1.2 !important;
}
html body .post-actions-menu { margin: 0 !important; }
html body .post-menu-btn, html body .post-actions-menu > button { padding: 0 3px !important; }

/* engagement bar full-bleed matches the new 8px side padding */
html body .engagement-bar { margin-left: -8px !important; margin-right: -8px !important; margin-bottom: -4px !important; }


/* ---- 37. [v5.11.33] Post actions relayout ----
   EDIT lives in the engagement bar (after Save, own posts only).
   The three vertical dots float over the media's top-right corner in
   a soft white chip and hold DELETE; the card anchors the overlay. */
html body .post-card { position: relative; }
html body .post-card .post-actions-menu {
  position: absolute !important;
  top: 50px !important;              /* [v5.11.36] 5mm vertical clearance inside the attachment */
  right: 27px !important;            /* 5mm horizontal clearance from the right edge */
  z-index: 30 !important;
}
html body .post-menu-btn {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 4px !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  color: #1f2937 !important;
  -webkit-text-fill-color: #1f2937 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer;
}
/* dropdown (delete) opens leftward beside the chip, over the image */
html body .post-card .post-dropdown {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  padding: 1px !important;
}
/* edit button in the bar matches its neighbors */
html body .post-edit-btn svg { width: 12px !important; height: 12px !important; }


/* ---- 38. [v5.11.34] Post editor placement polish ----
   The editor renders below the media, in place of the text it edits.
   Save = purple, Cancel = outline chip. While the editor is open the
   floating dots chip hides (its only action is delete, and it was
   overlapping the editor border). */
html body .edit-form { margin: 4px 0 !important; }
html body .edit-textarea {
  border: 1px solid var(--c-primary, #6a1b9a) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
}
html body .edit-save-btn {
  background: var(--c-primary, #6a1b9a) !important; color: #fff !important;
  -webkit-text-fill-color: #fff !important; border: none !important;
  padding: 4px 12px !important; font-size: 12px !important; border-radius: 4px !important;
}
html body .edit-save-btn:hover { background: var(--c-primary-dark, #4a148c) !important; }
html body .edit-cancel-btn {
  background: transparent !important; border: 1px solid var(--c-border, #d1d5db) !important;
  color: #4b5563 !important; -webkit-text-fill-color: #4b5563 !important;
  padding: 4px 10px !important; font-size: 12px !important; border-radius: 4px !important;
}
/* hide the dots chip while its post's editor is open */
html body .post-card:has(.edit-form[style*="block"]) .post-actions-menu {
  display: none !important;
}


/* ---- 39. [v5.11.35] Poster avatar is a circle ---- */
html body .post-header .post-avatar,
html body .post-avatar {
  border-radius: 50% !important;
}


/* ---- 40. [v5.11.36] Engagement bar: floating pill, scrolls with you ----
   The action row is no longer a full-width background band attached
   to the card edges: it is an isolated rounded pill with its own
   border and soft shadow, inset from the card, and it is STICKY —
   while a long post scrolls, its pill stays pinned just under the
   site header so like/comment/save remain reachable. */
html body .engagement-bar {
  position: sticky !important;
  top: 42px !important;                     /* just below the fixed site header */
  z-index: 25 !important;
  margin: 6px 6px 4px !important;           /* replaces the full-bleed negative margins */
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 2px 8px rgba(106, 27, 154, 0.08) !important;
  padding: 2px 8px !important;
}

/* ---- 41. [v5.11.38] Header & footer: isolated floating elements ----
   Per direction, the rectangular header/footer bands are removed.
   The bars themselves are fully transparent (no background, border,
   shadow, or energy line) and click-through; each element they carry
   — logo, nav buttons, hamburger, copyright — becomes its own
   isolated chip in the v5.11.36 pill language: near-white surface,
   hairline border, 6px corners, soft violet shadow. */

/* The bands: invisible + click-through (chips re-enable pointer). */
html body .site-header,
html body .site-footer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
/* Kill the Live Wire lines — a floating line without a bar reads as a glitch. */
html body .site-header::after,
html body .site-footer::before { content: none !important; display: none !important; }

/* Shared chip surface */
html body .site-header .site-logo,
html body .site-header .header-button,
html body .site-header .hamburger-btn,
html body .site-footer .footer-text {
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(106, 27, 154, 0.08) !important;
}

/* Logo chip */
html body .site-header .site-logo {
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Nav button chips — override section 10's transparent background */
html body .site-header .header-button {
  padding: 2px 10px !important;
}
html body .site-header .header-button:hover {
  background: #ffffff !important;
  border-color: var(--c-accent-violet, #7C3AED) !important;
  box-shadow: 0 3px 10px rgba(106, 27, 154, 0.14) !important;
}

/* Hamburger chip (mobile) */
html body .site-header .hamburger-btn { padding: 4px 7px !important; }

/* Copyright chip: shrink-wraps and centres itself instead of
   spanning the footer (inline style width:100% is overridden). */
html body .site-footer .footer-text {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 12px !important;
  margin: 0 !important;
}

/* ---- 42. [v5.11.39] Chip legibility: solid ink on solid surfaces ----
   The transparent bands exposed style.css's old white header/footer
   ink (--hdr-text-color #fff, --footer-text-color rgba(255,255,255,
   .85)) — white-on-white where section 10 didn't reach — and the
   gradient wordmark's transparent text fill read as faint over a
   96%-opaque chip. Chips are now fully opaque with a blur backdrop,
   and every piece of text is forced to solid dark ink. */

/* Fully opaque chip surface + blur so scrolled content never ghosts
   through under the text. */
html body .site-header .site-logo,
html body .site-header .header-button,
html body .site-header .hamburger-btn,
html body .site-footer .footer-text {
  background: #ffffff !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Solid dark ink everywhere in the header/footer — beats the white
   variable defaults regardless of which rule reaches the element. */
html body .site-header,
html body .site-header a,
html body .site-header .header-button,
html body .site-header .site-logo a,
html body .site-footer,
html body .site-footer .footer-text,
html body .site-footer .footer-text a {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Wordmark: retire the gradient/transparent fill — solid brand
   purple, fully legible at chip size. */
html body .site-header .site-logo .logo-text {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c-primary, #6a1b9a) !important;
  -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

/* Readable control text: was 9-11px scaled by --hdr-scale. */
html body .site-header .header-button {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.6 !important;
}
html body .site-footer .footer-text { font-size: 11px !important; }
html body .site-footer .footer-text a {
  font-weight: 600 !important;
  color: var(--c-primary, #6a1b9a) !important;
  -webkit-text-fill-color: var(--c-primary, #6a1b9a) !important;
}

/* Hamburger bars: dark, not the header-ink white. */
html body .site-header .hamburger-btn span {
  background: #111111 !important;
}

/* ---- 43. [v5.11.41] Three-tier ink + jobs panel re-colour ----
   Ink is now exactly three colours, mapped to text size:
     #111827 — headings / titles (h1-h6, card titles)
     #1f2937 — body text
     #4b5563 — small / meta / secondary (12px and under)
   Plus: the sidebar jobs panel loses its off-brand colours — the
   charcoal-on-grey Network/Jobs toggle and the green salary chips
   join the purple chip language. */

/* Size-tier enforcement */
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6,
html body .sj-title, html body .post-author-name {
  color: #111827 !important;
}
html body small,
html body .sj-meta, html body .sj-company,
html body .post-time, html body .up-headline {
  color: #4b5563 !important;
}

/* Network/Jobs toggle: purple slider on a quiet track */
html body .up-toggle-wrap {
  background: #f3f4f6 !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
html body .up-toggle-wrap .up-tog-slider {
  background: var(--c-primary, #6a1b9a) !important;
  border-radius: 5px !important;
}
html body .up-toggle-wrap .up-tog-label {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  font-weight: 600 !important;
}
html body .up-toggle-wrap .up-tog-label.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Job tags: neutral chips for type/mode, purple chip for salary
   (was success-green on mint — off-brand in a purple system). */
html body .sj-tag {
  font-size: 10px !important;
  padding: 1px 7px !important;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 5px !important;
}
html body .sj-tag.salary {
  background: rgba(124, 58, 237, 0.08) !important;
  color: var(--c-primary, #6a1b9a) !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
  font-weight: 600 !important;
}

/* ---- 44. [v5.11.42] Engagement bar: chrome removed ----
   Per direction, the rectangular container behind the action row
   (v5.11.36's bordered white pill) is removed: no surface, border,
   shadow or inset — the icons sit directly on the post card. The
   sticky pinning goes with it: a transparent bar pinned over
   scrolling post text would be unreadable, and the surface that
   made pinning legible is exactly what was asked to be removed. */
html body .engagement-bar {
  position: static !important;
  margin: 4px 0 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
}

/* ---- 45. [v5.11.44] Personal info: compact (flow-safe rewrite) ----
   The v5.11.43 grid broke the tab badly: the avatar block lives
   INSIDE the form, so it became a grid cell — First Name slotted
   beside a 300px-tall photo and every later field landed in the
   wrong column, while display:contents destroyed the form's own
   working Phone+DOB / Gender+Nationality flex pairs. That entire
   grid is removed. Compaction is now metrics-only in normal
   document flow — the form's existing structure (including its
   .form-row-half pairs) is preserved exactly. */
html body .profile-form { max-width: 760px !important; }
html body .profile-form h2 {
  font-size: 15px !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  color: #111827 !important;
}
html body .profile-form .form-row { margin-bottom: 9px !important; }
html body .profile-form .form-row-half { gap: 12px !important; }
html body .profile-form .form-row label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  margin-bottom: 3px !important;
}
html body .profile-form .form-row input,
html body .profile-form .form-row select {
  padding: 5px 9px !important;
  font-size: 12.5px !important;
  border-radius: 4px !important;
}
html body .profile-form .form-row textarea {
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  height: 58px !important;
  border-radius: 4px !important;
}
html body .profile-form .form-row input:focus,
html body .profile-form .form-row select:focus,
html body .profile-form .form-row textarea:focus {
  border-color: var(--c-primary, #6a1b9a) !important;
}
/* Avatar block: same layout, less air */
html body .profile-form .avatar-upload-wrap { margin-bottom: 12px !important; }
html body .profile-form .save-msg {
  padding: 5px 10px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  border-radius: 4px !important;
}

/* ---- 46. [v5.11.53] CV actions bar: single source of truth ----
   Three !important layers (visual-polish gradient on -primary,
   bundle 1.5px/3px outline chrome, a late bundle padding rule)
   kept re-differentiating these buttons. This block loads last
   and settles it: inside .cvs-actions every control is identical —
   white, hairline, text-fitted with ~2mm padding — including
   Download PDF. background-image kills the gradient. */
html body .cvs-actions .cvs-btn,
html body .cvs-actions .cvs-btn-primary,
html body .cvs-actions .cvs-btn-outline,
html body .cvs-actions select {
  background: #fff !important;
  background-image: none !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  height: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
html body .cvs-actions .cvs-btn:hover,
html body .cvs-actions .cvs-btn-primary:hover,
html body .cvs-actions .cvs-btn-outline:hover {
  border-color: #7c3aed !important;
  color: #7c3aed !important;
  -webkit-text-fill-color: #7c3aed !important;
  background: rgba(124, 58, 237, 0.04) !important;
  background-image: none !important;
}

/* ---- 47. [v5.11.54] CV template posters: black & white ----
   The ten template preview icons each carried their own accent
   colour (purple, gold, pink, blue, green, teal...). Per
   direction they render monochrome — grayscale keeps every
   layout's structure and tonal contrast while removing colour.
   The card text and selected-state ring are unaffected. */
html body .cvs-card .cv-ico {
  filter: grayscale(1) !important;
}

/* ---- 48. [v5.11.55] Profile forms: shared row patterns ----
   form-row-half/-third are now used across all profile tabs but
   were only defined in personal.php's inline styles. Defined here
   globally (with mobile stacking, which most tabs lacked) so every
   tab renders its pairs and triples identically. */
html body .profile-form .form-row-half { display: flex; gap: 12px; }
html body .profile-form .form-row-half > .form-row { flex: 1; min-width: 0; }
html body .profile-form .form-row-third { display: flex; gap: 12px; }
html body .profile-form .form-row-third > .form-row { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  html body .profile-form .form-row-half,
  html body .profile-form .form-row-third { flex-direction: column; gap: 0; }
}

/* ---- 49. [v5.11.57] CV summary: 2-3mm spacing everywhere ----
   Per direction, no gap in the CV summary exceeds ~3mm (11px).
   Block padding 14-18px -> 8x10px (~2mm), section gaps 22px ->
   10px, block gaps 8px -> 6px, title underline gap tightened.
   Line-height inside descriptions eased for density. */
html body .cv-section { margin-bottom: 10px !important; }
html body .cv-section-title {
  padding-bottom: 3px !important;
  margin-bottom: 7px !important;
}
html body .cv-personal,
html body .cv-entry,
html body .cv-summary-block {
  padding: 8px 10px !important;
  margin-bottom: 6px !important;
}
html body .cv-name { margin-bottom: 5px !important; }
html body .cv-entry-sub { margin-top: 2px !important; }
html body .cv-entry-desc { margin-top: 4px !important; line-height: 1.45 !important; }
html body .cv-tags { gap: 4px !important; margin-top: 3px !important; }
html body .cv-tag { padding: 2px 8px !important; }

/* ---- 50. [v5.11.59] Right sidebar: +1px type, paddings untouched ----
   Notifications panel companion to the sidebar-widgets/insights
   source-level bump: header 11->12, list items 11->12, empty state
   10->11, meta 9->10. Only font-size is set here — every padding,
   margin and dimension stays exactly as it was. */
html body .nd-panel-header,
html body .nd-panel-header span { font-size: 12px !important; }
html body .nd-panel-header button { font-size: 11px !important; }
html body .notif-dash-item { font-size: 12px !important; }
html body .notif-dash-empty { font-size: 11px !important; }
html body .notif-dash-item .ndi-time,
html body .notif-dash-item small { font-size: 10px !important; }

/* ---- 51. [v5.11.62] Engagement bar: 1.25x controls ----
   v5.11.61's 1.5x read too big; reduced 25% per direction to a
   net ~1.25x of the original: text 10-11px -> 13px, icons
   14px -> 17px. Covers the right-side flag group too. */
html body .engagement-bar .engagement-btn,
html body .engagement-bar button {
  font-size: 13px !important;
  padding: 3px 6px !important;
  line-height: 1.3 !important;
}
html body .engagement-bar .engagement-btn svg,
html body .engagement-bar button svg {
  width: 17px !important;
  height: 17px !important;
}

/* ---- 52. [v5.11.65] Feed videos: full card width ----
   Videos rendered at intrinsic width (max-width:100% but no width)
   with a 220px height cap, leaving a large empty area beside them
   in the card. They now span the full card width like feed images:
   width 100%, sensible height cap, letterboxed on black so wide
   and tall clips both look intentional. */
html body .post-card .post-media-item video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 480px !important;
  object-fit: contain !important;
  display: block !important;
  background: #000 !important;
  border-radius: 3px !important;
}
html body .post-card .post-media-item { width: 100% !important; }

/* ---- 53. [v5.11.66] Post dropdown items: always-visible dark ink ----
   One of the competing .dropdown-item rules paints these with the
   header ink variable (#fff) — an icon-only white button inside a
   white dropdown is invisible. Force dark ink + left-aligned
   icon+label layout in every post dropdown. */
html body .post-dropdown .dropdown-item {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}
html body .post-dropdown .dropdown-item svg { stroke: currentColor !important; }
html body .post-dropdown .dropdown-item.delete {
  color: #dc2626 !important;
  -webkit-text-fill-color: #dc2626 !important;
}

/* ---- 54. [v5.11.71] Edit pencil: black & white ---- */
html body .engagement-bar .post-edit-btn {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #fff !important;
}
html body .engagement-bar .post-edit-btn svg { stroke: currentColor !important; fill: none !important; }