/* [v5.17.98] READABILITY FLOOR (per direction: text unreadable at 1m).
   An audit found 220+ rules below 12px (timestamps 9px, tabs 8-10px,
   meta 11px). Policy, applied at the source across every stylesheet:
   readable text >= 12px; badges/counters >= 10px; the Site Settings
   miniature theme previews (.ss-tc-*) are exempt by design. New CSS
   must follow the same floor. */
/* Purple Login — Platform Gap Ceiling
 * ====================================
 * [v5.16.332] ONE place, loaded LAST (enqueued with a dependency on
 * pl-refinements, so it wins source-order ties), that caps the space
 * BETWEEN objects and BETWEEN buttons to <= 2mm across the whole app.
 *
 * Scope note: this only touches GAPS and the MARGINS that separate stacked
 * cards / list rows. It deliberately does NOT touch internal control padding
 * (the height of a button, the padding inside an input), because that is not
 * "space between objects" and squeezing it would break controls.
 *
 * Retune everything from one place: change --pl-gap below.
 *   --pl-gap        = object-to-object / card-to-card   (6px ~= 1.6mm)
 *   --pl-gap-tight  = buttons/icons sitting shoulder-to-shoulder (3px)
 */

:root {
  --pl-gap: 4px;      /* 1mm */
  --pl-gap-tight: 2px;
}
/* [v5.16.420] The :root declaration above sets the token on <html> ONLY.
   pl-refinements.css:5539 sets it again on `html body` (--pl-gap: 6px), and
   custom properties resolve from the NEAREST ancestor that declares them — not
   by specificity across different elements. So every element inside <body>
   inherited 6px and the v5.16.377 "1mm everywhere" change never actually
   applied to anything on screen. Verified in Chromium: getComputedStyle
   reported --pl-gap: 6px before this rule existed.

   Re-declared here on the same `html body` selector. pl-gap-enforce.css is
   enqueued after pl-refinements.css, so at equal specificity this one wins. */
html body {
  --pl-gap: 4px;      /* 1mm */
  --pl-gap-tight: 2px;
}

/* ============ FEED (centre column) ============ */
/* feed top: Feed header -> composer -> first post all capped to one gap */
html body .center-content .dir-header,
html body .center-content .feed-container .pl-page-head { margin-bottom: var(--pl-gap-tight, 3px) !important; padding-bottom: 3px !important; }
html body .center-content .create-post-card { margin: 0 0 var(--pl-gap) !important; }
html body .center-content .post-card { margin-bottom: var(--pl-gap) !important; }

/* ============ FEED MEDIA: kill the black pillarbox bars ============
 * [v5.16.334] Console on the live page proved the media CELL is painted
 * rgb(0,0,0) at runtime (no rule for it exists in any stylesheet, so it's
 * set inline/by JS). A portrait image sits in it height-capped, narrower
 * than the cell, so the black shows as side bars. Forcing the whole media
 * chain to the card surface with !important beats the inline black. */
html body .post-card .post-media,
html body .post-card .post-media-grid,
html body .post-card .post-media-item { background: var(--post-media-bg, #fff) !important; }
html body .center-content .post-header { margin-bottom: var(--pl-gap) !important; }
html body .center-content .post-media,
html body .center-content .post-content-full { margin: 0 0 var(--pl-gap) !important; }
html body .center-content .engagement-bar { margin-top: 0 !important; gap: var(--pl-gap-tight) !important; }
html body .center-content .post-actions-row { gap: var(--pl-gap-tight) !important; }
html body .center-content .comments-section { margin-top: var(--pl-gap) !important; }

/* ============ LEFT NAV ============ */
html body .left-sidebar .nav-menu,
html body .left-sidebar .nav-submenu { gap: var(--pl-gap-tight) !important; }
html body .left-sidebar .nav-item { margin-bottom: var(--pl-gap-tight) !important; }

/* ============ RIGHT SIDEBAR: widget cards ============ */
html body .right-sidebar .sw-card,
html body .right-sidebar .pc-card,
html body .right-sidebar .up-panel,
html body .right-sidebar .sj-panel { margin-bottom: var(--pl-gap) !important; }

/* people / job list rows */
html body .right-sidebar .up-panel .up-card,
html body .right-sidebar .sj-panel .sj-card { margin-bottom: var(--pl-gap) !important; }
html body .right-sidebar .up-panel,
html body .right-sidebar .sj-panel { gap: var(--pl-gap) !important; }

/* button clusters + tag rows sit tight */
html body .right-sidebar .up-actions,
html body .right-sidebar .conn-actions,
html body .right-sidebar .sj-tags,
html body .right-sidebar .up-row1 { gap: var(--pl-gap-tight) !important; }

/* stats / job-activity rows */
html body .right-sidebar .stats-row { margin-bottom: var(--pl-gap-tight) !important; }

/* ============ CROSS-COLUMN: generic card stacks ============
 * Any element carrying a *-card / *-panel class inside the content columns
 * gets the same bottom rhythm. Keeps profile / jobs / community / settings
 * cards in line without enumerating every one. gap below is inert on
 * non-flex, so it only tightens real flex/grid stacks. */
html body .center-content [class$="-card"],
html body .center-content [class$="-panel"] { margin-bottom: var(--pl-gap) !important; }

/* [v5.16.356] Apply the v354 feed layout to EVERY tab. Cap the dashboard grid
   to 1060px and centre it, with tight 4px (~1mm) column gaps, so the same
   narrow-feed / packed-sidebars / outer-margin layout is used platform-wide
   (feed, profile, jobs, community, settings, admin — all of them). Global
   (not scoped to the feed) so it holds on every page. Tune the 1060px once. */
html body .dashboard-grid {
  /* [v5.20.100] max-width grows by 4×5mm so ALL FOUR columns gain ~5mm (the
     three side columns via their width vars below; the feed 1fr absorbs the
     remaining 5mm). Was 1091px. */
  max-width: calc(1091px + 20mm) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  column-gap: 2.5mm !important;   /* [v5.20.99] was 4px (~1mm); widened to 2.5mm between columns per direction */
}
/* [v5.20.101] SIDEBAR WIDTHS +5mm — applied as DEFAULTS on the width VARIABLES,
   not as a hardcoded grid-template-columns. v5.20.100 pinned the grid tracks with
   !important, which stopped the grid reading var(--colN-width) and so silently
   killed the Site Settings live per-column width controls (they emit --colN-width
   on `html body .dashboard-grid`). The grid template in pl-refinements.css stays
   var-based, so those controls work again; these vars only move the DEFAULT +5mm.
   Set on `html body` (loads after refinements, same specificity → wins the
   default) but BELOW the Site Settings override at `html body .dashboard-grid`
   (higher specificity → the user's saved/live value still wins). */
html body {
  --col1-width: calc((187px + 5mm) * 0.95) !important;   /* [v5.20.147] 3 sidebars reduced to 95% width per request; feed (1fr) absorbs the freed space. Width slider still overrides. */
  --col3-width: calc((187px + 5mm) * 0.95) !important;   /* [v5.20.147] 95% */
  --col4-width: calc((187px + 5mm) * 0.95) !important;   /* [v5.20.147] 95% */
  --pl-col1-len: calc((187px + 5mm) * 0.95) !important;  /* [v5.20.147] header-pill centring companion, kept in sync with col1 */
}

/* [v5.16.357] Cap the top/bottom info banners to the same 1060px centred
   layout, so the dark banner (career-stats dashboard etc.) doesn't overhang
   past the centred content on either side.
   [v5.17.56] The email-verification card joins this exact rule, so it always
   spans the SAME width as the banners and the grid — tune the cap once and
   all three move together. */
html body .info-banner,
html body .info-banner-bottom,
html body #verify-banner {
  max-width: calc(1091px + 20mm) !important;   /* [v5.20.100] match the widened dashboard-grid so banners stay flush with the columns */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* [v5.16.365] Swap sidebars 3 & 4. The widgets column (.right-sidebar) moves
   next to the content in column 3; the Network/Jobs panel (.users-panel) moves
   to the far right, column 4. Done with grid placement so the markup order is
   untouched. */
html body .dashboard-grid .right-sidebar { grid-column: 3 / 4 !important; grid-row: 1 !important; }
html body .dashboard-grid .users-panel   { grid-column: 4 / 5 !important; grid-row: 1 !important; }

/* [v5.16.369] On profile / Discover tabs, hide the CLOCK/widgets column (now
   col 3 after the swap) and KEEP Network/Jobs, moving it next to the content.
   The 4th track collapses so nothing dangles on the right. (The grid class is
   still named 'no-users-panel' from before, but it now hides the widgets.) */
html body .dashboard-grid.no-users-panel {
  grid-template-columns: var(--col1-width, 180px) minmax(0, 1fr) var(--col3-width, 190px) 0px !important;
}
html body .dashboard-grid.no-users-panel .center-content { grid-column: 2 / 3 !important; }
/* [v5.19.35] Reverted to original behaviour: on non-feed/engagement tabs the
   Network/Jobs panel stays and the WIDGETS column (clock/stats) is hidden.
   Feed and engagement ('standard' mode) keep BOTH. */
html body .dashboard-grid.no-users-panel .right-sidebar   { display: none !important; }
html body .dashboard-grid.no-users-panel .users-panel     { grid-column: 3 / 4 !important; grid-row: 1 !important; }

/* [v5.17.5] Ad manager layout: nav + full-width content only. The 3rd
   (Network/Jobs) column is not rendered on these tabs (page-dashboard.php)
   and the track is removed here so the campaign table and wizard use the
   whole remaining width; the 4th column stays hidden as on other tabs. */
html body .dashboard-grid.pl-ads-wide {
  grid-template-columns: var(--col1-width) minmax(0, 1fr) !important;
}
html body .dashboard-grid.pl-ads-wide .center-content { grid-column: 2 / 3 !important; }
html body .dashboard-grid.pl-ads-wide .users-panel,
html body .dashboard-grid.pl-ads-wide .right-sidebar   { display: none !important; }

/* ============================================================
 * [v5.16.377] FINAL — 1mm (approx 4px) MAX between ANY boxes, everywhere.
 * Horizontal: the column track gap is 1mm AND the columns carry no side
 *   padding, so the visible space between cards across columns = the 1mm gap.
 * Vertical: every inter-card / inter-row margin is capped to 1mm.
 * (Card INTERNAL padding is left alone — that is content spacing, not a gap
 *  between boxes.)
 * ========================================================== */

/* --- horizontal: the four columns, 2.5mm apart, no side padding --- */
/* [v5.20.99] column gap widened from 4px (~1mm) to 2.5mm (~9.45px) between
   the left nav, feed, widgets and Network/Jobs columns, per direction. This is
   the source-order winner over the block above at equal specificity. */
html body .dashboard-grid { column-gap: 2.5mm !important; }
html body .dashboard-grid > .left-sidebar,
html body .dashboard-grid > .center-content,
html body .dashboard-grid > .users-panel,
html body .dashboard-grid > .right-sidebar,
html body .dashboard-grid div.right-sidebar,
html body .dashboard-grid div.users-panel { padding-left: 0 !important; padding-right: 0 !important; }

/* --- vertical: stacked cards / panels / rows, 1mm apart --- */
html body .dashboard-grid .post-card,
html body .dashboard-grid .sw-card,
html body .dashboard-grid .pc-card,
html body .dashboard-grid .up-card,
html body .dashboard-grid .sj-card,
html body .dashboard-grid .up-panel,
html body .dashboard-grid .sj-panel,
html body .dashboard-grid .conn-card,
html body .dashboard-grid .stats-row,
html body .dashboard-grid [class$="-card"],
html body .dashboard-grid [class$="-panel"] { margin-top: 0 !important; margin-bottom: 4px !important; }

/* --- vertical rhythm: direct children of any sidebar column, 1mm apart --- */
html body .dashboard-grid .left-sidebar  > *,
html body .dashboard-grid .right-sidebar > *,
html body .dashboard-grid .users-panel   > * { margin-bottom: 4px !important; }

/* ============================================================
   [v5.17.84] UNIFORM TOP GAP — the architecture the direction asks for:
   "the left sidebar holds the gap to the banner; the column title bars
   must hold the SAME gap."
   Root cause of the misalignment: every column carried its OWN top
   padding (--col1: 8px, --col2: 20px, --col3: 6px, --col4: 0px), plus
   the title strips' own margins — four columns, four different gaps,
   so the tops could never line up on any tab.
   Architecture: ONE source. Every column's top gap reads the LEFT
   SIDEBAR's variable (--col1-padding-top). Change it once in Site
   Settings and all four columns move together; they can no longer
   disagree by construction. First children are stripped of their own
   top margins so a title strip cannot add or subtract from the gap.
   ============================================================ */
html body .dashboard-grid .center-content,
html body .dashboard-grid .users-panel,
html body .dashboard-grid .right-sidebar {
  padding-top: var(--col1-padding-top, 8px) !important;
}
html body .dashboard-grid .left-sidebar   > :first-child,
html body .dashboard-grid .center-content > :first-child,
html body .dashboard-grid .users-panel    > :first-child,
html body .dashboard-grid .right-sidebar  > :first-child {
  margin-top: 0 !important;
}
/* ============================================================
   [v5.17.89] ONE TYPOGRAPHY FOR ALL PAGE HEADERS.
   The strips visibly differed in font and size per tab because:
   (a) visual-polish.css said 18px !important while pl-refinements.css
       said 15px !important, and which won varied with the template's
       wrapper specificity; and
   (b) NO rule set the strip's font-family at all, so each of the 33
       .dir-header templates inherited whatever family its own wrapper
       used.
   This file is the LAST stylesheet enqueued; with html-body specificity
   the rule below outranks both combatants everywhere. Canonical look =
   the curated refinements spec: 15px / 500 / .02em, theme font family.
   ============================================================ */
html body .center-content .dir-header,
html body .center-content .pl-page-head {
  font-family: var(--font-main, 'Roboto', sans-serif) !important;
}
html body .center-content .dir-header h1,
html body .center-content .dir-header h2,
html body .center-content .dir-header h3,
html body .center-content .pl-page-head h1,
html body .center-content .pl-page-head h2,
html body .center-content .pl-page-head h3 {
  font-family: var(--font-main, 'Roboto', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  line-height: 1.35 !important;
}
/* ============================================================
   [v5.19.0] DASHBOARD THEMES. The resolved theme (user choice if the
   admin allows it, else the admin default - see inc/theme-presets.php)
   arrives as body.pl-theme-<slug>. Each theme sets the banner gradient
   and the stat-tile tint. body.class specificity beats the html body
   var emitters, and this file loads last, so a theme always wins.
   ============================================================ */
body.pl-theme-charcoal  { --top-banner-bg: linear-gradient(135deg,#2e2c29,#232220) !important; --pl-th-tile: rgba(17,141,255,.16); }
body.pl-theme-navy      { --top-banner-bg: linear-gradient(135deg,#0b1522,#0e1a2b) !important; --pl-th-tile: rgba(55,138,221,.18); }
body.pl-theme-aubergine { --top-banner-bg: linear-gradient(135deg,#1d1946,#26215C) !important; --pl-th-tile: rgba(175,169,236,.16); }
body.pl-theme-espresso  { --top-banner-bg: linear-gradient(135deg,#241b14,#2C2119) !important; --pl-th-tile: rgba(239,159,39,.14); }

/* ============================================================
   [v5.19.12] TAGS / CHIPS -> white pill, black text (per direction —
   "like this buttons and tags"). Skill tags, job tags, directory tags,
   category chips get the same white-pill look as the buttons. COUNT
   badges (notification/unread numbers) are excluded — a count needs to
   stand out, not blend into white. Same last-stylesheet override.
   ============================================================ */
html body .job-tag,
html body .js-tag,
html body .cpv-tag,
html body .dir-tag,
html body .pv-tag,
html body .rc-chip,
html body .cs-pill,
html body [class*="-tag"]:not([class*="tags"]),
html body [class*="-chip"] {
  /* [v5.19.70] Chips no longer borrow the BUTTON colours (--pl-btn-*):
     with grey/white buttons saved in Custom Overrides, every meta chip
     (company size, type, Est. year…) rendered as a highlighted grey pill
     with white text. Chips are informational labels, so they get a fixed
     neutral look: light background, dark text, always readable. */
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* ============================================================
   [v5.19.11] EVERY BUTTON WHITE, BLACK TEXT — NO EXCEPTIONS (per
   direction). All prior colour carve-outs (danger red, success green,
   active-toggle dark) are removed: the user wants one uniform look.
   Sliders, checkboxes, radios and emoji glyph buttons stay untouched
   because they are inputs, not buttons. One rule, last stylesheet,
   text-fill pinned so nothing goes invisible.
   ============================================================ */
/* [v5.20.185] COMMENT ROW EXCLUDED from the global button paint.
   This selector is (1,5,4) !important — an id plus five :not() classes — and
   it was the rule actually painting the comment action buttons grey. It beat
   every attempted fix: style.css:405 background:none (0,1,0),
   pl-refinements.css:811 transparent (0,1,2), and even button-ink's
   purpose-built row strip at (0,3,3). Three separate releases tried to undo
   this paint by naming classes and none of them could reach it.
   Resolved by CASCADE SIMULATION over all ten stylesheets plus the runtime
   inline CSS, not by reading rules — that is what identified this line.
   .comment-action-btn and .comment-actions-toggle are now excluded at SOURCE,
   which is the only level that works: they are inline text controls (a count
   and an 11px icon, background:none by design), not chips. */
html body button:not(#plm-emojis button):not(.bn-slider):not(.pr-seg-btn):not(.comment-action-btn):not(.comment-actions-toggle):not(.engagement-btn):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html body input[type="submit"],
html body input[type="button"],
html body .header-button,
html body .site-header .header-nav a,
html body .up-tog-label,
html body a.cbtn,
html body a.job-btn,
html body a.btn,
html body .conn-btn,
html body .cvs-btn,
html body .cvs-btn-primary,
html body .cvs-btn-outline,
html body .pj-import-template-btn,
html body .padmin-btn,
html body .dir-clear-btn,
html body button[name^="save_"] {
  background: var(--pl-btn-bg, #f7f8fa) !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* [v5.19.20] "Download Template" is an <a class="cvs-btn cvs-btn-outline">
   and the bundle paints .cvs-btn-outline:hover grey !important — my earlier
   rule didn't cover the anchor or the :hover, so it stayed grey. Cover the
   anchor form AND the hover state at high specificity so nothing in the CV
   row escapes the button colours. */
html body a.cvs-btn,
html body a.cvs-btn-outline,
html body a.cvs-btn-primary,
html body .cvs-actions a.cvs-btn,
html body .cvs-btn:hover,
html body .cvs-btn-outline:hover,
html body .cvs-btn-primary:hover,
html body a.cvs-btn:hover,
html body .cvs-actions .cvs-btn:hover {
  background: var(--pl-btn-bg, #f7f8fa) !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border: 1px solid #d1d5db !important;
}

/* [v5.19.19] The CV toolbar SELECTS (bullet-style "» Chevron", template
   picker) rendered as the browser's native GREY control chrome, ignoring
   their inline background — that is why they alone stayed grey while the
   buttons went light. appearance:none removes the native chrome so they
   obey the button colours like everything else in the row. A custom caret
   is drawn back in so they still read as dropdowns. */
html body .cvs-actions select,
html body .cvs-actions form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--pl-btn-bg, #f7f8fa) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23374151' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 999px !important;
  padding-right: 26px !important;
}
html body button:not(#plm-emojis button):not(.bn-slider):not(.pr-seg-btn):not(.comment-action-btn):not(.comment-actions-toggle):not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover,
html body input[type="submit"]:hover,
html body input[type="button"]:hover,
html body .header-button:hover,
html body a.cbtn:hover,
html body a.job-btn:hover,
html body a.btn:hover {
  background: #eceef1 !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border-color: #9ca3af !important;
}

/* [v5.19.15] The two admin button colours ALSO drive the page-header
   strips, and the footer surfaces (per direction). Same --pl-btn-bg /
   --pl-btn-text vars, so one pair of pickers themes buttons, tags, page
   headers and footer together. Header/footer BACKGROUND gradients keep
   their own controls; this colours the page-title strip and footer text/
   buttons. Defaults preserve the current look when unset. */
html body .center-content .dir-header,
html body .center-content .pl-page-head {
  background: var(--pl-btn-bg, #5f5d58) !important;
}
html body .center-content .dir-header h1,
html body .center-content .dir-header h2,
html body .center-content .dir-header h3,
html body .center-content .pl-page-head h1,
html body .center-content .pl-page-head h2,
html body .center-content .pl-page-head h3 {
  color: var(--pl-btn-text, #ffffff) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #ffffff) !important;
}
html body .site-footer a,
html body .site-footer button,
html body .site-footer .footer-text {
  color: var(--pl-btn-text, inherit) !important;
  -webkit-text-fill-color: var(--pl-btn-text, inherit) !important;
}

/* ============================================================
   [v5.18.9] ONE CONTROL HEIGHT EVERYWHERE (per direction). The page
   header strips, the Network/Jobs toggle, the Post/Search pill, the
   header Feed/Jobs/Logout buttons and the footer's controls all read
   ONE variable — change --pl-bar-h once and every bar moves together;
   they can no longer disagree.
   ============================================================ */
:root { --pl-bar-h: 28px; }
html body .center-content .dir-header,
html body .center-content .pl-page-head {
  height: var(--pl-bar-h) !important;
  min-height: var(--pl-bar-h) !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .center-content .dir-header h1,
html body .center-content .dir-header h2,
html body .center-content .dir-header h3,
html body .center-content .pl-page-head h1,
html body .center-content .pl-page-head h2,
html body .center-content .pl-page-head h3 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .up-toggle-wrap,
html body .up-tog-label {
  height: var(--pl-bar-h) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .site-header .hdr-composer,
html body .site-header .hdr-composer button {
  height: var(--pl-bar-h) !important;
  box-sizing: border-box !important;
}
html body .site-header .header-nav .header-button,
html body .site-header .header-nav a,
html body .site-header .header-nav button {
  height: var(--pl-bar-h) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .site-footer a,
html body .site-footer button {
  height: var(--pl-bar-h) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* [v5.17.93] The Network / Jobs toggle matches the PAGE HEADER size
   (per direction). It was 11px/3px-padding beside 15px page headers, so
   the two bars at the same top line read as different sizes. Same spec
   as the unified strip typography: 15px / 500 / theme family, with
   padding that brings the toggle to the same rendered height as the
   strip. Placed here (last stylesheet, html-body specificity) to beat
   the 11px rules in refinements. */
html body .up-toggle-wrap .up-tog-label,
html body .up-tog-label {
  font-family: var(--font-main, 'Roboto', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
  line-height: 1.35 !important;
  padding: 4px 14px !important;
}

/* [v5.17.92] Icons RESTORED in page headers (per direction — trying them
   back). The v5.17.90 hiding rule is removed. To keep the strip heights
   uniform (the reason they were removed), all strip icons are normalised
   to ONE size regardless of what the template baked in (16px globe vs
   13px elsewhere) — so the icons return without re-introducing the
   per-tab height wobble. */
html body .center-content .dir-header h1 svg,
html body .center-content .dir-header h2 svg,
html body .center-content .dir-header h3 svg,
html body .center-content .pl-page-head h1 svg,
html body .center-content .pl-page-head h2 svg,
html body .center-content .pl-page-head h3 svg {
  width: 14px !important;
  height: 14px !important;
  vertical-align: -2px !important;
}

/* [v5.17.86] ONE-SOURCE BANNER GAP. The reported bug: the gap between the
   banner and the page header CHANGED ON EVERY TAB. Cause: the distance is
   a CHAIN — banner margin-bottom + grid padding-top + column padding-top
   + each tab template's own wrapper top box + the strip's margin — and
   the thirteen tab templates each contribute their own values. Different
   chain per tab = different gap per click.
   Cure: the gap has exactly ONE source — the shared column top padding
   (--col1-padding-top, the left sidebar's own gap). Every other link in
   the chain is forced to zero, so no tab template can change the
   distance. Adjust the left panel's top padding in Site Settings and the
   banner→header gap follows everywhere, identically. */
html body .info-banner { margin-bottom: 0 !important; }
html body .dashboard-grid { padding-top: 0 !important; }
html body .dashboard-grid .center-content > * {
  margin-top: 0 !important;
  padding-top: 0 !important;      /* tab wrappers (.feed-container, .profile-form, ...) */
}
html body .dashboard-grid .center-content > * > .dir-header:first-child,
html body .dashboard-grid .center-content > * > .pl-page-head:first-child,
html body .dashboard-grid .center-content > .dir-header:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* [v5.16.378] Align columns to the banner. The grid had 5px side padding, so
   the columns sat ~5px inside the banner's left/right edges. Zero the grid's
   SIDE padding (keep top/bottom) so the columns fill to the same edges as the
   info-banner. */
html body .dashboard-grid { padding-left: 0 !important; padding-right: 0 !important; }

/* [v5.16.379] The global `canvas{width:100%}` rule stretched the clock to the
   full column (touching both edges after the padding was zeroed). Constrain the
   clock canvas to a centred square so it sits properly within the column. */
html body .dashboard-grid .right-sidebar #plClkCanvas,
html body .dashboard-grid .right-sidebar #pl-clock-widget canvas {
  width: 160px !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto !important;
  display: block !important;
}

/* [v5.16.385] 3rd column vertical alignment is now handled by JS (plAlignHeader,
   header.php) which matches its first card to the 1st column's on load/resize.
   This is just a neutral baseline. */
html body .dashboard-grid .right-sidebar { margin-top: 0 !important; }

/* [v5.16.388] Align every column's first card top to the same line (flush under
   the banner). The sidebars had ~7px top inset (column padding-top + first
   child margin-top) while the feed/clock had none, so the Profile (1st) and
   Network (4th) cards sat lower. Zero that top inset on all four columns.
   CSS-based so it updates with the stylesheet (the header JS was being served
   stale from the page cache). */
html body .dashboard-grid > .left-sidebar,
html body .dashboard-grid > .center-content,
html body .dashboard-grid > .right-sidebar,
html body .dashboard-grid > .users-panel { padding-top: 0 !important; }
html body .dashboard-grid > .left-sidebar   > *:first-child,
html body .dashboard-grid > .center-content > *:first-child,
html body .dashboard-grid > .right-sidebar  > *:first-child,
html body .dashboard-grid > .users-panel    > *:first-child { margin-top: 0 !important; }

/* [v5.20.321] Feed + clock columns sat lower than the left/network columns.
   The rules above zero every column's padding-top and first-card margin-top,
   but the CENTRE column's own margin-top (from --col2-margin-top, which Site
   Settings can set) was never zeroed, and the clock widget carries an inline
   top padding. Zero both so the feed and clock start on the same line as the
   left and network columns. margin-top:0 here is a stylesheet rule, so it does
   not override plAlignHeader's inline (important) column-align margins. */
html body .dashboard-grid > .center-content,
html body .dashboard-grid > .right-sidebar { margin-top: 0 !important; }
html body .dashboard-grid > .right-sidebar #pl-clock-widget { padding-top: 0 !important; }

/* [v5.16.389] Profile photo framed with an even white margin on all sides.
   The profile card gets a white background + uniform 10px padding; the photo
   fills the remaining width as a rounded square, so there is equal white space
   top / left / right / bottom around it (instead of running to the edges). */
html body .sidebar-profile {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  /* [v5.17.72] was a hard 10px, which BEAT the Corners sliders entirely —
     this box was in no corner group, so "square everything" left it bent.
     Follows the SIDE PANELS slider (per direction — it IS the left column)
     via corner-controls; 10px shipped default when no value is set. */
  border-radius: var(--pl-r-panels, 10px) !important;
  padding: 10px !important;
  box-sizing: border-box !important;
}
html body .sidebar-profile .sb-avatar-frame {
  display: block !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
html body .sidebar-profile .sb-avatar-img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  /* [v5.16.404] fallback 8px -> 50%: matches the new circular default, so an
     install that never opens the Corners panel still gets round avatars. */
  border-radius: var(--pl-r-avatars, 50%) !important;
  max-width: 100% !important;
}

/* [v5.16.390] Two separate boxes in the left column: the profile-photo card and
   the navigation menu, with a 1mm (4px) gap between them. */
html body .left-sidebar nav[aria-label="Sidebar navigation"] {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  /* [v5.17.72] was a hard 10px — same fix as .sidebar-profile above:
     follows the SIDE PANELS corner slider, 10px shipped default when unset. */
  border-radius: var(--pl-r-panels, 10px) !important;
  padding: 6px 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
html body .sidebar-profile { margin-bottom: 4px !important; }

/* [v5.16.391] The LEFT column was itself a white card (bg + border + radius),
   wrapping the profile box and the nav box so they looked like one common box.
   Make the column transparent so the profile card and the nav menu read as two
   separate boxes with the 1mm gap between them. */
html body .dashboard-grid .left-sidebar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* [v5.16.394] 1mm text inset in the 4th column (Network/Jobs panel).
   v393 aimed this at .job-card, which does not exist in this panel — the real
   markup (inc/sidebar-users.php) uses .sj-card for Jobs and .up-card for
   Network, both declared `padding: Npx 0` in style.css, so the text ran flush
   to the panel boundary. Targeting the actual classes here.
   The inset is the card's OWN padding, so the card border stays at the edge and
   the 1mm inter-column gap is untouched. */
/* [v5.16.395] the card padding that lived here is now folded into the detached
   card rule below, so there is a single source for it. */
/* Non-card children of the panel get the same inset so nothing else touches
   the boundary (empty state, section headings). */
html body .users-panel .sj-no-jobs,
html body .users-panel .up-empty {
  padding-left: var(--pl-gap, 4px) !important;
  padding-right: var(--pl-gap, 4px) !important;
}

/* =========================================================================
   [v5.16.397] 4th column: remove the white slab behind everything
   -------------------------------------------------------------------------
   THE ACTUAL CAUSE of the "square background behind Network/Jobs". It was
   never a toggle track. .users-panel carries background:var(--col3-bg)
   (style.css), and pl-refinements.css :root sets --col3-bg:#ffffff — so the
   entire column is a solid white rectangle. Stripping backgrounds off
   .up-toggle-wrap in v395/v396 could never remove it.

   Two consequences fixed here:
     1. the toggle now floats on the page instead of sitting on a white box;
     2. the v395 detached cards become visible as detached — white cards on a
        white column had no separation to show.

   --col3-bg is left alone because .right-sidebar shares it; only this column
   is made transparent.
   ========================================================================= */
html body .dashboard-grid div.users-panel,
html body .users-panel {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The sticky search bars inherited the same white from --col3-bg. With the
   column transparent they need the PAGE colour, or cards scroll visibly
   underneath them. */
html body .users-panel .up-search,
html body .users-panel .sj-search {
  background: var(--c-bg-body, #FAF8F3) !important;
  background-color: var(--c-bg-body, #FAF8F3) !important;
}

/* =========================================================================
   [v5.16.395] 4th column: bare toggle + detached cards
   ========================================================================= */

/* (1) TOGGLE — remove the track box behind Network/Jobs.
   The track is declared in three places, all of which have to be neutralised
   or the box survives:
     style.css          background:#d1d5db !important
     pl-refinements.css background:#f3f4f6 + 1px border + radius + overflow
     visual-polish.css  border-bottom (also inlined in pl-bundle.min.css)
   The purple slider stays; its radius moves onto the slider itself, since the
   wrapper no longer has a shape to clip to. */
html body .users-panel .up-toggle-wrap,
html body .up-toggle-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
}
html body .up-toggle-wrap .up-tog-slider {
  border-radius: var(--pl-r-buttons,var(--pl-btn-radius,999px)) !important;
}

/* (2) CARDS — each job / person becomes its own detached card.
   Drops the shared-surface hairline divider and gives every row a full border,
   white fill and its own corner radius. margin-bottom stays at the 1mm token
   from v377 so the platform-wide spacing rule is unchanged. The v394 text
   inset survives as the card's own padding. */
html body .users-panel .sj-card,
html body .users-panel .up-card {
  background: var(--c-bg-white, #ffffff) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: var(--pl-r-cards, 6px) !important;
  padding: 8px var(--pl-gap, 4px) !important;
  margin-bottom: var(--pl-gap, 4px) !important;
  box-shadow: none !important;
}
/* :last-child previously cleared the divider — with real borders there is
   nothing to clear, but the trailing margin should still go. */
html body .users-panel .sj-card:last-child,
html body .users-panel .up-card:last-child {
  border-bottom: 1px solid var(--c-border, #e5e7eb) !important;
  margin-bottom: 0 !important;
}

/* [v5.16.393] Neutral pill colours — no bright/pink tags or salary chips.
   NOTE: these two selectors are also dead (markup uses .sj-tag / .sj-tag.salary);
   left as-is because the current tag colours were not part of this request. */
html body .users-panel .job-tag {
  background: #f1f0f4 !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  border: 1px solid #e5e7eb !important;
}
html body .users-panel .job-salary {
  background: transparent !important;
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
  border: 1px solid #d1d5db !important;
  font-weight:500 !important;
}


/* =========================================================================
   [v5.16.412] Post text measure — cap the READING COLUMN, not the card
   -------------------------------------------------------------------------
   The card stays 746px, which is already the standard content width (Reddit
   sits at ~740-756; LinkedIn ~555, X ~600, so the card is if anything on the
   generous side). What suffers at that width is line length: 746px of 13px
   body text runs ~110 characters, against a comfortable band of 45-75.

   Capping the paragraph column at 620px brings that to ~92 characters. 620
   rather than the textbook ~490 (a true 75 chars) because a 490px column
   inside a 746px card leaves ~128px dead each side and reads as broken; 620
   is roughly where LinkedIn and X land in practice.

   Only the TEXT is capped. Media, video embeds and the engagement bar are
   outside .post-content-full and keep the full card width.
   ========================================================================= */
html body .post-content-full {
  max-width: 620px !important;
}


/* =========================================================================
   [v5.16.417] Feed suggestion blocks — white card per item, 1mm gaps
   -------------------------------------------------------------------------
   Moved here from an inline <style> in wp_footer. That block was at
   single-class specificity and lost to the theme's !important rules, so the
   cards rendered with no white background and the wrong spacing.

   EVERY ITEM is its own white card with the post card's border and radius —
   the heading, each profile, each job row. Gaps are var(--pl-gap) = 1mm, the
   same token used platform-wide since v5.16.377.
   ========================================================================= */
html body .pl-sug-head,
html body .pl-sug-card,
html body .pl-sug-job {
  background: var(--c-bg-white, #ffffff) !important;
  background-color: var(--c-bg-white, #ffffff) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: var(--pl-r-cards, var(--post-card-radius, 3px)) !important; /* [v5.16.423] follows the Cards corner slider */
  box-sizing: border-box !important;
  min-width: 0 !important;
}

/* 1mm between every item, vertically and across the grid. */
/* [v5.16.418] The heading gets its OWN rule carrying the background, border and
   radius, rather than relying on the shared group above. Reported as still
   rendering flat on the page colour while the profile cards beside it were
   correctly white — which means something was beating the grouped selector for
   this element specifically. `div.pl-sug-head` sits a step higher (0,1,3 vs
   0,1,2) and repeats the surface declarations so the group cannot be the weak
   link. */
html body div.pl-sug-head     { display: block !important;
                                background: var(--c-bg-white, #ffffff) !important;
                                background-color: var(--c-bg-white, #ffffff) !important;
                                background-image: none !important;
                                border: 1px solid var(--c-border, #e5e7eb) !important;
                                border-radius: var(--pl-r-cards, var(--post-card-radius, 3px)) !important; /* [v5.16.423] follows the Cards corner slider */
                                box-shadow: none !important;
                                width: auto !important;
                                margin: 0 0 var(--pl-gap, 4px) !important;
                                padding: 10px 12px !important;
                                font-size: var(--fs-sm, 12px) !important;
                                font-weight: 500 !important;
                                color: var(--c-text-primary, #111827) !important; }
html body .pl-sug-people      { display: grid !important;
                                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                                grid-auto-rows: 1fr !important;
                                gap: var(--pl-gap, 4px) !important;
                                margin: 0 0 var(--pl-gap, 4px) !important; }
/* [v5.16.419] PARITY WITH THE HEADING. The job rows and profile cards are given
   the same dedicated (0,1,3) surface rule that div.pl-sug-head received in
   v5.16.418, repeating background, border, radius and shadow rather than
   leaning on the grouped selector. The group resolves correctly on inspection,
   but the heading proved the group can be the weak link on a live install, so
   all three item types are now armoured identically. */
html body div.pl-sug-job      { background: var(--c-bg-white, #ffffff) !important;
                                background-color: var(--c-bg-white, #ffffff) !important;
                                background-image: none !important;
                                border: 1px solid var(--c-border, #e5e7eb) !important;
                                border-radius: var(--pl-r-cards, var(--post-card-radius, 3px)) !important; /* [v5.16.423] follows the Cards corner slider */
                                box-shadow: none !important;
                                margin: 0 0 var(--pl-gap, 4px) !important;
                                padding: 14px !important;
                                display: flex !important;
                                align-items: center !important;
                                gap: 12px !important; }
html body div.pl-sug-card     { background: var(--c-bg-white, #ffffff) !important;
                                background-color: var(--c-bg-white, #ffffff) !important;
                                background-image: none !important;
                                border: 1px solid var(--c-border, #e5e7eb) !important;
                                border-radius: var(--pl-r-cards, var(--post-card-radius, 3px)) !important; /* [v5.16.423] follows the Cards corner slider */
                                box-shadow: none !important;
                                padding: 16px 10px 14px !important;
                                text-align: center !important;
                                display: flex !important;
                                flex-direction: column !important; }

/* Profile card: flex column so the action row pins to the bottom and all six
   buttons line up whatever the name or designation does. */
html body .pl-sug-card        { padding: 16px 10px 14px !important;
                                text-align: center !important;
                                display: flex !important;
                                flex-direction: column !important; }
html body .pl-sug-card .pl-sug-link { flex: 1 1 auto; }
html body .pl-sug-job  .pl-sug-link { flex: 1 1 auto; min-width: 0; }
html body .pl-sug-link        { display: block; text-decoration: none; color: inherit; min-width: 0; }
html body .pl-sug-act         { margin-top: auto; padding-top: 12px;
                                display: flex; justify-content: center; }
html body .pl-sug-act-job     { margin-top: 0; padding-top: 0; flex: 0 0 auto; }
html body .pl-sug-av          { width: 56px; height: 56px;
                                border-radius: var(--pl-r-avatars, 50%);
                                object-fit: cover; display: block; margin: 0 auto 10px; }
html body .pl-sug-name,
html body .pl-sug-jtitle      { display: -webkit-box; -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3; font-size: var(--fs-sm, 12px);
                                font-weight: 500; color: var(--c-text-primary, #111827);
                                line-height: 1.35; white-space: normal;
                                overflow: hidden; text-overflow: ellipsis; }
html body .pl-sug-sub         { display: -webkit-box; -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3; font-size: var(--fs-2xs, 10px);
                                color: var(--c-text-light, #4b5563); margin-top: 4px;
                                line-height: 1.35; white-space: normal;
                                overflow: hidden; text-overflow: ellipsis; }
/* [v5.20.979] "N mutual connections" — count only, no names */
html body .pl-sug-mutual      { display: block; font-size: var(--fs-2xs, 10px);
                                color: var(--c-primary, #6d28d9); font-weight: 500;
                                margin-top: 3px; line-height: 1.35;
                                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Buttons: styled via the WRAPPER, because sendConnect() overwrites
   btn.className and clears btn.style. The tag names plus the :not() chain
   reach (0,4,4), outranking button-ink's (0,4,3) painter. */
html body div.pl-sug-card div.pl-sug-act > button:not(.ss-theme-dot):not(.bn-slider),
html body div.pl-sug-job  div.pl-sug-act > button:not(.ss-theme-dot):not(.bn-slider) {
  /* [v5.16.423] COMPACT, not full-bleed. width:100% capped at 160px filled
     the entire ~160px card, so Add read as a bar. The button now sizes to
     its label plus padding and centres via the wrapper's justify-content;
     min-width keeps Add and Apply the same visual weight. */
  width: auto !important;
  min-width: 76px !important;
  max-width: 160px !important;
  /* [v5.20.236] Was display:inline-block, which centres the BUTTON via the
     wrapper's justify-content but leaves the LABEL following inherited
     text-align (left on some cards) — so "Add" sat left-of-centre and not
     vertically middle. inline-flex + centring both axes fixes the text
     itself, independent of inheritance. This rule out-specifies the generic
     .pl-sug-act button rule below, so the fix must live HERE. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: var(--fs-2xs, 10px) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  padding: 6px 18px !important;
  border-radius: var(--pl-r-buttons, var(--pl-user-radius, 3px)) !important;
  background-color: var(--c-btn, #808080) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
}
html body div.pl-sug-card div.pl-sug-act > button:hover:not(.ss-theme-dot):not(.bn-slider),
html body div.pl-sug-job  div.pl-sug-act > button:hover:not(.ss-theme-dot):not(.bn-slider) {
  background-color: var(--c-btn-hover, #666666) !important;
}
/* [v5.16.425] Fallback rows: already-applied jobs shown to keep the slot
   full carry an inert grey outline marker, not a second Apply. Must beat the
   wrapper-keyed painter above at (0,4,4), so this sits at (0,5,4) via the
   extra class, and hover is pinned to the same look. */
html body div.pl-sug-job div.pl-sug-act > button.pl-sug-appliedmark,
html body div.pl-sug-job div.pl-sug-act > button.pl-sug-appliedmark:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--c-text-light, #4b5563) !important;
  -webkit-text-fill-color: var(--c-text-light, #4b5563) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  cursor: default !important;
}
/* [v5.16.425] Zero-jobs placeholder row keeps the card look; no action side. */
html body div.pl-sug-job.pl-sug-job-empty .pl-sug-link { text-align: left; }

/* =====================================================================
   [v5.17.63] MOBILE: content only — no header, no side columns.
   Per direction, phones show the main column and the four-button bottom
   nav (Feed / Jobs / Post / Logout) and nothing else. This lives in
   pl-gap-enforce.css because it is the LAST stylesheet enqueued, so it
   out-ranks the header and column rules in responsive.css and
   pl-refinements.css without needing a higher specificity war.
   ===================================================================== */
@media (max-width: 768px) {
  /* Header and its spacer/offsets. --header-height is zeroed so anything
     positioned against it (sticky panels, scroll anchors) follows. */
  html body .site-header,
  html body .info-banner,
  html body .info-banner-bottom { display: none !important; }
  html body { --header-height: 0px !important; padding-top: 0 !important; }
  html body .dashboard-center { padding-top: 0 !important; margin-top: 0 !important; }

  /* Side columns: left nav, people panel, right widgets. */
  html body .left-sidebar,
  html body .users-panel,
  html body .right-sidebar { display: none !important; }

  /* Collapse the grid to the single remaining track so the feed is not
     left sitting in a 4-column skeleton with three empty gaps. */
  html body .dashboard-grid,
  html body .dashboard-grid.full-width-mode {
    display: block !important;
    grid-template-columns: none !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .dashboard-grid > .center-content,
  html body .center-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Verification card follows the content, not the old 1091px cap. */
  html body #verify-banner { max-width: 100% !important; }

  /* [v5.17.70] Room for the permanent pill row (pill height + row padding),
     plus the safe area on notched devices. */
  html body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* =====================================================================
   [v5.17.70] LOGIN ON MOBILE — same design, correct size, centred.
   The desktop login is deliberately left EXACTLY as it is. The card is
   already proportional: style.css derives padding, label column, input
   height and every font from ONE variable, --base-width (300px). So the
   right fix on a phone is to re-scale that single variable and let the
   design follow, rather than restyling anything.
   css/responsive.css was instead RESTRUCTURING the card on mobile —
   forcing the grid to one column, widening it to 100%, rewrapping labels
   at a flat 11px and stacking the buttons — which is what made the phone
   version look unlike the desktop one. Those rules are reverted here
   (gap-enforce loads last).
   ===================================================================== */
@media (max-width: 768px) {
  html body { --base-width: clamp(260px, 88vw, 300px) !important; }

  /* Centred in the visible viewport. 100dvh (not vh) is what makes this
     hold on phones: vh counts the area BEHIND Safari's address bar, so a
     vh-centred card sits low and jumps as the bar hides on scroll. The vh
     line is the fallback for browsers without dvh. 78 rather than 100
     keeps the status / forgot-password blocks (positioned with the
     original margin-top:-170px) reading as attached to the card. */
  html body .login-wrapper-small {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 78vh !important;
    min-height: 78dvh !important;
    padding: 16px 0 !important;
    box-sizing: border-box !important;
  }

  /* Undo responsive.css's restructuring — keep the desktop layout. */
  html body .login-card-small {
    width: var(--base-width) !important;
    max-width: var(--base-width) !important;
  }
  html body .login-grid-small {
    grid-template-columns: var(--label-col-width) 1fr !important;
    column-gap: var(--dynamic-gap-x) !important;
    row-gap: var(--dynamic-gap-y) !important;
  }
  html body .login-grid-small label {
    white-space: nowrap !important;
    font-size: var(--dynamic-font-main) !important;
    margin-bottom: 0 !important;
  }
  html body .login-card-small .button-area-small {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  /* Size only: below 16px, iOS Safari zooms the page on focus and leaves
     the user zoomed over the password field. Height, borders and colours
     are untouched. */
  html body .login-grid-small input[type="text"],
  html body .login-grid-small input[type="password"] {
    font-size: 16px !important;
  }
}

/* ============================================================
   [v5.19.58] PLATFORM-WIDE page-title bars (.dir-header) match the
   Personal Information section bar exactly: same grey, 13px white
   text (weight 500), symmetric 6px/14px padding so the text is
   vertically CENTERED, rounded, no bottom border. Overrides the
   bundle's 18px dark-text underlined header AND any DB custom-css
   pill so there is exactly one consistent style everywhere.
   ============================================================ */
/* Selectors repeated (.dir-header.dir-header.dir-header) to outrank any
   DB custom-CSS injected later in the document with !important. Metrics match
   the measured Personal Information bar exactly: 13px / 500 / line-height
   1.15 (14.95px) / 27px fixed height / 13px white icon. */
html body .dir-header.dir-header.dir-header{background:#5f5d58!important;border:none!important;border-bottom:none!important;border-radius:var(--pl-r-cards,10px)!important;padding:6px 14px!important;margin:0 0 12px!important;display:flex!important;align-items:center!important;box-shadow:none!important;height:27px!important;min-height:27px!important;max-height:27px!important;box-sizing:border-box!important;overflow:hidden!important;font-size:13px!important;font-weight:500!important;line-height:1.15!important;color:#fff!important}
html body .dir-header.dir-header.dir-header::before,html body .dir-header.dir-header.dir-header::after{display:none!important;content:none!important}
html body .dir-header.dir-header.dir-header h2{height:27px!important;max-height:27px!important;align-self:center!important;font-size:13px!important;line-height:1.15!important;font-weight:500!important;color:#fff!important;margin:0!important;padding:0!important;letter-spacing:0!important;background:transparent!important;border:none!important;box-shadow:none!important;display:flex!important;align-items:center!important;gap:6px!important}
html body .dir-header.dir-header.dir-header h2 svg{color:#fff!important;width:11px!important;height:11px!important;flex-shrink:0!important}
/* [v5.19.61] ID-specificity duplicates: #main-content wraps every dashboard
   tab, so these outrank DB custom-CSS that uses page IDs. The h2 physically
   FILLS the 27px bar (height:100% + flex centring), so the text cannot sit
   low no matter what line-height or padding another rule tries to apply. */
html body #main-content .dir-header.dir-header{background:#5f5d58!important;border:none!important;border-bottom:none!important;border-radius:var(--pl-r-cards,10px)!important;padding:0 14px!important;margin:0 0 12px!important;display:flex!important;align-items:center!important;box-shadow:none!important;height:27px!important;min-height:27px!important;max-height:27px!important;box-sizing:border-box!important;overflow:hidden!important;font-size:13px!important;font-weight:500!important;line-height:1.15!important;color:#fff!important}
html body #main-content .dir-header.dir-header h2{height:27px!important;max-height:27px!important;align-self:center!important;display:flex!important;align-items:center!important;gap:6px!important;font-size:13px!important;font-weight:500!important;line-height:1.15!important;color:#fff!important;margin:0!important;padding:0!important;letter-spacing:0!important;background:transparent!important;border:none!important;box-shadow:none!important;transform:none!important}
html body #main-content .dir-header.dir-header h2 svg{color:#fff!important;width:11px!important;height:11px!important;flex-shrink:0!important;margin:0!important}



/* ============================================================
   [v5.19.65] LEFT SIDEBAR: the items INSIDE each section
   (Personal Info, Experience, Technical Skills, University, …)
   use the Personal Information bar format: grey #5f5d58, white
   13px/500 text, 27px pinned height, rounded, centred, 11px
   icons. The section headers (PROFILE, NETWORK, …) are reverted
   to their original style — 5.19.64 undone.
   ============================================================ */
/* Resting items are PLAIN (transparent, dark text); only the hovered item and
   the selected (active) item light up as the grey bar. */
html body .left-sidebar .nav-submenu li > a{background:transparent!important;color:var(--c-text-mid,#4b5563)!important;-webkit-text-fill-color:var(--c-text-mid,#4b5563)!important;border:none!important;border-radius:var(--pl-r-cards,10px)!important;height:27px!important;min-height:27px!important;max-height:27px!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:6px!important;padding:0 14px!important;font-size:13px!important;font-weight:500!important;line-height:1.15!important;margin:2px 0!important;overflow:hidden!important;box-shadow:none!important;white-space:nowrap!important;text-overflow:ellipsis!important}
html body .left-sidebar .nav-submenu li > a:hover{background:#5f5d58!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .left-sidebar .nav-submenu li.active > a{background:#5f5d58!important;color:#fff!important;-webkit-text-fill-color:#fff!important;font-weight:600!important}
html body .left-sidebar .nav-submenu li > a svg{color:currentColor!important;width:11px!important;height:11px!important;flex-shrink:0!important}

/* ============================================================
   [v5.19.71] Suggestion-card connect buttons: ONE fixed shape for
   every state. sendConnect() rewrites the button's class (to
   up-btn/pending-btn) and clears its style on click, so shape was
   changing between Add / Pending / +. Styling is keyed to the
   WRAPPER (.pl-sug-act), which survives the rewrite: any button
   inside it gets the same compact pill — 22px tall (~1mm of space
   above and below the text), centred in the card.
   ============================================================ */
html body .pl-sug-act{display:flex!important;justify-content:center!important;margin-top:6px!important}
html body .pl-sug-act button{height:22px!important;min-height:22px!important;max-height:22px!important;padding:0 16px!important;min-width:78px!important;width:auto!important;font-size:12px!important;font-weight:500!important;line-height:1!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;margin:0!important;white-space:nowrap!important}

/* ============================================================
   [v5.19.74, corrected in v5.19.77] Dashboard columns: kill the DB
   custom-CSS bottom-alignment (align-self:end) that sank short pages
   (Privacy, Download My Data) to the bottom of the row. v5.19.74 used
   align-self:START, which un-stretched the columns — a grid item that
   no longer stretches sizes to its content, grows past the
   overflow:hidden grid, and its own overflow-y:auto never triggers.
   That silently killed the centre column's scrolling (the ONLY
   scroller in this app-shell layout — body is 100vh/overflow:hidden).
   STRETCH (the grid default) fixes the same top-gap bug — the column
   fills the row, content sits at its top — while keeping the column
   height-constrained so internal scrolling works. Selectors doubled
   so later-injected DB custom-CSS cannot win ties.
   ============================================================ */
html body .dashboard-grid{align-items:stretch!important}
html body .dashboard-grid > .left-sidebar.left-sidebar,
html body .dashboard-grid > .center-content.center-content,
html body .dashboard-grid > .right-sidebar.right-sidebar,
html body .dashboard-grid > .users-panel.users-panel{align-self:stretch!important}

/* ============================================================
   [v5.19.75 REVERSED in v5.19.77] The centre column IS the scroller.
   v5.19.75 forced .center-content to overflow:visible on the theory
   that the document scrolls — but style.css builds an app-shell:
   body{height:100vh;overflow:hidden}, .dashboard-wrapper is
   position:fixed/overflow:hidden, .dashboard-grid is
   overflow:hidden/max-height:100%. The document CANNOT scroll on
   desktop, so removing the column's scroll left tall pages
   (Download My Data, Privacy) hard-clipped with no way down.
   Restored here per the style.css design (overflow-y:auto), with
   doubled specificity + !important so DB custom-CSS cannot flip it
   again in either direction. Grid keeps its theme-designed
   overflow:hidden/max-height:100% frame.
   ============================================================ */
html body .dashboard-grid > .center-content.center-content{overflow-y:auto!important;overflow-x:hidden!important;height:auto!important;max-height:100%!important;min-height:0!important}
html body .dashboard-grid.dashboard-grid{max-height:100%!important;overflow:hidden!important}

/* ============================================================
   [v5.19.77] VISIBLE scrollbar on the centre column. style.css hides
   it (scrollbar-width:none + zero-width webkit rules), which is what
   made scrollable pages "look frozen" — the real complaint behind
   v5.19.76's document-scrollbar restoration (that scrollbar can never
   appear on desktop because the body never overflows; the rules are
   kept for mobile <992px where the body does scroll). This is the
   app-shell equivalent: same 12px theme styling (#c9c6bf thumb on
   #f1f0ec track), on the element that actually scrolls.
   ============================================================ */
html body .dashboard-grid > .center-content.center-content{scrollbar-width:auto!important;scrollbar-color:#c9c6bf #f1f0ec!important;-ms-overflow-style:auto!important}
html body .dashboard-grid > .center-content.center-content::-webkit-scrollbar{width:12px!important;height:12px!important;display:block!important}
html body .dashboard-grid > .center-content.center-content::-webkit-scrollbar-track{display:block!important;background:#f1f0ec!important}
html body .dashboard-grid > .center-content.center-content::-webkit-scrollbar-thumb{display:block!important;background:#c9c6bf!important;border-radius:8px!important;border:3px solid #f1f0ec!important}
html body .dashboard-grid > .center-content.center-content::-webkit-scrollbar-thumb:hover{background:#a8a49b!important}

/* ============================================================
   [v5.19.78] ID-SPECIFICITY duplicates for the two rules above.
   The 5.19.77 selectors are all-class — html body .dashboard-grid >
   .center-content.center-content = (0,3,2). The DB custom-CSS layer
   writes page-ID selectors (the same reason 5.19.61 exists a few
   hundred lines up), and ANY id beats ANY number of classes: a rule
   like #main-content .center-content{align-self:end} scores (1,2,0)
   and still wins, !important on both sides or not. That is why the
   Download My Data / Privacy top gap survived 5.19.74 and 5.19.77 —
   the column is still being bottom-aligned in the grid row, so short
   content sinks and leaves the blank band above the page-title bar.
   #main-content is .dashboard-center, the wrapper around the grid on
   EVERY dashboard tab, so prefixing it gives (1,3,2) — enough to
   outrank the DB rule while changing nothing about which tabs match.
   Repeated for the scroll frame so alignment and scrolling cannot be
   won separately and leave the column un-stretched but scrollable
   (or vice versa).
   ============================================================ */
html body #main-content .dashboard-grid.dashboard-grid{align-items:stretch!important;max-height:100%!important;overflow:hidden!important}
html body #main-content .dashboard-grid > .left-sidebar.left-sidebar,
html body #main-content .dashboard-grid > .center-content.center-content,
html body #main-content .dashboard-grid > .right-sidebar.right-sidebar,
html body #main-content .dashboard-grid > .users-panel.users-panel{align-self:stretch!important}
html body #main-content .dashboard-grid > .center-content.center-content{overflow-y:auto!important;overflow-x:hidden!important;height:auto!important;max-height:100%!important;min-height:0!important;scrollbar-width:auto!important;scrollbar-color:#c9c6bf #f1f0ec!important;-ms-overflow-style:auto!important}
html body #main-content .dashboard-grid > .center-content.center-content::-webkit-scrollbar{width:12px!important;height:12px!important;display:block!important}
html body #main-content .dashboard-grid > .center-content.center-content::-webkit-scrollbar-track{display:block!important;background:#f1f0ec!important}
html body #main-content .dashboard-grid > .center-content.center-content::-webkit-scrollbar-thumb{display:block!important;background:#c9c6bf!important;border-radius:8px!important;border:3px solid #f1f0ec!important}
html body #main-content .dashboard-grid > .center-content.center-content::-webkit-scrollbar-thumb:hover{background:#a8a49b!important}

/* [v5.19.78] Belt: the centre column's content starts at the TOP of the
   column on every tab, exactly as it does on Feed / Connections / Jobs.
   Even if some future rule un-stretches the column again, a flow-root
   with no auto top margin cannot open a band above the first .dir-header. */
html body #main-content .dashboard-grid > .center-content.center-content > *:first-child{margin-top:0!important}

/* ============================================================
   [v5.19.80] The page-title bar starts at the TOP of the column on
   EVERY tab — including the tabs that wrap their content.
   Structural asymmetry found while tracing the Privacy Settings band:

     Download My Data   .center-content > .dir-header          (direct)
     Privacy Settings   .center-content > #privacy-page > .dir-header

   The 5.19.78 belt only zeroed the column's first child, so on the
   direct pages it hit the title bar (probe: 4px from the top, clean)
   and on the wrapped pages it hit the WRAPPER, leaving any top
   padding/margin ON that wrapper untouched — a tall blank band above
   the title bar. #privacy-page is an ID, which is the selector shape
   the DB custom-CSS layer keeps winning with here (align-self:end in
   5.19.74, overflow-y:auto in 5.19.75).

   :has() scopes this to exactly the wrapper that OPENS with a page
   title bar, so pages that intentionally lead with a hero, card or
   spacer are untouched — only the "title bar should be flush with
   the top of the column" case is enforced.
   ============================================================ */
html body #main-content .dashboard-grid > .center-content.center-content > *:has(> .dir-header.pl-page-head:first-child){padding-top:0!important;margin-top:0!important}
html body #main-content .dashboard-grid > .center-content.center-content .dir-header.pl-page-head:first-child{margin-top:0!important}

/* ============================================================
   [v5.19.76] RESTORE THE PAGE SCROLLBAR. pl-bundle.min.css line 36
   hides scrollbars on EVERY element (bare ::-webkit-scrollbar
   {display:none}) — including the document itself, so the page has
   no visible/draggable scrollbar in Chrome/Edge and looks frozen
   even though wheel scrolling works. The page scrollbar is brought
   back here (styled to match the theme); inner lists that hide
   their scrollbars on purpose (stories, tab strips, Jobs panel)
   are unaffected because their own rules target them directly.
   ============================================================ */
html::-webkit-scrollbar{width:12px!important;height:12px!important;display:block!important}
html::-webkit-scrollbar-track{display:block!important;background:#f1f0ec!important}
html::-webkit-scrollbar-thumb{display:block!important;background:#c9c6bf!important;border-radius:8px!important;border:3px solid #f1f0ec!important}
html::-webkit-scrollbar-thumb:hover{background:#a8a49b!important}
body::-webkit-scrollbar{width:12px!important;height:12px!important;display:block!important}
body::-webkit-scrollbar-track{display:block!important;background:#f1f0ec!important}
body::-webkit-scrollbar-thumb{display:block!important;background:#c9c6bf!important;border-radius:8px!important;border:3px solid #f1f0ec!important}
html{scrollbar-width:auto!important;scrollbar-color:#c9c6bf #f1f0ec!important}

/* ============================================================
   [v5.19.81] Communities search box: icon must never sit under the
   text. The layout is an absolutely-positioned magnifier at left:11px
   clearing a 36px left padding on the input — which works only for as
   long as nothing touches that padding. Screenshot shows the icon
   overlapping "Search groups...", so the padding is being reset by a
   later/stronger rule (the DB custom-CSS layer reaches these inputs
   the same way it reached .center-content in 5.19.74/75).
   Re-asserted here with the #main-content prefix so an ID-scoped rule
   cannot flatten it, and the icon is given a fixed 15px box plus
   pointer-events:none so clicking it still focuses the field.
   Applies to every Communities tab (groups, channels, articles,
   papers, events), which all share .comm-sbox.
   ============================================================ */
html body #main-content .comm-sbox{position:relative!important}
html body #main-content .comm-sbox input[type="text"]{padding-left:38px!important;text-align:left!important;letter-spacing:normal!important;text-indent:0!important}
html body #main-content .comm-sbox > svg{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;width:15px!important;height:15px!important;pointer-events:none!important;z-index:2!important}

/* ============================================================
   [v5.19.86] The "white band above the page title when scrolled to
   the top" — reported repeatedly and NOT fixed by 5.19.79/80, which
   addressed the career-banner bars and the header-wrapper gaps but
   never this. Traced to the app-shell banner row.

   The STANDARD banner is --top-banner-height (100px) via style.css
   .info-banner{height/min-height/max-height}. But the animated SCENE
   banners (Forest, Aquarium, CityNight, Fishing, Rainy) are emitted
   with an inline `padding:0` wrapper and NO height, and their <canvas>
   is height:auto — so the canvas falls back to its intrinsic 150px
   while the scene only paints grass/trees along the BOTTOM edge. The
   result is ~150px of banner with a thin scene strip at the bottom and
   a tall WHITE area above it: exactly the band the user circled, on
   every tab, most obvious on pages you scroll up into.

   Fix: pin the scene-banner containers (any .info-banner that wraps a
   full-bleed <canvas>) and their canvas to the standard banner height
   so the scene fills the row edge-to-edge with no white above it.
   Selectors doubled + !important so DB custom-CSS cannot reintroduce
   the intrinsic-height fallback.
   ============================================================ */
html body .banner-row .info-banner:has(> canvas){
  height: var(--top-banner-height, 100px) !important;
  min-height: var(--top-banner-height, 100px) !important;
  max-height: var(--top-banner-height, 100px) !important;
  overflow: hidden !important;
}
html body .banner-row .info-banner > canvas{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* [v5.19.88] (reserved — see scroll-state probe; fix applied once the
   post-scroll measurement identifies the exact element.) */

/* ============================================================
   [v5.19.91, hardened in v5.19.92] Kill the injected 212px top margin
   on the page-title bar. CSS alone could not be trusted to win because
   the source rule is emitted at runtime and its exact selector/origin
   is not in the theme tree — so this is now belt AND braces:
   (1) ID-specificity CSS below, and (2) a JS pass (see page-dashboard)
   that strips any residual top margin/padding directly off the bar
   after load and on tab change. Between them the bar is flush on every
   tab, at rest and after scrolling, regardless of what the data layer
   injects.
   ============================================================ */
html body #main-content .dir-header.pl-page-head,
html body #main-content .dir-header.pl-cv-head,
html body #main-content .center-content .dir-header.pl-page-head,
html body #main-content .center-content .dir-header.pl-cv-head,
html body #main-content .jobs-page > .dir-header.pl-page-head,
html body #main-content .cr-page .dir-header.pl-page-head,
html body #main-content .feed-container > .dir-header.pl-page-head,
html body #main-content #privacy-page .dir-header.pl-page-head,
html body #main-content .center-content > *:first-child,
html body #main-content .center-content > *:first-child > .dir-header:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ============================================================
   ---- [v5.20.46] NO GLOW ON BUTTONS, TAGS OR CHIPS ----

   Buttons and tags were picking up COLOURED shadows on hover —
   rgba(118,115,108,.3), rgba(95,93,88,0.35), rgba(16,185,129,0.4) on
   the save button — spread over 12-14px. A tinted shadow at that
   radius does not read as depth, it reads as the control emitting
   light. There were 20+ of them across style.css, pl-bundle.min.css,
   visual-polish.css, pl-follow-system.css and this file, added a few
   at a time over many releases, so the effect accumulated rather than
   being chosen.

   Killed here rather than edited at each site, for two reasons. The
   declarations are spread over five stylesheets and most carry
   !important, so removing them individually means five files of risk
   for a purely visual change. And this file loads last, so one rule
   at matching specificity settles it wherever it came from.

   text-shadow and filter go too: a text-shadow on a label is the same
   glow one layer in, and filter:drop-shadow reproduces it in a
   property that box-shadow:none does not reach.

   WHAT IS DELIBERATELY LEFT ALONE:
     - :focus-visible. That ring is not decoration, it is how a
       keyboard user knows where they are. Excluding it is why the
       selectors below carry :not(:focus-visible).
     - transform lifts. A 1px rise on hover is movement, not glow, and
       the request was about glow.
     - shadows on CARDS and PANELS. Those are surfaces at a different
       elevation and are meant to sit above the page; only controls
       are covered here.
   ============================================================ */
html body button:not(#plm-emojis button):not(.bn-slider):not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(:focus-visible),
html body button:not(#plm-emojis button):not(.bn-slider):not([type="range"]):not([type="checkbox"]):not([type="radio"]):hover,
html body button:not(#plm-emojis button):not(.bn-slider):not([type="range"]):not([type="checkbox"]):not([type="radio"]):active,
html body input[type="submit"]:not(:focus-visible),
html body input[type="submit"]:hover,
html body input[type="button"]:not(:focus-visible),
html body input[type="button"]:hover,
html body a.btn:not(:focus-visible), html body a.btn:hover,
html body a.cbtn:not(:focus-visible), html body a.cbtn:hover,
html body a.job-btn:not(:focus-visible), html body a.job-btn:hover,
html body .header-button:not(:focus-visible), html body .header-button:hover,
html body .conn-btn:not(:focus-visible), html body .conn-btn:hover,
html body .engagement-btn:not(:focus-visible), html body .engagement-btn:hover,
html body .cvs-btn:not(:focus-visible), html body .cvs-btn:hover,
html body .cvs-btn-primary:hover, html body .cvs-btn-outline:hover,
html body .pl-follow-btn:not(:focus-visible), html body .pl-follow-btn:hover,
html body .vp-conn-btn:not(:focus-visible), html body .vp-conn-btn:hover,
html body .save-btn:hover, html body .btn-save:hover,
html body .edit-save-btn:hover, html body .submit-post-btn:hover,
html body .dir-toggle-btn, html body .dir-toggle-btn.active,
html body .skill-tag, html body .status-badge, html body .cn-tag,
html body .gv2-cbtn, html body .gv2-cbtn:hover,
html body .pl-feed-action, html body .pl-feed-action:hover,
html body .up-tog-label, html body .conn-tab, html body .jobs-tab,
html body .reg-tab, html body .pj-tab, html body .eng-tab, html body .cpv-tab,
/* Compound-class variants listed explicitly. `html body .vp-conn-btn:hover`
   is (0,2,2); visual-polish.css writes `.vp-conn-btn.connect:hover` at (0,3,0)
   with !important, which WINS on specificity, so the shorter selector above
   would have left that one control still glowing. Same reason for the active
   tab states. */
html body .vp-conn-btn.connect:hover,
html body .vp-conn-btn.connect,
html body .conn-tab.active, html body .jobs-tab.active,
html body .reg-tab.active, html body .pj-tab.active,
html body .eng-tab.active, html body .cpv-tab.active {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* ============================================================
   ---- [v5.20.55] FOOTER ALIGNED WITH THE HEADER ----

   The two bars were laid out by different rules, so nothing in
   one lined up with anything in the other.

   The header uses container-matched gutters
   (pl-refinements.css:3324): padding-left/right of
   calc((100% - container)/2), so its buttons sit exactly on the
   content column's edge. The footer instead used a flat 6px
   inset from footer.php, so its chip floated to a position
   unrelated to anything above it.

   The footer now takes the SAME gutter calculation, so its
   content shares the header's left and right edges. The 6px
   bottom inset and the pill radius are kept — that is the
   floating-bar look, and it was not what was misaligned.

   The chip itself is given the header button's geometry
   (pl-refinements.css:160): same 2px/9px padding, same 12px
   font-size, same 1px border, same corner source. It reads as
   the same family of control rather than a different one.
   ============================================================ */
/* [v5.20.58] FULL-WIDTH footer bar, first sidebar to fourth.
   5.20.55 gave the footer the header's container-matched gutters, which
   pulled its content in to the centre column's width — so on a wide screen
   the copyright floated in the middle with empty bar either side. Those
   gutters are dropped here: the header needs them because its buttons must
   line up with the content column, but the footer holds one centred line and
   nothing to align to, so the only thing they achieved was making it look
   short.
   The chip now spans the bar. Its border and pill radius go with it — at full
   width they were drawing a second outline a few pixels inside the footer's
   own, which reads as a box in a box rather than one bar. */
html body .site-footer {
  padding-left: 10px !important;
  padding-right: 10px !important;
  justify-content: center !important;
}
html body .site-footer .footer-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
/* [v5.20.56] `background: transparent` was removed from the block above. It
   set the chip's fill here, in the geometry rule, which meant the Button
   colour emitted at wp_head 102 had a same-specificity !important competitor
   and the chip stayed empty while the header buttons went dark. Colour belongs
   to the colour layer; this rule now only describes shape. */ 

/* ============================================================
   ---- [v5.20.66] LOGO: NO CHIP, LARGER MARK ----

   The logo was rendering on a white rounded tile. Not its own
   styling — pl-refinements.css groups .site-logo into the same
   "chip surface" rule as .header-button and .hamburger-btn, in
   two places (lines 1728 and 1780), giving it a white fill, a
   border, a radius, a shadow and a backdrop blur.

   That grouping is right for the buttons and wrong for the
   logo: a button needs a surface to look pressable, a wordmark
   does not, and the tile made the mark look like a favicon
   pasted onto the bar.

   Unset here rather than by removing .site-logo from those two
   selector lists. Both carry !important and the second is
   fixing a real problem for the buttons (content ghosting
   through while scrolling), so editing the lists risks the
   buttons to change the logo. This file loads last, so one rule
   at matching specificity settles it.

   SIZE, and the arithmetic matters here because the base value
   is misleading. The rule reads 40px, but it is
   calc(40px * var(--hdr-scale)) and --hdr-scale is 0.65, so the
   mark actually renders at 26px — inside a bar that is 36px
   tall, not the 60px the CSS suggests at a glance.

   Raised to 44px, which is 28.6px rendered: a visible step up
   from 26px with ~3.7px of clearance either side. 48px was
   tried first and computes to 31.2px, leaving 2.4px — the mark
   touches the bar edges and reads as cramped rather than large.

   The compact-header override at style.css:176 is a FLAT 28px
   with no scale applied, so it is raised to 30px rather than in
   proportion. Matching the desktop 44px there would have put a
   44px mark in the compact bar and burst it.
   ============================================================ */
html body .site-header .site-logo,
html body .site-header .site-logo a {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}
/* [v5.20.67] 1.25x again: 44px -> 55px base, which is 35.75px rendered.
   THE BAR HAD TO GROW WITH IT. At 36px tall the header left 0.125px of
   clearance around a 35.75px mark — it fits arithmetically and looks like it
   is jammed against both edges. --header-height goes 36px -> 40px, which is
   the height the compact bar already uses at 480px, so this is matching an
   existing value rather than inventing one. Clearance becomes 2.1px.
   Nothing else needs adjusting for that: .dashboard-wrapper is positioned
   with top:var(--header-height), so the content column follows the bar. */
:root { --header-height: 40px; }
html body .site-header .logo-img {
  height: calc(55px * var(--hdr-scale, 1)) !important;
  width: auto !important;
}
/* Compact bar is 40px (style.css:173) and its logo rule is a FLAT 28px with no
   scale, so 1.25x of that is 35px — 2.5px clearance, the same feel as desktop.
   This selector outranks the theme's own at both breakpoints, so it is the one
   value in play. */
@media (max-width: 900px) {
  html body .site-header .logo-img { height: 35px !important; }
}

/* ============================================================
   [v5.20.102] CENTRE THE TEXT IN BUTTONS, TABS, TAGS & CHIPS.
   The theme's design language already centres control text (dropdown
   items, the page-title bars and the suggestion buttons are all
   centred), but several controls set align-items:center (vertical)
   WITHOUT justify-content:center — so on any control wider than its
   label the text sat left instead of dead-centre. This completes the
   centring on both axes.

   IMPORTANT: only ALIGNMENT is set here, never `display`. Most of these
   are already inline-flex (style.css:33 / .header-button etc.), so
   justify-content:center takes effect; the rest fall back to
   text-align:center. Not forcing display means hidden buttons
   (display:none) stay hidden and block / full-width layouts are
   untouched. Inputs, range sliders and the emoji grid are excluded —
   they are not text buttons.
   ============================================================ */
html body button:not(#plm-emojis button):not(.bn-slider):not(.pr-seg-btn):not(.comment-action-btn):not(.comment-actions-toggle):not(.engagement-btn):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
html body input[type="submit"],
html body input[type="button"],
html body a.btn,  html body .btn,
html body a.cbtn, html body .cbtn,
html body a.job-btn, html body .job-btn,
html body .conn-btn, html body .engagement-btn, html body .header-button,
html body .cvs-btn, html body .cvs-btn-primary, html body .cvs-btn-outline,
html body .pl-follow-btn, html body .vp-conn-btn, html body .vp-sec-btn,
html body .conn-tab, html body .jobs-tab, html body .reg-tab, html body .pj-tab,
html body .eng-tab, html body .cpv-tab, html body .nf-tab,
html body .padmin-btn, html body .dir-clear-btn, html body .dir-toggle-btn,
html body .up-tog-label, html body .sv-footer-btn,
html body button[name^="save_"] {
  justify-content: center !important;
  text-align: center !important;
}

/* Tags / chips / badges: short labels — keep their text centred. No
   display change (so conditionally-hidden tags stay hidden); their own
   symmetric padding already centres vertically, this pins horizontal. */
html body .job-tag, html body .js-tag, html body .skill-tag, html body .dir-tag,
html body .cpv-tag, html body .cs-pill, html body .cn-tag, html body .rc-chip,
html body .pa-chip, html body .status-badge, html body .job-status-badge,
html body .job-source-badge,
html body [class$="-tag"]:not([class*="tags"]),
html body [class*="-chip"] {
  text-align: center !important;
}

/* ============================================================
   [v5.20.114] Company profile header rework. All colours come from
   the theme's Site Settings variables (--c-primary / --c-border /
   --c-bg-white / --c-bg-muted), so the back button and header card
   follow whatever the site theme is set to.
   ============================================================ */

/* 1. "Back to companies" — now a real button (was a plain text link). */
html body .cpv-back{
  /* [v5.20.125] same style as the Site Settings buttons — driven by the Button
     colour pickers (--pl-btn-bg / --pl-btn-text) so it follows Site Settings. */
  background: var(--pl-btn-bg, #f7f8fa) !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  margin: 0 0 14px 0 !important;      /* [v5.20.135] alignment handled by JS (position shift) — inline-flex ignores negative margin reliably */
  transition: filter .15s !important;
}
html body .cpv-back:hover{
  filter: brightness(0.96) !important;
  opacity: 1 !important;
}

/* 2. Company header card — themed, rounded card look (colours already
   from Site Settings vars; add the card radius so it reads as a card). */
html body .cpv-header{
  border-radius: 12px !important;
}

/* 3. Balanced spacing between the card and the Glance/Jobs/News tabs. */
html body .cpv-header{ margin-bottom: 16px !important; }
html body .cpv-tabs{ margin-top: 0 !important; }

/* 4. Logo — fit close to the top and bottom of its box with a small,
   even inset so it never touches/overlaps the border. cover fills the
   frame (removes the letterbox gap); the 3px padding is the breathing
   room, shown in the themed background. */
html body .cpv-logo{
  object-fit: cover !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  background: var(--c-bg-white,#fff) !important;
  border-radius: 10px !important;
}
html body .cpv-logo-ph{
  border-radius: 10px !important;
}

/* ============================================================
   [v5.20.116] Company contact + facts consolidated into the header
   card. Contact items grouped tight on the LEFT (never stretched to
   the page edge); facts as a compact grid below.
   ============================================================ */
html body .cpv-header-contact{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 8px 16px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--c-border,#e5e7eb) !important;
}
html body .cpv-hc{
  font-size: 12px !important;
  color: #4b5563 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
html body .cpv-hc a{ color: var(--c-primary,#5f5d58) !important; text-decoration: none !important; font-weight: 500 !important; }
html body .cpv-hc a:hover{ text-decoration: underline !important; }

html body .cpv-header-facts{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;   /* [v5.20.118] back to the v5.20.116 grid */
  gap: 12px !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--c-border,#e5e7eb) !important;
}
html body .cpv-hf{ display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
html body .cpv-hf-l{ font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: #6b7280 !important; font-weight: 500 !important; }
html body .cpv-hf-v{ font-size: 13px !important; color: var(--c-text-primary,#1a1a1a) !important; font-weight: 500 !important; line-height: 1.5 !important; }
@media (max-width: 560px){ html body .cpv-header-facts{ grid-template-columns: 1fr 1fr !important; } }

/* ============================================================
   [v5.20.120] Company profile tabs: centre them, and drop the
   background box on the count badge (e.g. "Jobs 0").
   [v5.20.121] Centre robustly — full width, no full-width underline
   under the centred pills, small gap between them.
   ============================================================ */
html body .cpv-tabs{
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;   /* [v5.20.124] left-aligned */
  align-items: center !important;
  gap: 8px !important;
  border-bottom: none !important;
  padding: 14px 0 14px 20px !important;      /* [v5.20.124] left pad matches the card/panel content so pills line up with "About Us" */
  margin: 0 !important;
}
html body .cpv-header{ margin-bottom: 0 !important; }   /* [v5.20.122] the tabs' own padding provides the gap now, so the pills sit centred in the band */
html body .cpv-tab-badge{
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  padding: 0 2px !important;
  min-width: 0 !important;
}

/* ============================================================
   [v5.20.126] Button SHAPE, controlled from Site Settings via
   --pl-btn-radius (Pill 999px / Rounded 10px / Square 3px).
   Applies to the themed "Site Settings" buttons and the company
   profile buttons. Default 999px keeps the current pill look.
   ============================================================ */
html body .cvs-btn, html body .cvs-btn-primary, html body .cvs-btn-outline,
html body .engagement-btn, html body .pj-import-template-btn,
html body .padmin-btn, html body .dir-clear-btn,
html body button[name^="save_"],
html body .cpv-back, html body .cpv-tab, html body .cpv-follow,
html body .cpv-job-btn, html body .submit-post-btn {
  border-radius: var(--pl-btn-radius, 999px) !important;
}

/* ============================================================
   [v5.20.127] Follow / Following button matches the other themed
   buttons — Site Settings colour (--pl-btn-bg/--pl-btn-text), Site
   Settings shape (--pl-btn-radius), and the same size as the Back
   button / tabs. Overrides the standalone purple-outline style.
   ============================================================ */
html body .cpv-header-actions .pl-follow-btn,
html body .pl-follow-btn {
  background: var(--pl-btn-bg, #f7f8fa) !important;
  background-image: none !important;
  color: var(--pl-btn-text, #111827) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #111827) !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--pl-btn-radius, 999px) !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* ============================================================
   [v5.20.128] Uniform SIZE for every company-profile button so
   Back, Following and the Glance/Jobs/News tabs all match: same
   padding, font-size, weight and line-height. (Widths still vary
   with the label length; heights are identical.)
   ============================================================ */
html body .cpv-back,
html body .cpv-header-actions .pl-follow-btn,
html body .pl-follow-btn,
html body .cpv-tabs .cpv-tab,
html body .cpv-tab {
  padding: 4px 14px !important;   /* [v5.20.132] shorter buttons (was 8px 16px) */
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

/* ============================================================
   [v5.20.129] Equalise button height: .cpv-tab had no border while
   .cpv-back / .pl-follow-btn carry a 1px border, making them ~2px
   taller. Give the tabs a 1px TRANSPARENT border (no visible line)
   so all three buttons compute to the exact same height/width.
   ============================================================ */
html body .cpv-tabs .cpv-tab,
html body .cpv-tab {
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
}
html body .cpv-back,
html body .pl-follow-btn {
  box-sizing: border-box !important;
}

/* ============================================================
   [v5.20.130] Radius mismatch fix. The tabs & Follow button get their
   dark-pill look (incl. a 15px radius) from custom CSS saved in Site
   Settings, which out-specified the shape rule — so Back was 999px but
   Glance/Following were 15px. Higher-specificity override pulls all
   three onto --pl-btn-radius so they share one shape and follow the
   Pill / Rounded / Square control together. (Dark background from the
   custom CSS is left as-is; only the radius is unified.)
   ============================================================ */
html body .cpv-page .cpv-back,
html body .cpv-page .cpv-tabs .cpv-tab,
html body .cpv-page .cpv-header-actions .pl-follow-btn,
html body .cpv-page .pl-follow-btn {
  border-radius: var(--pl-btn-radius, 999px) !important;
}

/* ============================================================
   [v5.20.141] People/Jobs toggle (.up-toggle-wrap) now follows the
   Site Settings BUTTON controls (colour + shape), like Back / Following /
   the Glance-Jobs-News tabs. It was the odd one out: the active pill
   (.up-tog-slider) used --c-primary + --pl-r-buttons and the active label
   was hardcoded #fff, so the Button colour/shape controls never reached it.
   Point the active pill at --pl-btn-bg / --pl-btn-radius and the active text
   at --pl-btn-text; keep the inactive labels transparent + muted so the
   active state stays distinct once the pill takes the button colour.
   ============================================================ */
html body .up-toggle-wrap .up-tog-label {
  background: transparent !important;
  background-color: transparent !important;
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
  border: 0 !important;
}
html body .up-toggle-wrap .up-tog-label.active {
  color: var(--pl-btn-text, #fff) !important;
  -webkit-text-fill-color: var(--pl-btn-text, #fff) !important;
}
html body .up-toggle-wrap .up-tog-slider {
  background: var(--pl-btn-bg, var(--c-primary, #5f5d58)) !important;
  border-radius: var(--pl-btn-radius, var(--pl-r-buttons,var(--pl-btn-radius,999px))) !important;
}

/* ============================================================
   [v5.20.142] Match the People/Jobs toggle TEXT to the profile buttons
   (.cpv-back / .cpv-tab / .pl-follow-btn). Those are 13px / weight 500 /
   line-height 1.2 / no tracking; the toggle labels were 15px / .02em /
   1.35, so "People / Jobs" looked bigger and letter-spaced next to
   "Back to Companies". Same font-family (--font-main) already. Font only —
   colour/shape still come from the Button controls (v5.20.141).
   ============================================================ */
html body .up-toggle-wrap .up-tog-label,
html body .up-tog-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  font-family: var(--font-main, 'Roboto', sans-serif) !important;
}

/* ============================================================
   [v5.20.146] Banner->content gap = 2.5mm, set through the system's OWN single
   source of truth. header.php alignGap() is the "banner-gap authority": it pins
   ALL FOUR columns' first elements to banner-bottom + var(--pl-banner-gap)
   (default 4px), and it runs on observers, so it OVERRODE the banner margin
   (v5.20.144) and the grid margin (v5.20.145) — both got fought back to the 4px
   default (that is the -5.4375px it stamped on the sidebar cards to force them
   to banner-bottom+4). So don't add margin: set the variable. 2.5mm = 9.45px.
   alignGap then pins every column uniformly to banner-bottom + 9.45px, and
   because it early-returns when no .info-banner is visible, the gap disappears
   when the banner is hidden.
   ============================================================ */
html body { --pl-banner-gap: 9.45px !important; }

/* ============================================================
   [v5.20.221] UNIVERSAL centre-column gap — OUTSIDE the scroller.
   v5.20.220 delivered the universal gap as padding-top, which lives
   INSIDE the scroll container (this column IS the scroller — see the
   overflow-y rules at ~1134/1176), so the scrollbar track still began
   at the column's very top, poking up beside the banner (user
   screenshot, red circle on the scroll arrow). The gap now moves
   OUTSIDE the box: margin-top pushes the whole scroll container —
   track, arrows, content — down to the sidebar's line, padding-top
   returns to 0 so content starts flush at the scroller's top, and
   max-height gives back the margin so the column's bottom cannot poke
   past the grid. Same variable as the sidebar (--col1-padding-top), so
   every tab (feed included) shares one gap and tracks the Site Setting.
   Triple-class + #main-content outranks the v5.19.78 margin belts and
   every other competitor; appended last so equal-spec ties also win.
   ============================================================ */
html body #main-content .dashboard-grid > .center-content.center-content.center-content,
html body #main-content .dashboard-grid > .right-sidebar.right-sidebar.right-sidebar{
  margin-top: var(--col1-padding-top, 8px) !important;
  padding-top: 0 !important;
  max-height: calc(100% - var(--col1-padding-top, 8px)) !important;
}
/* [v5.20.222] .right-sidebar added to the same rule. The user's scroll-owner
   table (console) showed it at the banner line (top=165, marginTop=0) — it is
   its own scroll container (style.css:77 overflow-y:scroll), so its scrollbar
   was the remaining arrow poking up beside the banner. No JS manages its
   margins (verified), so CSS can own it without a fight. Its side/bottom
   padding stays on the --col4-* Site-Setting variables. The LEFT sidebar is
   deliberately untouched: plAlignHeader balances it with inline margins at
   runtime (field console: -25px + 29.45px pair) and it is not currently a
   scrolling box. */

/* ============================================================
   [v5.20.226] FULLSCREEN VIEWER — keep Comments / Information
   ============================================================
   The ⛶ button used to add .lb-solo AND request fullscreen in one click.
   .lb-solo hides .lightbox-comments, .lightbox-controls, .lightbox-counter,
   .lightbox-nav and .lb-post-nav with `display:none !important`
   (pl-refinements.css ~3540 and ~3633), so fullscreen always took the panel
   with it — and the per-comment delete controls with that, since
   lbMoveComments() docks the live comments section into #lb-tab-comments.

   The JS split is the real fix: fullscreen adds .lb-fs, image-only is a
   separate opt-in that still adds .lb-solo. The rules below only size the
   viewer for fullscreen and style the new toggle.

   Placed in pl-gap-enforce.css deliberately: it loads AFTER pl-refinements.css,
   so at equal specificity source order decides in favour of these rules. Note
   pl-ads.css loads after this file on the feed tab (see v5.20.224), but it
   scopes everything to .pl-ad* and cannot reach .lightbox.
   ------------------------------------------------------------ */

/* Fullscreen: fill the screen, keep the side panel. Same two-column shape as
   the normal viewer — deliberately NOT a separate layout, per "one universal
   rule beats per-page patches". */
html body .lightbox.lb-fs,
html body .lightbox.lb-fs-fallback {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}
html body .lightbox.lb-fs-fallback {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;   /* above the site header when the real
                                       Fullscreen API was refused */
}
/* The panel stays put in fullscreen unless image-only is explicitly on. */
html body .lightbox.lb-fs:not(.lb-solo) .lightbox-comments,
html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-comments {
  display: flex !important;
}
/* [v5.20.265] .lightbox-nav removed from these force-show lists: the image
   arrows must stay under JS control (hidden when a post has one image). In
   fullscreen the old rule forced them visible with display:flex !important,
   so single-image posts wrongly showed ‹ › arrows. .lb-post-nav is also
   removed here — it is hidden globally (v5.20.263) and this fullscreen rule
   was overriding that hide, making the "Previous/Next post" pills reappear in
   fullscreen. Only controls/counter are force-shown now. */
html body .lightbox.lb-fs:not(.lb-solo) .lightbox-controls,
html body .lightbox.lb-fs:not(.lb-solo) .lightbox-counter,
html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-controls,
html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-counter {
  display: flex !important;
}
/* The image must not claim the panel's width in fullscreen. The panel is
   352px (pl-refinements sets .lb-post-next right:352px against it), so the
   viewport is whatever is left — derived from the same figure rather than a
   second constant balanced against it. */
html body .lightbox.lb-fs:not(.lb-solo) .lightbox-viewport img,
html body .lightbox.lb-fs:not(.lb-solo) .lightbox-viewport video,
html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-viewport img,
html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-viewport video {
  max-height: 100vh;
  max-width: 100%;
}

/* The image-only toggle sits beside the fullscreen button. */
html body .lb-imageonly-btn {
  position: absolute;
  right: 44px; bottom: 9px; top: auto;
  margin: 0;
  width: 30px; height: 30px;
  border-radius: var(--pl-r-buttons,var(--pl-btn-radius,999px));
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
html body .lb-imageonly-btn:hover { background: rgba(0,0,0,0.7); }
html body .lb-imageonly-btn[aria-pressed="true"] { background: rgba(255,255,255,0.28); }
/* Must stay reachable in image-only mode, or there is no way back out. */
html body .lightbox.lb-solo .lb-imageonly-btn {
  display: flex !important;
  right: 44px; bottom: 8px;
}
/* Video uses native controls; the zoom bar and these buttons would overlap. */
html body #lightbox.lb-video-mode .lb-imageonly-btn { display: none; }

@media (max-width: 820px) {
  /* Stacked layout below 820px (pl-refinements ~3636): the panel sits under
     the image, so the image cannot also be 100vh or the panel is pushed off
     the bottom of the screen with no way to scroll to it. */
  html body .lightbox.lb-fs:not(.lb-solo) .lightbox-viewport,
  html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-viewport {
    height: 55vh;
  }
  html body .lightbox.lb-fs:not(.lb-solo) .lightbox-viewport img,
  html body .lightbox.lb-fs:not(.lb-solo) .lightbox-viewport video,
  html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-viewport img,
  html body .lightbox.lb-fs-fallback:not(.lb-solo) .lightbox-viewport video {
    max-height: 55vh;
  }
}

/* ============================================================
 * [v5.20.230] UNIVERSAL BUTTON / TAG NORMALISER
 * ------------------------------------------------------------
 * Per direction: EVERY tag and button, platform-wide, must have its
 * content (text + icon) centred on BOTH axes, and carry a 1mm gap
 * OUTSIDE it top and bottom. The single exception is PAGE HEADERS.
 *
 * WHY one rule, not per-page: there are 412 distinct button/tag class
 * names in the theme and no shared base class. Enumerating them drifts
 * out of date the moment a new button is added. Matching on the class
 * SUBSTRINGS every button/tag already uses (btn / -tag / pill / chip)
 * plus the bare <button> element covers them all, and keeps covering
 * new ones. This is the "one universal rule beats per-page patches"
 * principle (HANDOVER §7).
 *
 * WHY here + this specificity: pl-gap-enforce.css loads 4th and this
 * block is at the END of it, so it is the source-order winner over the
 * earlier per-area button rules in THIS same file (header/footer/toggle
 * blocks ~468-492) at equal specificity. `html body` is prepended for a
 * specificity that clears template-level rules without reaching for a
 * higher hammer than needed.
 *
 * EXCLUSIONS (margin zeroed back out — centring still applies to header
 * BUTTONS, only the 1mm outside gap is removed so header bars keep their
 * fixed 27px height):
 *   - .dir-header / .pl-page-head and everything inside them  (page headers)
 *   - .left-sidebar buttons — plAlignHeader (header.php) balances the left
 *     column with inline runtime margins; a CSS margin here fights the JS
 *     (HANDOVER §8). Centring is fine; the vertical margin is not.
 *
 * KNOWN EFFECT (accepted, per direction): buttons packed into dense
 * toolbars (engagement bar, comment actions) gain 1mm top + 1mm bottom
 * = ~7.5px extra row height. This was chosen deliberately over skipping
 * toolbars, so the gap rule is genuinely universal.
 * 1mm ≈ 3.7795px at 96dpi.
 * ========================================================== */

html body button,
html body [class*="btn"],
html body [class*="-tag"],
html body [class*="pill"],
html body [class*="chip"] {
  display: inline-flex !important;
  align-items: center !important;      /* vertical middle  */
  justify-content: center !important;  /* horizontal centre */
  margin-top: 1mm !important;
  margin-bottom: 1mm !important;
}

/* --- EXCLUSION: page headers + their children keep zero outside gap --- */
html body .dir-header,
html body .dir-header button,
html body .dir-header [class*="btn"],
html body .dir-header [class*="-tag"],
html body .dir-header [class*="pill"],
html body .dir-header [class*="chip"],
html body .pl-page-head,
html body .pl-page-head button,
html body .pl-page-head [class*="btn"],
html body .pl-page-head [class*="-tag"],
html body .pl-page-head [class*="pill"],
html body .pl-page-head [class*="chip"],
html body .pl-cv-head,
html body .pl-cv-head button,
html body .pl-cv-head [class*="btn"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- EXCLUSION: left sidebar buttons are JS-balanced (HANDOVER §8) --- */
html body .left-sidebar button,
html body .left-sidebar [class*="btn"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- EXCLUSION: quick rail (.pl-rail) — [v5.20.233] --------------------
 * The universal rule above matched .pl-rail-btn ("btn" substring) and broke
 * the right-side quick rail: it forced justify-content:center (squashing the
 * icon+label+badge row against the corner) and added 1mm top/bottom margins
 * (spreading the rail buttons apart). The rail has its OWN layout
 * (inc/quick-rail.php: display:flex; align-items:center; gap:9px; LEFT-aligned).
 * A margin-only reset like the sidebar block above is NOT enough here — the
 * squash comes from justify-content, so this exclusion restores the rail's own
 * flex row in full, not just the gap. Applies to the rail buttons and any
 * icon/label/badge spans inside them.
 * ---------------------------------------------------------------------- */
html body .pl-rail .pl-rail-btn,
html body .pl-rail [class*="btn"] {
  display: flex !important;
  justify-content: flex-start !important;  /* rail rows are left-aligned */
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============================================================================
 * [v5.20.239] Icon spacing + rail buttons as separated, rounded buttons
 * ----------------------------------------------------------------------------
 * Two requests:
 *  A) 5mm between the four HEADER icons (Feed / Jobs / CV / Logout).
 *  B) The LEFT quick rail: keep its white panel, but 5mm between buttons and
 *     give each button its own rounded, separated button look.
 *
 * Both use the CONTAINER's `gap` for spacing rather than per-button margins,
 * so this does NOT fight the v5.20.233 rail exclusion above (which pins the
 * buttons' own margins to 0 to keep their icon+label+badge row intact). Gap is
 * owned by the flex container, margins by the items — changing gap here and
 * leaving margins at 0 there is consistent, not contradictory.
 * ============================================================================ */

/* A) Header icon row — 5mm between the four round icons.
 *    .header-nav is the flex container; overrides the small responsive gaps
 *    (3-5px) in pl-bundle.min.css. */
html body .site-header .header-nav {
  gap: 5mm !important;
}

/* B) Quick rail — 5mm between buttons (container gap; panel kept). */
html body .pl-rail {
  gap: 5mm !important;
}

/* B) Each rail button as its own separated, rounded button — matching the
 *    header icons' pill/rounded feel. Rounding + a subtle resting surface so
 *    each reads as an individual button, not a strip. Hover state stays from
 *    inc/quick-rail.php. Does not touch justify-content/align (the v5.20.233
 *    exclusion owns those) — only adds shape + a faint border/background. */
html body .pl-rail .pl-rail-btn {
  border-radius: 10px !important;
  border: 1px solid var(--c-border, #e8e6e2) !important;
  background: var(--c-bg-white, #ffffff) !important;
}
html body .pl-rail .pl-rail-btn:hover {
  background: #f3f2f0 !important;
}
/* Keep the primary (compose) button's filled look as its own button. */
html body .pl-rail .pl-rail-btn--primary {
  border-color: var(--c-btn, #7c7a75) !important;
  background: var(--c-btn, #7c7a75) !important;
}

/* ============================================================
   [v5.20.259] FEED COMPOSER POLISH
   ------------------------------------------------------------
   The post-composer window worked but looked unfinished: cramped
   textarea, plain action buttons, no clear focus state, weak
   hierarchy. This block (loads late, so it wins) gives it a
   cleaner, more considered feel without changing any behaviour.
   ============================================================ */

/* --- Composer container: a calm card with breathing room --- */
html body #pl-composer-full {
  background: #fff !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 12px !important;
  padding: 14px 16px 12px !important;
  box-shadow: 0 1px 3px rgba(17,24,39,0.04), 0 1px 2px rgba(17,24,39,0.03) !important;
}

/* --- Textarea: roomier, softer, clear focus ring --- */
html body #pl-composer-full .post-textarea {
  min-height: 96px !important;
  padding: 12px 13px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--c-text-primary, #111827) !important;
  resize: vertical !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
}
html body #pl-composer-full .post-textarea::placeholder {
  color: #9ca3af !important;
}
html body #pl-composer-full .post-textarea:focus {
  border-color: var(--c-primary, #5f5d58) !important;
  box-shadow: 0 0 0 3px rgba(95,93,88,0.12) !important;
  outline: none !important;
}

/* --- Char counter: quiet, right-aligned, tabular --- */
html body #pl-composer-full .char-counter {
  font-size: 11px !important;
  color: #9ca3af !important;
  text-align: right !important;
  margin: 0 2px 8px 0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* --- Action row: aligned, with a hairline divider above --- */
html body #pl-composer-full .post-actions-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 10px !important;
  padding-top: 11px !important;
  border-top: 1px solid var(--c-border, #eef0f2) !important;
}

/* --- Secondary buttons (Attach / AI / Schedule): pill, subtle --- */
html body #pl-composer-full .add-media-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--c-bg-muted, #f8f8f7) !important;
  border: 1px solid var(--c-border, #e5e7eb) !important;
  color: var(--c-text-dim, #4b5563) !important;
  -webkit-text-fill-color: var(--c-text-dim, #4b5563) !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  box-shadow: none !important;
}
html body #pl-composer-full .add-media-btn:hover {
  background: #fff !important;
  border-color: var(--c-primary, #5f5d58) !important;
  color: var(--c-primary, #5f5d58) !important;
  -webkit-text-fill-color: var(--c-primary, #5f5d58) !important;
}
html body #pl-composer-full .add-media-btn svg { stroke: currentColor !important; }

/* --- Primary submit: pushed to the right, confident --- */
html body #pl-composer-full .submit-post-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  background: var(--c-primary, #5f5d58) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid var(--c-primary, #5f5d58) !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background .15s, box-shadow .15s, transform .05s !important;
  box-shadow: 0 1px 2px rgba(17,24,39,0.08) !important;
}
html body #pl-composer-full .submit-post-btn:hover {
  background: var(--c-primary-dark, #3f3d39) !important;
  border-color: var(--c-primary-dark, #3f3d39) !important;
  box-shadow: 0 2px 6px rgba(17,24,39,0.14) !important;
}
html body #pl-composer-full .submit-post-btn:active { transform: translateY(1px) !important; }
html body #pl-composer-full .submit-post-btn svg { stroke: currentColor !important; }

/* --- Composer tabs (Post / Poll): tighter, aligned to the card --- */
html body #pl-composer-full .composer-tab { padding: 8px 18px !important; font-size: 13px !important; }

/* --- Mobile: submit goes full-width under the tools --- */
@media (max-width: 540px) {
  html body #pl-composer-full .submit-post-btn {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }
}

/* ============================================================
   [v5.20.263] IMAGE VIEWER — remove the "Previous/Next post" pills
   ------------------------------------------------------------
   Per direction: the viewer should only let you page images WITHIN
   the current post (the round ‹ › side arrows, which already hide
   themselves when a post has a single image). The top pills that
   jump to a DIFFERENT post are removed so a single-image post shows
   no navigation at all. Markup and JS (lbPostNav) are left intact;
   only the controls are hidden.
   ============================================================ */
html body .lb-post-nav,
html body .lb-post-prev,
html body .lb-post-next { display: none !important; }

/* ============================================================
   [v5.20.263] NESTED REPLIES — small fixed 2mm step-in
   ------------------------------------------------------------
   A reply that answers another reply (server adds .c-replyreply)
   steps in by a fixed 2mm (~7.5px) with a thin thread line, so the
   reply-to-reply relationship is visible without deep indentation.
   The step is fixed per level and capped by the flat-threading model,
   so threads never march off the right edge.
   ============================================================ */
html body .comment-children .comment-item.c-replyreply {
  margin-left: 2mm !important;               /* the fixed 2mm step */
  padding-left: 8px !important;
  border-left: 1.5px solid var(--c-border, #e5e7eb) !important; /* thread line */
  border-radius: 0 !important;               /* single-sided border: no rounding */
}
/* The "↩ replying to …" quote sits tight above the reply, muted */
html body .comment-children .comment-item.c-replyreply .comment-reply-quote {
  margin: 0 0 2px !important;
  font-size: 11px !important;
  color: var(--c-text-dim, #6b7280) !important;
  font-style: italic !important;
}

/* ============================================================
   [v5.20.265] IMAGE VIEWER ARROWS — remove the white ring
   ------------------------------------------------------------
   The round ‹ › image arrows showed a faint white outline/ring
   (the browser focus outline + any inherited box-shadow). Strip
   both so the button is a clean translucent circle. The arrows are
   also (correctly) hidden by the JS for single-image posts.
   ============================================================ */
html body .lightbox .lightbox-nav,
html body .lightbox .lightbox-nav:hover,
html body .lightbox .lightbox-nav:focus,
html body .lightbox .lightbox-nav:focus-visible,
html body .lightbox .lightbox-nav:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* [v5.20.286] Stop the load-time slide-to-rest: while <html> is .pl-settling
   (set by the dashboard flush script before the tab content paints, cleared
   after the ~2.6s settle window), freeze transitions/animations on the centre
   content so containers and header bars render in their final position
   instead of sliding across the gaps. Canvas (clock) redraws via rAF and is
   unaffected. */
html.pl-settling .center-content,
html.pl-settling .center-content *:not(canvas),
html.pl-settling .site-header,
html.pl-settling .site-header *:not(canvas){ transition:none !important; animation:none !important; }
/* [v5.20.287] Reserve the scrollbar gutter so content growth from an action never
   toggles the scrollbar, never changes width, and so never re-aligns the header. */
html{ scrollbar-gutter:stable; }

/* ============================================================================
   [v5.20.314] TIGHT COMMENT THREAD — the round avatars stack ~5px apart.
   Each comment becomes a compact row: no reserved header height, slim bubble
   padding, ~5px between consecutive comments (and between a comment and its
   reply). Threading, reply buttons and behaviour are unchanged. This sheet
   loads late and these carry html body + !important, so they win.
   ============================================================================ */
html body .comment-item { margin: 0 0 5px !important; padding: 0 !important; border-bottom: 0 !important; }
html body .comment-children { margin-top: 4px !important; }
html body .comment-item .comment-header { min-height: 0 !important; line-height: 1.2 !important; margin: 0 !important; }
html body .comment-item .comment-content { padding: 3px 8px !important; row-gap: 0 !important; }
html body .comment-item .comment-text { margin: 0 !important; line-height: 1.3 !important; }
html body .comment-item .comment-actions-bar { margin-top: 0 !important; }
html body .comment-avatar { width: 24px !important; height: 24px !important; }
html body .comments-list { margin-bottom: 2px !important; }

/* [v5.20.342] Search bar: guarantee the magnifier icon never overlaps the input
   text anywhere it appears (.search-bar-wrap is used by the search page and its
   variants). Global + !important so per-page/older inline CSS can't reintroduce
   the overlap. */
html body .search-bar-wrap { position: relative !important; }
html body .search-bar-wrap input { padding-left: 44px !important; }
html body .search-bar-wrap .search-icon { left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; line-height: 0 !important; pointer-events: none !important; }
html body .search-bar-wrap .search-icon svg { width: 16px !important; height: 16px !important; display: block !important; }

/* [v5.20.348] Groups search (.gv2-search) — same overlap guard as the main
   search bar: cap the icon and pad the input so the magnifier never sits under
   the text. Global + !important so it holds regardless of per-page CSS. */
html body .gv2-search { position: relative !important; }
html body .gv2-search input { padding-left: 40px !important; }
html body .gv2-search svg { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; pointer-events: none !important; }

/* [v5.20.432] JUSTIFIED BODY TEXT (PK). Every post body and every ad body
   renders justified — feed posts, shared posts, community posts, profile
   activity posts (all .post-content-full) and the promoted-card / sidebar /
   spotlight ad copy. Global + !important per the standing rule so it wins
   the frozen sheets everywhere, including SPA-swapped tabs. word-break kept
   at normal + overflow-wrap so justification never stretches broken words.
   [v5.20.436] hyphens:auto REMOVED (PK): it was splitting words with a "-"
   at the right edge of ad/post text, which reads as a typo in ad copy. Full
   words only; justify handles the spacing. */
html body .post-content-full,
html body .pl-adcard-body,
html body .pl-adside-body,
html body .pl-adspot-body {
    text-align: justify !important;
    text-justify: inter-word !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}
/* Never justify the editable textarea or poll option labels inside a post. */
html body .post-content-full .edit-textarea,
html body .nf-poll-option-text {
    text-align: left !important;
}

/* [v5.20.438] STANDARD POST PREVIEW SIZE (PK). One rule for every surface
   that renders a post card (feed, community, profile activity, shared).
   Collapsed posts show 14 FULL lines — roughly the height of a typical
   article card — cut exactly at a line boundary; at/under 14 lines nothing
   is hidden and no link appears; over it, post-scripts.php adds Read more /
   Show less. This deliberately overrides the 3-line clamp at
   pl-refinements.css:1177 (frozen sheet) and every legacy pixel max-height:
   a 3-line preview hid almost the whole post, and pixel caps cut mid-line. */
html body .post-card .post-content-full:not(.pl-expanded){
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: var(--pl-post-clamp-lines, 14) !important;
    overflow: hidden !important;
    max-height: none !important;
}
html body .post-card .post-content-full.pl-expanded{
    display: block !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ============================================================
   [v5.20.488] DIALOG CLOSE BUTTONS — one look, no exceptions (PK).
   Some ✕ rendered black/white inconsistently: the button-ink system
   paints glyphs via -webkit-text-fill-color !important, and the
   icon-based closes (feed report / engaged users / admin drill) use
   SVGs that ignore text colour. This pins every dialog close to the
   same white ✕ on Windows-red, including the SVG ones.
   ============================================================ */
html body .pl-cf-ov button.pl-cf-x,
html body button.pl-win-x,
html body .pld-x,
html body .pl-crop-x,
html body .forward-close,
html body .fwd-profile-close,
html body .av2-x,
html body .gv2-x,
html body .plm-close,
html body .pl-sp-close,
html body .adm-drill-close,
html body .plhub-confirm-x,
html body #pl-adlead-x,
html body button[aria-label="Close"][style*="e81123"]{
  background:#e81123 !important;color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;text-shadow:none !important;
}
html body .pl-cf-ov button.pl-cf-x:hover,
html body button.pl-win-x:hover,
html body .pld-x:hover,
html body .pl-crop-x:hover,
html body .forward-close:hover,
html body .fwd-profile-close:hover,
html body .av2-x:hover,
html body .gv2-x:hover,
html body .plm-close:hover,
html body .pl-sp-close:hover,
html body .adm-drill-close:hover,
html body .plhub-confirm-x:hover,
html body #pl-adlead-x:hover,
html body button[aria-label="Close"][style*="e81123"]:hover{background:#c50f1f !important}
html body .adm-drill-close svg,
html body button[aria-label="Close"][style*="e81123"] svg{
  stroke:#fff !important;fill:none !important;color:#fff !important;
  width:12px !important;height:12px !important;
}

/* ============================================================
   [v5.20.493] REVIEWS = FULL-WIDTH ROWS (PK). The "grids and flex
   rows" group in pl-refinements sets .cr-list{display:contents},
   which deletes the list's box — so each .cr-card fell into the
   parent grid's ~370px track and NO width rule on the list could
   ever apply. Restore a real box spanning the whole centre column,
   one review per row, right up to the icon rail.
   ============================================================ */
html body #reviewsList.cr-list{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:var(--pl-gap,14px) !important;
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0;
}
html body #reviewsList .cr-card{
  width:100% !important;
  max-width:none !important;
  grid-column:auto !important;
  margin-bottom:0 !important;
}

/* [v5.20.494] rating chips row (PK): .cr-breakdown is also in the
   display:contents group, which deleted its flex box — chips crammed
   and bars overlapped the scores. Real flex row again: six equal
   chips spread the FULL length, bars grow to fill, labels/scores
   aligned; wraps only when genuinely too narrow. */
html body #reviewsList .cr-breakdown{
  display:flex !important;
  flex-wrap:nowrap; /* [v5.20.495] ALL six on one line — no orphan Overall */
  align-items:center;
  gap:8px 14px;
  width:100%;
  margin:6px 0 !important;
}
html body #reviewsList .cr-breakdown .cr-bar-item{
  flex:1 1 0;
  min-width:0; /* bars shrink evenly instead of wrapping */
  display:flex !important;
  align-items:center;
  gap:6px;
  margin:0 !important;
}
@media (max-width:640px){
  html body #reviewsList .cr-breakdown{flex-wrap:wrap;}
  html body #reviewsList .cr-breakdown .cr-bar-item{flex:1 1 46%;min-width:44%;}
}
html body #reviewsList .cr-breakdown .cr-bar-label{
  flex:0 0 auto;font-size:11px;color:#6b7280;white-space:nowrap;
}
html body #reviewsList .cr-breakdown .cr-bar-track{
  flex:1 1 24px;min-width:16px;width:auto !important;height:7px;
  background:#eef0f3;border-radius:999px;overflow:hidden;
}
html body #reviewsList .cr-breakdown .cr-bar-fill{height:100%;border-radius:999px;display:block;}
html body #reviewsList .cr-breakdown .cr-bar-val{
  flex:0 0 auto;font-size:11px;font-weight:500;color:#111827;
}

/* [v5.20.496] review-form default-selection chips (pinned against the
   global button styling) + hint label */
html body .cr-chips{display:flex !important;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
html body .cr-chip{font-size:11px !important;padding:4px 11px !important;min-width:0 !important;border:1px solid #d1d5db !important;border-radius:999px !important;background:#fff !important;color:#374151 !important;-webkit-text-fill-color:#374151 !important;cursor:pointer;line-height:1.2 !important;box-shadow:none !important}
html body .cr-chip:hover{border-color:#5b21b6 !important;color:#5b21b6 !important;-webkit-text-fill-color:#5b21b6 !important}
html body .cr-chip.on{background:#5b21b6 !important;border-color:#5b21b6 !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
html body .cr-chip-hint{font-size:10px;color:#9ca3af;font-weight:400;margin-left:6px}
html body .cr-chip-other{height:28px !important;font-size:11px !important;margin-top:2px}
html body #reviewsList .cr-final-comments .cr-pc-text{font-size:11.5px}

/* ============================================================
   [v5.20.497] REVIEW CARD, CONFIRMED LAYOUT (PK): ratings move to a
   RIGHT-SIDE column, six bars stacked one below one with aligned
   labels/bars/scores; name, title, Pros/Cons, Advice, Comments and
   the footer stay on the left. On phones the ratings drop below.
   ============================================================ */
html body #reviewsList .cr-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 280px;
  column-gap:20px;
  align-items:start;
}
html body #reviewsList .cr-card > *{grid-column:1;min-width:0}
html body #reviewsList .cr-breakdown{
  grid-column:2 !important;
  grid-row:1 / span 6;
  flex-direction:column !important;
  align-items:stretch !important;
  flex-wrap:nowrap !important;
  gap:7px !important;
  margin:0 !important;
  border-left:1px solid #eef0f3;
  padding-left:16px;
  width:auto !important;
  align-self:stretch;
}
html body #reviewsList .cr-breakdown .cr-bar-item{
  flex:0 0 auto !important;
  min-width:0 !important;
  width:100%;
}
html body #reviewsList .cr-breakdown .cr-bar-label{flex:0 0 92px !important}
html body #reviewsList .cr-breakdown .cr-bar-track{min-width:40px}
html body #reviewsList .cr-card-footer{grid-column:1 / -1}
@media (max-width:760px){
  html body #reviewsList .cr-card{grid-template-columns:1fr}
  html body #reviewsList .cr-breakdown{
    grid-column:1 !important;grid-row:auto;
    border-left:0;padding-left:0;margin:6px 0 !important;
  }
}

/* [v5.20.512] SIDEBAR AD — never crop (PK). The old 120px cap + object-fit:cover
   cut uploaded images and Custom designs (600x400 / 600x600 / 600x900) to a
   strip. The creative now keeps its own shape at full sidebar width. */
html body .pl-adside img.pl-adside-img{height:auto!important;max-height:none!important;object-fit:contain!important;width:100%!important}
html body .pl-adside .pl-bf-box.pl-adside-img{height:auto!important;max-height:none!important}

/* [v5.20.529] JOBS TABS (PK) — [v5.20.531] each button at least its text + 10px (>1mm) each side, then grows to fill the row: the eight buttons fill the row equally, and the
   count sits INSIDE the button as plain text in the button's own ink — the
   coloured bubble that floated above each button is gone. Phones keep a
   swipeable row (8 labels can't share ~380px). */
/* [v5.20.780] job status tabs fit their text and WRAP to a second row when they
   don't fit (same behaviour as the company profile tabs), instead of being
   crammed onto one horizontally-scrolling row. */
html body .jobs-page .jobs-tabs{display:flex!important;flex-wrap:wrap!important;gap:6px!important;width:100%!important;overflow:visible!important;padding-top:0!important}
html body .jobs-page .jobs-tabs .jobs-tab{flex:0 0 auto!important;min-width:max-content!important;padding-left:12px!important;padding-right:12px!important;overflow:visible!important;text-overflow:clip!important;box-sizing:border-box!important;margin:0!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;position:relative!important}
html body .jobs-page .jobs-tabs .jobs-tab .jobs-badge{position:static!important;transform:none!important;top:auto!important;left:auto!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;
  min-width:0!important;height:auto!important;line-height:inherit!important;padding:0!important;margin:0!important;font-size:inherit!important;font-weight:700!important;color:inherit!important;-webkit-text-fill-color:inherit!important;opacity:.85!important;display:inline!important}
@media (max-width:640px){html body .jobs-page .jobs-tabs .jobs-tab{flex:0 0 auto!important}}


/* [v5.20.559] Registration-form alignment lock, grid edition (replaces the
   v5.20.558 flex lock, which let the lookup column's long status message crush
   the Name/Number fields). CSS GRID: two equal columns that CANNOT be
   vertically offset by any other sheet — align-items:start on the grid plus
   zeroed first-child margins means every label sits on one 17px baseline and
   every control on one 38px line. A row with a single <div> spans the full
   width. The lookup button lives OUTSIDE the rows on its own flex line.
   Last-loaded sheet + !important = the only guaranteed win (precedent:
   button-ink, corner-controls). */
html body .company-page .reg-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 15px!important;align-items:start!important;margin:0 0 15px!important;padding:0!important}
html body .company-page .reg-row>div{min-width:0!important;margin:0!important;padding:0!important;display:block!important}
html body .company-page .reg-row>div:only-child{grid-column:1/-1!important}
html body .company-page .reg-row>div:has(#comp_soc_json){grid-column:1/-1!important} /* [v5.20.563] social builder spans the row */
html body .company-page .reg-row>div>*:first-child{margin-top:0!important}
html body .company-page .reg-row .reg-label{display:block!important;margin:0 0 5px!important;padding:0!important;line-height:17px!important;min-height:17px!important;font-size:13px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
html body .company-page input.reg-input,
html body .company-page .reg-select,
html body .company-page .reg-multi-input{height:38px!important;box-sizing:border-box!important;margin:0!important;display:block!important;width:100%!important}
html body .company-page button.reg-input{height:38px!important;box-sizing:border-box!important;margin:0!important;width:auto!important;display:inline-flex!important;align-items:center!important;gap:6px!important}
/* [v5.20.561] lookup sits inside the Registration Number cell, under the
   field: compact button, message wraps beside/below it within the column. */
html body .company-page .ch-lookup{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;margin:6px 0 0!important;min-width:0!important}
html body .company-page .ch-lookup button.reg-input{height:32px!important;font-size:12px!important;padding:0 12px!important;flex:0 0 auto!important}
html body .company-page .ch-lookup #comp_ch_msg{min-width:0!important;overflow-wrap:anywhere!important}
/* [v5.20.560] pl-bundle.min.css + visual-polish.css restyle the tag picker
   (tag strip min-height:4px, margin-bottom:6px, own !important input rules) —
   the Industry box kept sitting below its row. Structural fix: the wrap is a
   locked flex COLUMN with the search input ORDERED FIRST, so by construction
   nothing can render between the label and the input; chosen tags flow BELOW
   the box. The dropdown is absolutely positioned, so order doesn't move it. */
html body .company-page .reg-multi-wrap{display:flex!important;flex-direction:column!important;margin:0!important;padding:0!important;position:relative!important}
html body .company-page .reg-multi-input{order:1!important}
html body .company-page .reg-multi-tags{order:2!important;margin:0!important;padding:0!important;min-height:0!important;gap:5px!important}
html body .company-page .reg-multi-tag{margin:5px 0 0!important}
/* [v5.20.567] the tag chips sit LEFT under the box, and the little remove ×
   is a bare glyph — the global button styling (button-ink / corner-controls,
   injected at wp_head end) was turning it into a dark pill and some sheet was
   centring the strip. Pinned here, the last-loaded sheet. */
html body .company-page .reg-multi-tags{justify-content:flex-start!important;align-items:center!important;width:100%!important}
html body .company-page .reg-multi-tag{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:3px 8px!important;font-size:11px!important}
html body .company-page .reg-multi-tag button{all:unset!important;cursor:pointer!important;padding:0 0 0 2px!important;font-size:14px!important;line-height:1!important;color:#5f5d58!important;-webkit-text-fill-color:#5f5d58!important;display:inline!important}
html body .company-page .reg-multi-tag button:hover{color:#dc2626!important;-webkit-text-fill-color:#dc2626!important}
html body .company-page .reg-multi-dropdown{order:3!important}
@media (max-width:720px){html body .company-page .reg-row{grid-template-columns:1fr!important}html body .company-page .reg-row>div{margin-bottom:15px!important}html body .company-page .reg-row>div:last-child{margin-bottom:0!important}}


/* [v5.20.575] Viewer Previous/Next pills — the grey ring was this sheet's OWN
   generic button normaliser: `html body button:not(#plm-emojis button):not(…)`
   sets border:1px solid #d1d5db, and the #plm-emojis inside :not() lends that
   selector ID-LEVEL specificity, so it beat the single-id .574 rule (console
   report 02/10 proved it: computed border 1px rgb(209,213,219), winning rule
   named). TWO ids (#lightbox …) sit above it; same sheet, later position.
   LESSON for future edits: any per-button fix in this file must outrank that
   normaliser — one id is NOT enough. */
html body #lightbox #lb-post-prev, html body #lightbox #lb-post-next,
html body #lightbox #lb-post-prev:hover, html body #lightbox #lb-post-next:hover,
html body #lightbox #lb-post-prev:focus, html body #lightbox #lb-post-next:focus,
html body #lightbox #lb-post-prev:focus-visible, html body #lightbox #lb-post-next:focus-visible,
html body #lightbox #lb-post-prev:active, html body #lightbox #lb-post-next:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
html body #lightbox #lb-post-prev::before, html body #lightbox #lb-post-next::before,
html body #lightbox #lb-post-prev::after, html body #lightbox #lb-post-next::after { content: none !important; display: none !important; }


/* [v5.20.578] IMAGE ARROWS ONLY FOR MULTI-IMAGE POSTS — structurally.
   The ‹ › arrows page images WITHIN a post, so a single-image post must
   never show them (seen 03/10 on a one-image post). The JS already sets
   inline display, but inline loses to any !important rule, so the gate now
   lives in the cascade itself: hidden by default, shown only when the
   viewer root carries .lb-multi (set by the JS exactly when the gallery
   holds 2+ entries). Image-only mode (.lb-solo) keeps its hide. */
html body #lightbox .lightbox-nav { display: none !important; }
html body #lightbox.lb-multi:not(.lb-solo) .lightbox-nav { display: flex !important; }


/* [v5.20.582] NO GLOW. Halo rings (box-shadow: 0 0 0 Npx …) sat around
   focused inputs, search boxes, active cards and the avatar preview — the
   "glow around things" PK wants gone. This kills the RING pattern only:
   real elevation shadows (0 4px 12px …) are depth, not glow, and stay.
   text-shadow is zeroed globally for good measure (none were in use). */
html body * { text-shadow: none !important; }
html body input:focus, html body input:focus-visible,
html body textarea:focus, html body textarea:focus-visible,
html body select:focus, html body select:focus-visible,
html body .dir-search-input:focus, html body .padmin-search:focus,
html body .net-search-input:focus, html body .fwd-conn-search:focus,
html body .reg-input:focus, html body .reg-select:focus,
html body .reg-multi-input:focus {
  box-shadow: none !important;
  outline: none !important;
}
html body .cvs-card.active { box-shadow: none !important; }                       /* ring-style selection — border colour already marks it */
html body .avatar-upload-wrap.pl-has-banner .avatar-preview {
  box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;                              /* keep the depth, drop the white ring */
}

/* ============================================================
   [v5.20.588] Sidebar submenu rows: clicking "Companies" opened
   Reviews & Salaries — the row anchors (pinned to 27px above) could
   overlap the neighbouring row, so the wrong link sat under the
   cursor. Each li is now clamped to exactly its anchor's box
   (27px + 2px top/bottom margin = 31px) with overflow hidden, so a
   row can neither paint nor catch clicks outside its own strip.
   ============================================================ */
html body .left-sidebar .nav-submenu li{display:block!important;position:relative!important;height:31px!important;min-height:31px!important;max-height:31px!important;overflow:hidden!important;margin:0!important;padding:0!important;float:none!important;transform:none!important}
html body .left-sidebar .nav-submenu li > a{position:relative!important;top:0!important;left:0!important;transform:none!important;float:none!important}

/* ============================================================
   [v5.20.663] MOBILE FEED VISIBLE AGAIN (PK: "posts are not appearing
   in mobile view"). Root cause: on touch devices <=992px style.css
   turns the app-shell off (.dashboard-wrapper becomes static, the
   DOCUMENT scrolls), but the v5.19.77/78 desktop frame rules above
   still forced .dashboard-grid{max-height:100%;overflow:hidden} and
   .center-content{max-height:100%}. With no fixed-height parent on
   mobile, 100% resolved to ~4px, so the whole centre column (feed
   posts, and every other tab) was rendered but clipped to nothing.
   Also the <=1120 rule pinned .center-content to grid column 2, so a
   tablet in portrait showed the feed squeezed into a narrow strip.
   Scoped to coarse pointers (phones/tablets) exactly like style.css's
   mobile block; desktop app-shell untouched. Same (1,x,x) specificity
   as the frame rules and later in source order, so it wins.
   ============================================================ */
@media (max-width:992px) and (pointer:coarse){
  html body #main-content.dashboard-center{height:auto!important;max-height:none!important;overflow:visible!important}
  html body #main-content .dashboard-grid.dashboard-grid{display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;flex:0 0 auto!important}
  html body #main-content .dashboard-grid > .center-content.center-content{grid-column:auto!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important}
}
/* Narrow DESKTOP windows (mouse, 769-992px): nav + feed only, feed takes
   all remaining width (was squeezed to ~110px by leftover column tracks). */
@media (max-width:992px) and (pointer:fine){
  html body #main-content .dashboard-grid.dashboard-grid{grid-template-columns:var(--col1-width,180px) minmax(0,1fr)!important}
  html body #main-content .dashboard-grid > .center-content.center-content{grid-column:2 / 3!important}
}

/* [v5.20.664] Mobile sidebar drawer, opened by MENU in the bottom bar. Drawer
   sits above the header; the bottom bar stays on top so Menu also closes it.
   Applies to touch screens <=992px AND any window <=768px (desktop browser
   shrunk to phone size), i.e. wherever the bottom bar is shown. */
@media (max-width:768px), (max-width:992px) and (pointer:coarse){
  html body .dashboard-grid > .left-sidebar.left-sidebar.mobile-open{display:block!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(260px,82vw)!important;max-height:none!important;height:100%!important;overflow-y:auto!important;z-index:10050!important;transform:translateX(0)!important;padding:calc(env(safe-area-inset-top,0px) + 10px) 8px 16px!important;background:var(--c-bg-white,#fff)!important;box-shadow:4px 0 20px rgba(0,0,0,.25)!important}
  html body .sidebar-overlay.active{z-index:10040!important}
  html body #pl-mobile-nav.pl-mobnav{z-index:10060!important}
  /* [v5.20.665] On desktop-width app-shell the drawer lives inside the fixed
     .dashboard-wrapper (its own stacking layer), so the body-level overlay
     covered it. While open: lift the wrapper, skip the overlay, and dim the
     page with the drawer's own shadow. Tap-outside close is done in JS. */
  html body.pl-drawer-open .dashboard-wrapper{z-index:10045!important}
  html body.pl-drawer-open .sidebar-overlay{display:none!important}
  html body.pl-drawer-open .dashboard-grid > .left-sidebar.left-sidebar.mobile-open{box-shadow:4px 0 20px rgba(0,0,0,.25),0 0 0 100vmax rgba(0,0,0,.40)!important}
  html body .dashboard-grid > .left-sidebar.left-sidebar.mobile-open{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* ============================================================
   [v5.20.667] MOBILE BUTTON OVERLAPS (PK: "buttons are overlapping in
   mobile mode"). Found by rendering every main tab at 390px.
   ============================================================ */
@media (max-width:768px){
  /* Connections sub-tabs (Your Network / Received / Sent / Followers /
     Following / Blocked / Muted) were squeezed to 51px each, so their
     labels ran into each other. Each tab now keeps its natural width and
     the row scrolls sideways, same as the Engagements tabs. */
  html body .center-content .conn-tabs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:6px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  html body .center-content .conn-tabs::-webkit-scrollbar{display:none}
  html body .center-content .conn-tabs .conn-tab{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important;overflow:visible!important}

  /* Company / Recruiter directory toolbar: search + Clear + two filters
     were forced into one row (text cut to "All I..."). Row 1: search
     (+ Clear when shown). Row 2: the two filters, half each. */
  html body .dir-filters{flex-wrap:wrap!important;row-gap:8px!important}
  html body .dir-filters .dir-search-input{flex:1 1 100%!important;width:100%!important;min-width:0!important}
  html body .dir-filters .dir-clear-btn{flex:0 0 auto!important}
  html body .dir-filters .dir-search-row{display:flex!important;flex:1 1 100%!important;gap:8px!important;align-items:center}
  html body .dir-filters .dir-search-row .dir-search-input{flex:1 1 auto!important}
  html body .dir-filters .dir-filter-row{display:flex!important;flex:1 1 100%!important;gap:8px!important}
  html body .dir-filters .dir-filter-select{flex:1 1 0!important;min-width:0!important}
}
@media (max-width:768px){
  /* [v5.20.667] Connection cards: long headlines ran 13px past the card edge. */
  html body .center-content .conn-info{min-width:0!important;max-width:100%!important;overflow:hidden!important}
  html body .center-content .conn-info .conn-name,
  html body .center-content .conn-info .conn-headline,
  html body .center-content .conn-info .conn-location{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}

/* ============================================================
   [v5.20.668] TOP BANNER BACK ON PHONES (PK). v5.17.63 hid every
   .info-banner on mobile (and style.css hid them on touch <=992px).
   The TOP banner row returns, full width; the bottom banner stays off.
   Two IDs-free but doubled-class selectors so they beat both hide rules.
   ============================================================ */
@media (max-width:768px), (max-width:992px) and (pointer:coarse){
  html body .banner-row .info-banner.info-banner:not(#pl-rainy-auto){display:block!important;max-width:100%!important;width:100%!important;margin:0 0 6px!important}
  html body .banner-row{display:block!important;width:100%!important}
}
/* [v5.20.668] Career Stats banner — PHONE LAYOUT. Desktop is one 1000px+ row
   (Total | Metrics | company bars | Highlights). On a phone that row was
   clipped. Here it becomes:  [Total | Metrics]  then  [company bars, swipe
   sideways]  then  [Highlights / profile progress]. Desktop unchanged. */
@media (max-width:768px), (max-width:992px) and (pointer:coarse){
  html body .es-host{height:auto!important;max-height:none!important;overflow:hidden!important}
  html body .es-part .es-head{display:none!important}
  html body .es-part .es-row{flex-wrap:wrap!important;height:auto!important}
  html body .es-part .es-total{flex:0 0 42%!important;max-width:42%!important;min-height:92px;box-sizing:border-box!important;padding:8px 6px!important}
  html body .es-part .es-metrics{flex:1 1 58%!important;max-width:58%!important;border-right:0!important;min-height:92px;box-sizing:border-box!important;padding:8px 10px!important}
  html body .es-part .es-tail{flex:1 1 100%!important;flex-wrap:wrap!important;border-top:1px solid rgba(255,255,255,.14)}
  html body .es-part .es-bars{flex:1 1 100%!important;height:118px!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .es-part .es-bars::-webkit-scrollbar{display:none}
  html body .es-part .es-bar{flex:1 0 74px!important}
  html body .es-part .es-hl{flex:1 1 100%!important;border-left:0!important;border-top:1px solid rgba(255,255,255,.14)}
}

/* [v5.20.668] PICTURE STABILITY — post images now carry width/height, so the
   browser reserves their box before they load. These keep that box honest
   everywhere a post card renders (feed, company tabs, engagements): width
   follows the column, height follows the image's own ratio, and a soft
   placeholder shows in the reserved space until the picture arrives. */
html body .post-card .post-media-item img[width][height]{height:auto!important;max-width:100%!important;background:#f3f4f6}
html body .post-card .post-media-grid.single .post-media-item img[width][height]{width:100%!important}

/* ============================================================
   [v5.20.669] READABLE TEXT ON PHONES (PK: "texts are very small").
   Measured on 11 tabs at 390px: most text was 10–12px (job details,
   post meta, company cards, profile forms) across hundreds of rules.
   Instead of chasing each rule, the content area, the top banner and the
   menu drawer are scaled as a whole by --pl-mob-zoom (12px -> ~14px).
   Modern zoom resolves % widths in the parent's space, so width:100%
   still fits the screen exactly — no sideways scroll. Buttons and icons grow with the
   text, so tap targets get bigger too. One knob: --pl-mob-zoom.
   ============================================================ */
@media (max-width:768px), (max-width:992px) and (pointer:coarse){
  html body{--pl-mob-zoom:1.24} /* [v5.20.695] PK: "a bit bigger text on mobile" (was 1.16) */
  html body #main-content .dashboard-grid > .center-content.center-content{zoom:var(--pl-mob-zoom)!important}
  html body .banner-row{zoom:var(--pl-mob-zoom)!important}
  html body .dashboard-grid > .left-sidebar.left-sidebar.mobile-open{zoom:var(--pl-mob-zoom)!important}
  html body #verify-banner{zoom:var(--pl-mob-zoom)!important}
}

/* ============================================================
   [v5.20.669] DIALOGS ON PHONES ONLY (plConfirm / plAlert — Yes/No, OK,
   Logout, Delete…). Desktop is untouched. On phones the generic button
   normaliser repainted the dialog buttons into identical pale chips stuck to
   the left. :is(.x,#pl-nx-a) / :is(.x,#pl-nx-b) lend ID-level specificity
   (the ids never exist, so nothing else is matched) to outrank it without
   changing the dialog markup.
   - message text JUSTIFIED
   - pill buttons sharing the row equally; Cancel = light, action = dark,
     destructive (delete / logout…) = red
   - wider box, larger text, bigger tap targets
   ============================================================ */
@media (max-width:768px), (max-width:992px) and (pointer:coarse){
  html body .pl-cf-ov .pl-cf-box.pl-cf-box{padding:0!important;width:calc((100vw - 32px) / var(--pl-mob-zoom,1.16))!important;max-width:360px!important;min-width:0!important;zoom:var(--pl-mob-zoom,1.16)}
  html body .pl-cf-ov .pl-cf-body{padding:14px 16px 16px!important}
  html body .pl-cf-ov .pl-cf-m{font-size:13px!important;margin:0 0 14px!important;text-align:justify!important;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
  html body .pl-cf-ov .pl-cf-btns{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important}
  html body .pl-cf-ov .pl-cf-btns button:is(.pl-cf-btn,#pl-nx-a):is(.pl-cf-btn,#pl-nx-b){flex:1 1 0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:0!important;height:36px!important;padding:0 14px!important;margin:0!important;border:0!important;border-radius:999px!important;font-size:12px!important;font-weight:500!important;line-height:1!important;box-shadow:none!important;text-shadow:none!important}
  html body .pl-cf-ov .pl-cf-btns button:is(.pl-cf-cancel,#pl-nx-a):is(.pl-cf-cancel,#pl-nx-b){background:#f3f4f6!important;color:#374151!important;-webkit-text-fill-color:#374151!important;box-shadow:inset 0 0 0 1px #d1d5db!important}
  html body .pl-cf-ov .pl-cf-btns button:is(.pl-cf-ok,#pl-nx-a):is(.pl-cf-ok,#pl-nx-b){background:#5f5d58!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
  html body .pl-cf-ov .pl-cf-btns button:is(.pl-cf-ok,#pl-nx-a):is(.danger,#pl-nx-b){background:#dc2626!important}
}

/* ============================================================
   [v5.20.677] COMMENTS — TWO-ROW LAYOUT, 1mm VERTICAL RHYTHM (PK).
     row 1: avatar · name · time            (+ reply quote above, if any)
     row 2: the comment text
     then a small actions line (+, like, reply, edit/delete, "▾ 1 reply")
   Replies repeat the same two rows, indented under their parent.
   Every vertical gap is ~1mm (4px): name->text, text->actions,
   comment->next comment, comment->its replies. Replaces the v5.20.315
   one-line (name + text side by side) layout. Doubled class so it wins over
   the feed page's inline block and the older gap rules.
   ============================================================ */
html body .comment-item.comment-item{display:flex!important;align-items:flex-start!important;gap:6px!important;margin:0 0 4px!important;padding:0!important;border:0!important}
html body .comment-item.comment-item .comment-avatar{flex:0 0 auto!important;margin:0!important}
html body .comment-item.comment-item .comment-content-wrapper{flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:0!important}
html body .comment-item.comment-item .comment-content{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;row-gap:4px!important;column-gap:8px!important;flex:1 1 auto!important;min-width:0!important;padding:2px 8px!important;margin:0!important}
/* full-width rows: quote, name/time, text, reply form, replies. The actions line and "▾ 1 reply" share one row. */
html body .comment-item.comment-item .comment-content > .comment-reply-quote,
html body .comment-item.comment-item .comment-content > .comment-header,
html body .comment-item.comment-item .comment-content > .comment-author,
html body .comment-item.comment-item .comment-content > .comment-text,
html body .comment-item.comment-item .comment-content > .reply-form-wrapper,
html body .comment-item.comment-item .comment-content > .comment-children,
html body .comment-item.comment-item .comment-content > form{flex:0 0 100%!important;max-width:100%!important}
html body .comment-item.comment-item .comment-content > .comment-actions-bar,
html body .comment-item.comment-item .comment-content > .thread-toggle{flex:0 0 auto!important;margin:0!important}
html body .comment-item.comment-item .comment-content > .thread-toggle{padding:0!important;line-height:1!important;font-size:11px!important;background:none!important;border:0!important;box-shadow:none!important;width:auto!important;min-height:0!important;height:auto!important}
html body .comment-item.comment-item .comment-header{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:6px!important;margin:0!important;padding:0!important;line-height:1.25!important;min-height:0!important;height:auto!important}
html body .comment-item.comment-item .comment-author{margin:0!important;line-height:1.25!important;white-space:nowrap!important}
html body .comment-item.comment-item .comment-time{margin:0!important;line-height:1.25!important}
html body .comment-item.comment-item .comment-text{display:block!important;width:100%!important;margin:0!important;padding:0!important;line-height:1.35!important;white-space:normal!important;word-break:break-word!important}
html body .comment-item.comment-item .comment-reply-quote{margin:0!important;padding:0!important;line-height:1.25!important}
html body .comment-item.comment-item .comment-actions-bar{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:6px!important;margin:0!important;padding:0!important;min-height:0!important;line-height:1!important}
/* refinements.css pins the TOP-LEVEL name row to 24px (avatar alignment for the old one-line layout) — not needed now */
html body .comment-item.comment-item.c-depth-0 > .comment-content > .comment-header{min-height:0!important}
html body .comment-item.comment-item .comment-actions-bar .comment-actions-toggle{margin:0!important;padding:0 4px!important;height:16px!important;min-height:0!important;line-height:16px!important}
html body .comment-item.comment-item .comment-actions-bar .comment-action-btn{margin:0!important;padding:0 2px!important;min-height:0!important;line-height:1!important}
/* replies: same rows, 1mm from the parent, small step in */
html body .comment-replies.comment-replies,html body .comment-children.comment-children,html body .comment-replies-flat.comment-replies-flat{margin:0 0 0 3px!important;padding:0!important;border:0!important}
html body .comment-children .comment-item.comment-item:last-child,html body .comment-replies .comment-item.comment-item:last-child{margin-bottom:0!important}

/* [v5.20.678] Comments: NO EMPTY COLUMN UNDER THE AVATAR (PK, red circle).
   Only the name/time row sits beside the avatar; the text, the action line
   and the replies start at the LEFT edge, directly under the avatar.
   The avatar is pinned top-left and the name row is padded to clear it. */
html body .comment-item.comment-item{position:relative!important;display:block!important}
html body .comment-item.comment-item > .comment-avatar{position:absolute!important;left:0!important;top:0!important;width:22px!important;height:22px!important;margin:0!important}
html body .comment-item.comment-item .comment-content-wrapper{display:block!important;margin:0!important;padding:0!important}
html body .comment-item.comment-item .comment-content{padding:0!important}
html body .comment-item.comment-item .comment-content > .comment-header,
html body .comment-item.comment-item .comment-content > .comment-author{padding-left:28px!important;min-height:22px!important;align-items:center!important;display:flex!important}
html body .comment-item.comment-item .comment-content > .comment-reply-quote{padding-left:28px!important}
html body .comment-item.comment-item.c-depth-0 > .comment-content > .comment-header{min-height:22px!important}
/* replies: a small step in (about 3mm) so the thread is still readable */
html body .comment-children.comment-children,html body .comment-replies.comment-replies,html body .comment-replies-flat.comment-replies-flat{margin:0 0 0 12px!important}

/* [v5.20.679] Reply box: avatar + input on the first row, Reply / Cancel on
   their own row underneath (right-aligned), 1mm apart (PK). */
html body .reply-form-inline.reply-form-inline{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:4px 6px!important;margin:0!important;padding:0!important}
html body .reply-form-inline.reply-form-inline > .reply-avatar{flex:0 0 auto!important;position:static!important}
html body .reply-form-inline.reply-form-inline > .reply-input{flex:1 1 calc(100% - 40px)!important;min-width:0!important;width:auto!important}
html body .reply-form-inline.reply-form-inline > .reply-submit-btn{margin-left:auto!important}
html body .reply-form-inline.reply-form-inline > .reply-submit-btn,
html body .reply-form-inline.reply-form-inline > .reply-cancel-btn{flex:0 0 auto!important;width:auto!important}

/* [v5.20.679] Reply-to-reply quote ("↩ name: …") was half-hidden behind the
   avatar after v5.20.678. The quote now sits on its own line at the left and
   the avatar drops below it, beside the name. */
html body .comment-item.comment-item:has(> .comment-content > .comment-reply-quote) > .comment-avatar{top:19px!important}
html body .comment-item.comment-item .comment-content > .comment-reply-quote{padding-left:0!important;font-size:11px!important;line-height:15px!important;min-height:15px!important}

/* [v5.20.682] ONE POST SIZE EVERYWHERE (PK: "always feed post size wherever
   I use; even if there is a gap, don't stretch to the end").
   A post on the feed is 551px wide at full desktop width. Elsewhere (company
   Posts/News tabs on Jobs, group feeds, engagements, profile activity) the
   same card stretched to fill wider panels (e.g. 638px). Every post card is
   now capped at the feed width and sits left-aligned; any spare space stays
   as a gap on the right. Narrower screens (phones) are unaffected — the card
   just fills the available width, as on the feed. One knob: --pl-post-w. */
:root{--pl-post-w:550px}   /* [v5.20.684] fallback only — the real feed width is measured and set by inc/feed/post-width.php */
html body .post-card.post-card,
html body .feed-post.feed-post{width:100%!important;max-width:var(--pl-post-w)!important;margin-left:0!important;margin-right:auto!important;box-sizing:border-box!important}

/* [v5.20.704] PK: post time goes BELOW the author name, name in bold.
   style.css laid .post-author-info out as a row (name · time side by side);
   it is now a two-line stack. Applies to every post card (feed, groups,
   engagements, saved, company tabs) — they all share .post-header. */
/* [v5.20.785] name and timestamp on ONE row (was stacked) */
html body .post-header .post-author-info{flex-direction:row!important;align-items:baseline!important;justify-content:flex-start!important;gap:6px!important;min-width:0!important;flex-wrap:wrap!important}
html body .post-header .post-author-name,html body .post-header .post-author-name a{font-weight:700!important;max-width:100%!important;line-height:1.25!important}
html body .post-header .post-timestamp{font-size:11px!important;line-height:1.2!important;white-space:nowrap!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important}
/* [v5.20.705] PK: Follow / Following button on posts in bold too */
/* repeated class = extra specificity: beats pl-refinements' ".center-content .profile-form button[type=button]:not()x3" (500 !important), since the feed container is also .profile-form */
html body .post-header .pl-post-follow button.pl-postfollow-btn.pl-postfollow-btn.pl-postfollow-btn.pl-postfollow-btn[type]{font-weight:700!important}

/* ============================================================================
   [v5.20.708] LIGHT COMMENTS (PK: "comments like this — not the same ditto,
   something easy and lite"). Avatar on the left; name (bold) with a one-line
   grey headline under it and a small age on the right; the text; then a plain
   "Like · Reply" line that is always visible. No bubble, no "+" menu.
   Replies sit under their comment with a smaller avatar. Markup is built in
   inc/feed/ajax-feed.php (load_comments) and carries .plc; the tripled class
   outranks every older .comment-item.comment-item rule above.
   ============================================================================ */
html body .comment-item.plc.plc.plc{display:grid!important;grid-template-columns:32px minmax(0,1fr)!important;column-gap:9px!important;align-items:start!important;position:static!important;margin:0 0 12px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html body .comment-item.plc.plc.plc > .plc-av{display:block!important;width:32px!important;height:32px!important;margin:0!important;line-height:0!important}
html body .comment-item.plc.plc.plc > .plc-av > .comment-avatar{position:static!important;display:block!important;width:32px!important;height:32px!important;border-radius:50%!important;object-fit:cover!important;margin:0!important;border:0!important}
html body .comment-item.plc.plc.plc > .plc-body{display:block!important;min-width:0!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important}
html body .comment-item.plc.plc.plc .plc-body > .plc-head{display:flex!important;flex-wrap:nowrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:8px!important;padding:0!important;margin:0!important;min-height:0!important;height:auto!important}
html body .comment-item.plc.plc.plc .plc-who{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;min-width:0!important;gap:0!important}
html body .comment-item.plc.plc.plc .plc-name{font-size:13px!important;font-weight:600!important;line-height:1.3!important;color:#111827!important;-webkit-text-fill-color:#111827!important;text-decoration:none!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;padding:0!important;margin:0!important;display:block!important;min-height:0!important}
html body .comment-item.plc.plc.plc .plc-name:hover{text-decoration:underline!important}
html body .comment-item.plc.plc.plc .plc-hl{font-size:11.5px!important;line-height:1.35!important;color:#6b7280!important;-webkit-text-fill-color:#6b7280!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;display:block!important;max-width:100%!important}
html body .comment-item.plc.plc.plc .plc-age{flex:0 0 auto!important;font-size:11.5px!important;line-height:1.3!important;color:#9ca3af!important;-webkit-text-fill-color:#9ca3af!important;white-space:nowrap!important;margin:0!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-text{display:block!important;margin:5px 0 0!important;padding:0!important;font-size:13px!important;line-height:1.5!important;color:#1f2937!important;-webkit-text-fill-color:#1f2937!important;white-space:normal!important;overflow-wrap:anywhere!important;text-align:left!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-reply-quote{display:block!important;margin:0 0 3px!important;padding:0!important;font-size:11px!important;line-height:1.3!important;color:#9ca3af!important;font-style:normal!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:0!important}
/* action line: Like · Reply (+ Edit / Delete on your own) */
html body .comment-item.plc.plc.plc .plc-body > .plc-acts{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:2px!important;margin:4px 0 0 -6px!important;padding:0!important;min-height:0!important;line-height:1!important;background:none!important;border:0!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important;height:auto!important;opacity:1!important;min-height:0!important;min-width:0!important;width:auto!important;padding:4px 6px!important;margin:0!important;border:0!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;font-family:inherit!important;font-size:12px!important;font-weight:500!important;line-height:1!important;color:#6b7280!important;-webkit-text-fill-color:#6b7280!important;cursor:pointer!important;clip-path:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act:hover{background:#f3f4f6!important;color:#111827!important;-webkit-text-fill-color:#111827!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act svg{width:14px!important;height:14px!important;stroke:currentColor!important;flex:0 0 auto!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act.active,html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act.active:hover{color:#5b21b6!important;-webkit-text-fill-color:#5b21b6!important;font-weight:600!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act.active svg{fill:currentColor!important;fill-opacity:.15!important}
html body .comment-item.plc.plc.plc .plc-acts .comment-eng-count{font-size:12px!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;margin:0!important;padding:0!important;background:none!important}
html body .comment-item.plc.plc.plc .plc-acts .comment-eng-count:empty{display:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-sep{display:inline-block!important;width:1px!important;height:12px!important;background:#e5e7eb!important;margin:0 2px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-minor{font-weight:400!important;color:#9ca3af!important;-webkit-text-fill-color:#9ca3af!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-minor.comment-delete-btn:hover{color:#b91c1c!important;-webkit-text-fill-color:#b91c1c!important;background:#fef2f2!important}
/* "▾ 2 replies" + the replies themselves */
html body .comment-item.plc.plc.plc .plc-body > .thread-toggle{display:inline-flex!important;align-items:center!important;gap:4px!important;margin:6px 0 0!important;padding:2px 0!important;background:none!important;border:0!important;box-shadow:none!important;font-size:12px!important;font-weight:500!important;color:#6b7280!important;-webkit-text-fill-color:#6b7280!important;cursor:pointer!important;width:auto!important;height:auto!important;min-height:0!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children{display:block!important;margin:8px 0 0!important;padding:0!important;border:0!important}
html body .comment-children .comment-item.plc.plc.plc{grid-template-columns:24px minmax(0,1fr)!important;column-gap:8px!important;margin:0 0 10px!important}
html body .comment-children .comment-item.plc.plc.plc > .plc-av,html body .comment-children .comment-item.plc.plc.plc > .plc-av > .comment-avatar{width:24px!important;height:24px!important}
html body .comment-children .comment-item.plc.plc.plc.c-replyreply{margin-left:0!important;padding-left:0!important;border-left:0!important}
html body .comment-children .comment-item.plc.plc.plc:last-child{margin-bottom:2px!important}
/* edit + reply boxes sit cleanly inside the text column */
html body .comment-item.plc.plc.plc .plc-body > .comment-edit-form{display:flex!important;gap:6px!important;align-items:center!important;margin:5px 0 0!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-edit-form input{flex:1 1 auto!important;min-width:0!important}
html body .comment-item.plc.plc.plc .plc-body > .reply-form-wrapper{margin:6px 0 0!important}
/* [v5.20.836] PK: Edit / Delete always visible (no hover-only) */


/* ===== [v5.20.721] PK: tight feed — gaps of ~1 mm (4px) between the parts of a post and between posts;
   buttons get ~0.5 mm (2px) of space on every side. #main-content raises the weight above older rules. ===== */
html body #main-content .post-card.post-card,html body .post-card.post-card.post-card{margin-top:0 !important;margin-bottom:4px !important;border-bottom:1px solid #e9eaee !important;padding-bottom:2px !important}
html body #main-content .post-card.post-card > .post-header{padding-top:2px !important;padding-bottom:2px !important;margin:0 !important}
html body #main-content .post-card.post-card > .post-content-full{padding-top:2px !important;padding-bottom:2px !important;margin:0 !important}
html body #main-content .post-card.post-card > .post-content-full > :last-child,
html body #main-content .post-card.post-card > .post-content-full p:last-child{margin-bottom:0 !important}
html body #main-content .post-card.post-card > .post-content-full > :first-child{margin-top:0 !important}
html body #main-content .post-card.post-card > .post-media{margin-top:2px !important;margin-bottom:2px !important}
html body #main-content .post-card.post-card > .engagement-bar{padding-top:0 !important;padding-bottom:0 !important;margin:0 !important;min-height:0 !important;gap:2px !important}
/* buttons: 2px all round */
html body #main-content .post-card.post-card > .engagement-bar .engagement-btn{padding:2px 4px !important;margin:2px !important;min-height:0 !important;height:auto !important}
html body #main-content .post-card.post-card .post-header button,
html body #main-content .post-card.post-card .post-header .pl-postfollow-btn{padding:2px 10px !important;margin:2px !important;min-height:0 !important;height:auto !important;line-height:1.4 !important}
html body #main-content .post-card.post-card .pl-article-card{margin-top:2px !important;margin-bottom:0 !important}
html body #main-content .post-card.post-card .pl-article-card > div{padding:8px 12px !important}
html body #main-content .post-card.post-card .pl-article-card a[style*="background"]{padding:2px 10px !important;margin:2px 0 0 !important;line-height:1.6 !important}
html body #main-content .post-card.post-card .pl-article-card a[style*="font-size:16px"]{margin-bottom:2px !important}
html body .pl-article-card,html body .pl-article-card *{text-align:left !important;word-spacing:normal !important;letter-spacing:normal}

/* [v5.20.765] PK: company profile tab pills ran off the right edge
   ("Reviews" cut at "R"). When they do not fit, the rest drop to a
   second row; pills never shrink or clip their text. */
html body .cpv-page .cpv-tabs.cpv-tabs,
html body .cpv-tabs.cpv-tabs{
  flex-wrap: wrap !important;
  overflow: visible !important;
  row-gap: 6px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
}
html body .cpv-tabs.cpv-tabs .cpv-tab{ flex: 0 0 auto !important; white-space: nowrap !important; }

/* [v5.20.765] PK: Group page — "just 1 to 2mm gap only for any gaps".
   Every gap on the single-group view is now 4–8px (1–2mm): back button,
   header card, feed heading, composer, posts, members panel. */
html body #gv2-single .gv2-back{ margin:0 0 6px !important; padding:3px 8px !important; }
html body #gv2-single .gv2-sv-banner{ margin:0 0 6px !important; }
html body #gv2-single .gv2-sv-body{ padding:8px !important; }
html body #gv2-single .gv2-sv-head{ gap:8px !important; margin:0 0 6px !important; align-items:center !important; }
html body #gv2-single .gv2-sv-logo{ width:56px !important; height:56px !important; flex:0 0 56px !important; font-size:22px !important; }
html body #gv2-single .gv2-sv-title{ margin:0 0 2px !important; font-size:18px !important; line-height:1.25 !important; }
html body #gv2-single .gv2-sv-meta{ margin:0 !important; }
html body #gv2-single .gv2-sv-desc{ margin:0 0 6px !important; line-height:1.45 !important; }
html body #gv2-single .gv2-sv-acts{ gap:6px !important; margin:0 !important; }
html body #gv2-single .gv2-sv-acts > *{ margin:0 !important; }
html body #gv2-single .gv2-reqs{ margin:6px 0 0 !important; }
html body #gv2-single .gv2-body{ gap:6px !important; }
html body #gv2-single .gv2-feed-wrap,
html body #gv2-single .gv2-body-side{ margin:0 !important; }
html body #gv2-single .gv2-feed-title{ margin:0 0 6px !important; }
html body #gv2-single .gv2-composer{ margin:0 0 6px !important; padding:6px !important; }
html body #gv2-single .gv2-comp-pill{ margin:0 !important; }
html body #gv2-single .gv2-post-hint{ margin:4px 0 0 !important; }
html body #gv2-single .gv2-feed{ gap:6px !important; }
html body #gv2-single .gv2-feed > *{ margin-top:0 !important; margin-bottom:0 !important; }
html body #gv2-single .gv2-feed-empty{ padding:16px 8px !important; }
html body #gv2-single .gv2-sp{ gap:6px !important; }
html body #gv2-single .gv2-sp-box{ padding:6px 8px !important; }
html body #gv2-single .gv2-sp-h{ margin-bottom:4px !important; }
html body #gv2-single .gv2-sp-mem{ padding:4px 0 !important; gap:6px !important; }

/* ============================================================
   [v5.20.826] PAGE TAB ROWS — Post a Job, Connections, My Engagements.
   PK: they were small pills crammed to the left (2px gap, tight padding, width:auto).
   Now one consistent bar: tabs share the FULL width evenly, 6px apart, 32px tall,
   and wrap to a second line on narrow screens instead of squashing or scrolling.
   #main-content#main-content = two ids, enough to beat the generic button
   normaliser (html body button:not(#plm-emojis button):not(...)) without
   touching it. Jobs board tabs (special scroll/fade) and the company page's
   underline tabs are deliberately not included.
   ============================================================ */
html body #main-content#main-content .pj-tabs,
html body #main-content#main-content .conn-tabs,
html body #main-content#main-content #engagements-page .eng-tabs{
  /* [v5.20.827] PK: EXACTLY the Recruiter Recruitment row (inc/companies/pages.php .rc-tabs) */
  display:flex!important;flex-wrap:wrap!important;gap:6px!important;width:100%!important;
  overflow:visible!important;margin:18px 0 14px!important;padding:0!important;justify-content:stretch!important;box-sizing:border-box!important
}
html body #main-content#main-content .pj-tabs > .pj-tab,
html body #main-content#main-content .conn-tabs > .conn-tab,
html body #main-content#main-content #engagements-page .eng-tabs > .eng-tab{
  /* [v5.20.833] size + corners now come from Site Settings (inc/button-size.php, Corners → Buttons);
     this rule only spreads the tabs across the row */
  flex:1 1 0!important;min-width:max-content!important;width:auto!important;max-width:none!important;
  margin:4px 0!important;gap:5px!important;font-weight:400!important;white-space:nowrap!important;text-align:center!important;position:relative!important
}
html body #main-content#main-content .pj-tabs > .pj-tab.active,
html body #main-content#main-content .conn-tabs > .conn-tab.active,
html body #main-content#main-content #engagements-page .eng-tabs > .eng-tab.active{font-weight:500!important}
html body #main-content#main-content .pj-tabs > .pj-tab .pj-badge{position:static!important;transform:none!important;top:auto!important;left:auto!important;margin:0!important;min-width:16px!important;height:16px!important;line-height:16px!important;font-size:10px!important;padding:0 4px!important;box-shadow:none!important}

/* [v5.20.831] own-post TOTAL VIEWS (replaces the pencil — Edit is in the ⋮ menu). A <span>, laid out like its button neighbours. */
html body .engagement-bar .post-views-btn{display:inline-flex!important;align-items:center!important;gap:4px!important;color:#4b5563!important;-webkit-text-fill-color:#4b5563!important;font-size:inherit;line-height:1;vertical-align:middle;user-select:none}
html body .engagement-bar .post-views-btn svg{width:13px!important;height:13px!important;stroke:currentColor!important;fill:none!important}

/* [v5.20.835] PK: replies sit 1-2mm (4-7px) under their comment — feed AND full-screen view.
   The "N replies" toggle is on the Like / Reply row now, so nothing sits between a comment and its replies. */
html body .comment-item.plc.plc.plc .plc-body > .plc-acts{margin-top:2px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt.plc-tt{display:inline-flex!important;align-items:center!important;gap:3px!important;margin:0 0 0 4px!important;padding:2px 6px!important;font-size:11.5px!important;font-weight:600!important;line-height:1!important;color:#4b5563!important;-webkit-text-fill-color:#4b5563!important;background:none!important;border:0!important;box-shadow:none!important;height:auto!important;min-height:0!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt .tt-chev{font-size:9px!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children{margin:4px 0 0!important}
html body .comment-children .comment-item.plc.plc.plc{margin:0 0 3px!important}
html body .comment-children .comment-item.plc.plc.plc .plc-body > .comment-text{margin-top:1px!important}
html body .comment-children .comment-item.plc.plc.plc .plc-body > .plc-acts{margin-top:1px!important}
/* icon-only Edit / Delete (comment actions): same size and colour as Like / Reply */
html body .comment-item.plc.plc.plc .plc-acts .comment-edit-btn.plc-act.plc-act,
html body .comment-item.plc.plc.plc .plc-acts .comment-delete-btn.plc-act.plc-act{padding:2px 5px!important;min-width:0!important}
html body .comment-item.plc.plc.plc .plc-acts .comment-delete-btn.plc-act.plc-act:hover{color:#b91c1c!important;-webkit-text-fill-color:#b91c1c!important}

/* [v5.20.836] PK: Like / Reply icon-only (labels kept for screen readers via aria-label) */
html body .comment-item.plc.plc.plc .plc-acts .plc-act .plc-lbl{display:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-minor{opacity:1!important}
/* [v5.20.836] PK: replies line up straight under the comment — avatar under avatar, text under text */
html body .comment-item.plc.plc.plc .plc-body > .comment-children.comment-children{margin-left:-41px!important;padding-left:0!important;border-left:0!important}
html body .comment-children .comment-item.plc.plc.plc{grid-template-columns:32px minmax(0,1fr)!important;column-gap:9px!important}
html body .comment-children .comment-item.plc.plc.plc > .plc-av{width:32px!important;height:32px!important}
html body .comment-children .comment-item.plc.plc.plc > .plc-av img{width:32px!important;height:32px!important}
/* [v5.20.837] PK: replies start from the centre of the parent's avatar (32px avatar -> 16px in) */
html body .comment-item.plc.plc.plc .plc-body > .comment-children.comment-children{margin-left:-25px!important}
/* "N replies" stays a plain text action — beat the site-wide button colour */
html body #main-content#main-content .comment-item.plc .plc-acts button.plc-tt.plc-tt,
html body .comment-item.plc.plc.plc .plc-acts button.plc-tt.plc-tt.plc-tt{background:none!important;background-color:transparent!important;color:#4b5563!important;-webkit-text-fill-color:#4b5563!important;border:0!important;box-shadow:none!important}
/* [v5.20.838] PK: 3-level thread with connector lines (like the approved mockup).
   Line runs down from the centre of the parent avatar, rounded elbow into each reply. */
html body .comment-item.plc.plc.plc{position:relative!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children.plc-thread{position:relative!important;margin:4px 0 0 -25px!important;padding:0!important;border:0!important}
html body .plc-thread > .comment-item.plc.plc.plc{padding-left:16px!important;margin:0 0 4px!important;grid-template-columns:32px minmax(0,1fr)!important;column-gap:9px!important}
html body .plc-thread > .comment-item.plc.plc.plc:last-child{margin-bottom:0!important}
/* trunk: from just under the parent's avatar to the bottom of the thread */
html body .comment-item.plc.plc.plc:has(> .plc-body > .plc-thread:not([style*="none"]))::after{content:""!important;position:absolute!important;left:16px!important;top:33px!important;bottom:0!important;border-left:1.5px solid #c4c8cf!important;pointer-events:none!important;z-index:0!important}
/* elbow into each reply (ends at the reply avatar's centre) */
html body .plc-thread > .comment-item.plc.plc.plc::before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:14px!important;height:16px!important;border-left:1.5px solid #c4c8cf!important;border-bottom:1.5px solid #c4c8cf!important;border-radius:0 0 0 9px!important;pointer-events:none!important;z-index:1!important}
/* stop the trunk at the last elbow (mask the rest in the card colour) */
html body .plc-thread > .comment-item.plc.plc.plc:last-child > .plc-body{position:relative!important}
html body .plc-thread > .comment-item.plc.plc.plc:last-child > .plc-body::before{content:""!important;position:absolute!important;left:-58px!important;top:17px!important;bottom:-6px!important;width:5px!important;background:var(--plc-bg,#fff)!important;z-index:3!important;pointer-events:none!important}
/* a reply to a level-3 comment = new entry with "Replying to" line */
html body .comment-item.plc.plc.plc.c-overflow{margin-top:2px!important}
html body .comment-item.plc.plc.plc.c-overflow > .plc-body > .comment-reply-quote{border-left:0!important;padding-left:0!important}
html body .plc-thread > .comment-item.plc.plc.plc:has(> .plc-body > .plc-thread:not([style*="none"]))::after{left:32px!important}
/* newest-first (full-screen) lists: a thread's new entries stay right under it */
html body #pl-lightbox .plb-comments .comments-list > .comment-item,
html body .lightbox .lightbox-comments .comments-list > .comment-item,
html body #lb-tab-comments .comments-list > .comment-item{order:var(--plc-ord,0)!important}
/* [v5.20.839] PK: confirm dialogs (Delete comment etc.) sit ABOVE the full-screen post view */
html body #gm-dialog#gm-dialog, html body .gm-overlay.gm-overlay{z-index:2147483646!important}
/* [v5.20.840] PK: tighter vertical spacing between comments / threads (feed + full-screen) */
html body .comments-list.comments-list{gap:6px!important;row-gap:6px!important}
html body .comments-list > .comment-item.plc.plc.plc{margin:0 0 6px!important;padding-top:0!important;padding-bottom:0!important}
html body #pl-lightbox .plb-comments .comments-list > .comment-item.plc.plc.plc,
html body .lightbox .lightbox-comments .comments-list > .comment-item.plc.plc.plc,
html body #lb-tab-comments .comments-list > .comment-item.plc.plc.plc{margin:0!important;padding-top:0!important;padding-bottom:0!important}
html body .plc-thread > .comment-item.plc.plc.plc{margin-bottom:2px!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children.plc-thread{margin-top:2px!important}
html body .comment-item.plc.plc.plc.c-overflow{margin-top:0!important}
/* [v5.20.841] PK: each comment shorter — tight name / headline / text / icon rows */
html body .comment-item.plc.plc.plc .plc-body > .plc-head{margin:0!important;padding:0!important;min-height:0!important;align-items:flex-start!important}
html body .comment-item.plc.plc.plc .plc-head .plc-who{line-height:1.15!important;gap:0!important;margin:0!important;padding:0!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{line-height:16px!important;margin:0!important;padding:0!important}
html body .comment-item.plc.plc.plc .plc-head .plc-hl{display:block!important;line-height:14px!important;font-size:11.5px!important;margin:0!important;padding:0!important}
html body .comment-item.plc.plc.plc .plc-head .plc-age{line-height:16px!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-text{margin:1px 0 0!important;padding:0!important;line-height:1.3!important;min-height:0!important}
html body .comment-item.plc.plc.plc .plc-body > .plc-acts{margin-top:1px!important;min-height:0!important;height:18px!important;align-items:center!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{height:18px!important;min-height:18px!important;padding-top:0!important;padding-bottom:0!important;line-height:18px!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-reply-quote{margin:0 0 1px!important;line-height:14px!important}
html body .plc-thread > .comment-item.plc.plc.plc::before{height:16px!important}
/* [v5.20.842] PK: avatars as close as possible — 2 rows per comment:
   row 1 = name · headline · age · icons, row 2 = the text */
html body .comment-item.plc.plc.plc > .plc-body{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:6px!important;row-gap:0!important;align-items:center!important;min-width:0!important}
html body .comment-item.plc.plc.plc > .plc-body > *{grid-column:1 / -1!important;min-width:0!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-reply-quote{grid-row:1!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-head{grid-row:2!important;grid-column:1!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{grid-row:2!important;grid-column:2!important;margin:0!important;height:18px!important;gap:2px!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-text{grid-row:3!important;margin:0!important;line-height:17px!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-edit-form{grid-row:3!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-sep{display:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{padding:0 3px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt.plc-tt{margin-left:2px!important;padding:0 4px!important;font-size:11px!important}
html body .comment-item.plc.plc.plc .plc-body > .plc-head{display:flex!important;align-items:baseline!important;gap:6px!important;height:18px!important;overflow:hidden!important;margin:0!important}
html body .comment-item.plc.plc.plc .plc-head .plc-who{display:flex!important;flex-direction:row!important;align-items:baseline!important;gap:6px!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{flex:0 0 auto!important;white-space:nowrap!important}
html body .comment-item.plc.plc.plc .plc-head .plc-hl{display:inline-block!important;flex:1 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;line-height:16px!important}
html body .comment-item.plc.plc.plc .plc-head .plc-age{flex:0 0 auto!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children.plc-thread{margin-top:2px!important}
html body .comment-item.plc.plc.plc > .plc-body > .reply-form-wrapper{grid-row:4!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-children{grid-row:5!important}
/* ===== [v5.20.843] PK picked Option F: one line per comment, 16px avatar, ~4mm avatar-to-avatar ===== */
html body .comment-item.plc.plc.plc,
html body .comment-children .comment-item.plc.plc.plc,
html body .plc-thread > .comment-item.plc.plc.plc{grid-template-columns:16px minmax(0,1fr)!important;column-gap:6px!important}
html body .comment-item.plc.plc.plc > .plc-av,
html body .comment-children .comment-item.plc.plc.plc > .plc-av{width:16px!important;height:16px!important;margin:0!important}
html body .comment-item.plc.plc.plc > .plc-av img,
html body .comment-children .comment-item.plc.plc.plc > .plc-av img{width:16px!important;height:16px!important;min-width:16px!important;border-width:0!important;padding:0!important}
/* one row: name | text | age | icons */
html body .comment-item.plc.plc.plc > .plc-body{grid-template-columns:auto minmax(0,1fr) auto auto!important;column-gap:6px!important;align-items:start!important;font-size:12px!important;line-height:16px!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-head,
html body .comment-item.plc.plc.plc .plc-body > .plc-head > .plc-who{display:contents!important}
html body .comment-item.plc.plc.plc .plc-head .plc-hl{display:none!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{grid-row:2!important;grid-column:1!important;font-size:12px!important;line-height:16px!important;white-space:nowrap!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-text{grid-row:2!important;grid-column:2!important;font-size:12px!important;line-height:16px!important;margin:0!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-edit-form{grid-row:2!important;grid-column:2!important}
html body .comment-item.plc.plc.plc .plc-head .plc-age{grid-row:2!important;grid-column:3!important;font-size:10.5px!important;line-height:16px!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{grid-row:2!important;grid-column:4!important;height:16px!important;gap:0!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{height:16px!important;min-height:16px!important;line-height:16px!important;padding:0 3px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act svg{width:13px!important;height:13px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt.plc-tt{font-size:10.5px!important;padding:0 3px!important;margin-left:1px!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-reply-quote{grid-row:1!important;grid-column:1 / -1!important;font-size:10.5px!important;line-height:13px!important;margin:0!important}
html body .comment-item.plc.plc.plc > .plc-body > .reply-form-wrapper{grid-row:3!important;grid-column:1 / -1!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-children{grid-row:4!important;grid-column:1 / -1!important}
/* spacing: 1px between comments, 3px between threads */
html body .comments-list.comments-list{gap:3px!important;row-gap:3px!important}
html body .comments-list > .comment-item.plc.plc.plc{margin:0 0 3px!important}
html body #pl-lightbox .plb-comments .comments-list > .comment-item.plc.plc.plc,
html body .lightbox .lightbox-comments .comments-list > .comment-item.plc.plc.plc,
html body #lb-tab-comments .comments-list > .comment-item.plc.plc.plc{margin:0!important}
html body .plc-thread > .comment-item.plc.plc.plc{margin:0 0 1px!important;padding-left:8px!important}
html body .plc-thread > .comment-item.plc.plc.plc:last-child{margin-bottom:0!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children.plc-thread.plc-thread{margin:1px 0 0 -14px!important}
/* thread lines for the 16px avatar (centre = 8px) */
html body .comment-item.plc.plc.plc:has(> .plc-body > .plc-thread:not([style*="none"]))::after{left:7.5px!important;top:17px!important}
html body .plc-thread > .comment-item.plc.plc.plc:has(> .plc-body > .plc-thread:not([style*="none"]))::after{left:15.5px!important}
html body .plc-thread > .comment-item.plc.plc.plc::before{left:0!important;top:-1px!important;width:7px!important;height:9px!important;border-radius:0 0 0 6px!important}
html body .plc-thread > .comment-item.plc.plc.plc:last-child > .plc-body::before{left:-31px!important;top:10px!important;width:4px!important}
html body .comment-item.plc.plc.plc > .plc-av > .comment-avatar,
html body .comment-children .comment-item.plc.plc.plc > .plc-av > .comment-avatar{width:16px!important;height:16px!important;box-shadow:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt .tt-w{display:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{padding:0 2px!important}
html body .plc-thread > .comment-item.plc.plc.plc:last-child > .plc-body::before{bottom:0!important}
/* [v5.20.843b] PK: icons BELOW each comment (own row), full name always shown */
html body .comment-item.plc.plc.plc > .plc-body{grid-template-columns:auto minmax(0,1fr) auto!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{grid-row:3!important;grid-column:1 / -1!important;justify-self:start!important;margin:0 0 0 -2px!important}
html body .comment-item.plc.plc.plc > .plc-body > .reply-form-wrapper{grid-row:4!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-children{grid-row:5!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{overflow:visible!important;text-overflow:clip!important;max-width:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-tt .tt-w{display:inline!important}
/* [v5.20.843c] 3 short rows: full name + time / text / icons */
html body .comment-item.plc.plc.plc > .plc-body{grid-template-columns:minmax(0,1fr) auto!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{grid-row:2!important;grid-column:1!important;white-space:normal!important}
html body .comment-item.plc.plc.plc .plc-head .plc-age{grid-row:2!important;grid-column:2!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-text,
html body .comment-item.plc.plc.plc > .plc-body > .comment-edit-form{grid-row:3!important;grid-column:1 / -1!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{grid-row:4!important}
html body .comment-item.plc.plc.plc > .plc-body > .reply-form-wrapper{grid-row:5!important}
html body .comment-item.plc.plc.plc > .plc-body > .comment-children{grid-row:6!important}
/* [v5.20.845] PK: finger-sized tap areas for comment icons on phones / touch screens (no overlap) */
@media (pointer:coarse){
  html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{height:auto!important;gap:6px!important;margin:1px 0 2px -9px!important}
  html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{min-width:36px!important;height:30px!important;min-height:30px!important;padding:0 9px!important;justify-content:center!important;border-radius:8px!important}
  html body .comment-item.plc.plc.plc .plc-acts .plc-act svg{width:14px!important;height:14px!important}
}
/* [v5.20.847] continued thread head + jump link */
html body .comment-item.plc.plc.plc.c-cont > .plc-body > .comment-reply-quote{grid-row:1!important;grid-column:1 / -1!important;font-size:10.5px!important;line-height:13px!important;color:#9ca3af!important;border:0!important;padding:0!important;margin:0!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-jump.plc-jump{color:#5b21b6!important;-webkit-text-fill-color:#5b21b6!important}
/* [v5.20.848] continued thread directly under the comment where nesting stopped, back at the left edge */
html body .comment-item.plc.plc.plc > .plc-body > .plc-contwrap{grid-row:7!important;grid-column:1 / -1!important;position:relative!important;z-index:4!important;margin:2px 0 0 calc(-1 * var(--plc-out))!important;padding:2px 0 3px!important;background:var(--plc-bg,#fff)!important}
html body .plc-contwrap > .comment-item.plc.plc.plc{margin:0!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-contwrap{width:calc(100% + var(--plc-out))!important;max-width:none!important}
/* [v5.20.849] PK: 1-2mm between every item in a comment (icons, count, rows) */
html body .comment-item.plc.plc.plc > .plc-body{row-gap:2px!important}
html body .comment-item.plc.plc.plc > .plc-body > .plc-acts{gap:6px!important;height:18px!important;margin-top:1px!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-act.plc-act.plc-act{gap:3px!important;padding:0 2px!important}
html body .comment-item.plc.plc.plc .plc-acts .comment-eng-count:empty{display:none!important}
html body .comment-item.plc.plc.plc .plc-acts .plc-sep{display:none!important}
html body .plc-thread > .comment-item.plc.plc.plc{margin-bottom:4px!important}
html body .comment-item.plc.plc.plc .plc-body > .comment-children.plc-thread.plc-thread{margin-top:4px!important}
/* [v5.20.852] PK: time sits right next to the name (not at the far right) */
html body .comment-item.plc.plc.plc > .plc-body{grid-template-columns:auto minmax(0,1fr)!important}
html body .comment-item.plc.plc.plc .plc-head .plc-age{justify-self:start!important;margin-left:6px!important;align-self:baseline!important}
html body .comment-item.plc.plc.plc .plc-head .plc-name{align-self:baseline!important}
html body .post-card .pl-celeb{margin:6px 12px 8px!important}
/* [v5.20.857] PK: a single video fills the post frame edge to edge (no white side bars). Portrait clips
   are cropped top/bottom in the feed; full screen still shows the whole video. */
html body .post-card.post-card .post-media-grid.single.single .post-media-item.post-media-item video{width:100%!important;max-width:100%!important;object-fit:cover!important;background:#000!important}

/* ============================================================
   [v5.20.1004] TABLET / SMALL-LAPTOP WIDTHS (993–1400px) KEEP THE NETWORK / JOBS
   COLUMN (PK, iPad landscape). style.css hid .users-panel at <=1400px while
   pl-refinements.css still built a 4-track grid at 993–1200px, so the iPad showed
   an empty strip on the right and no Network / Jobs. Now:
     1121–1400px : nav | content | widgets | Network/Jobs  (all four)
      993–1120px : nav | content | Network/Jobs            (widgets drop out)
   Ads (pl-ads-wide) and full-width tabs keep their own two-column layout.
   ============================================================ */
@media (min-width:993px) and (max-width:1400px){
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide){grid-template-columns:160px minmax(0,1fr) 180px 170px!important}
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide) > .center-content{grid-column:2 / 3!important}
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide) > .right-sidebar{display:block!important;grid-column:3 / 4!important;grid-row:1!important}
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide) > .users-panel{display:flex!important;grid-column:4 / 5!important;grid-row:1!important}
  /* profile / Discover tabs: widgets hidden, Network/Jobs sits next to the content */
  html body #main-content .dashboard-grid.no-users-panel:not(.full-width-mode):not(.pl-ads-wide){grid-template-columns:160px minmax(0,1fr) 180px!important}
  html body #main-content .dashboard-grid.no-users-panel:not(.full-width-mode):not(.pl-ads-wide) > .right-sidebar{display:none!important}
  html body #main-content .dashboard-grid.no-users-panel:not(.full-width-mode):not(.pl-ads-wide) > .users-panel{grid-column:3 / 4!important}
}
@media (min-width:993px) and (max-width:1120px){
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide){grid-template-columns:160px minmax(0,1fr) 180px!important}
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide) > .right-sidebar{display:none!important}
  html body #main-content .dashboard-grid:not(.full-width-mode):not(.pl-ads-wide) > .users-panel{grid-column:3 / 4!important}
}