/* ===============================================================
   ENTERPRISE PULSE
   ===============================================================
   A premium enterprise news feed — not a dashboard. Two screens:
   Pulse Home (tabs + single-column feed + utility rail) and Story
   Detail (reading column + rail).

   One DOM per screen. The rail moves below the feed on mobile rather
   than being duplicated, so there is no second markup to keep in step.
   Everything is driven by the theme's design tokens; there are no
   !important rules in this file.
   =============================================================== */

/* ---- Shell ---- */
.pulse__container { max-width: 1280px; }

/* The breadcrumb sits directly under the sticky header, which has no
   bottom margin of its own — so without this the trail is flush
   against the nav and reads as part of it rather than as the start of
   the page. The site-wide .breadcrumbs rule only sets space BELOW
   itself, so the gap is added here rather than changed globally, where
   it would shift every other template. */
.pulse-story > .pulse__container > .breadcrumbs,
.pulse > .pulse__container > .breadcrumbs { margin-top: var(--space-5); }

@media (max-width: 767px) {
  .pulse-story > .pulse__container > .breadcrumbs,
  .pulse > .pulse__container > .breadcrumbs { margin-top: var(--space-3); }
}

.pulse__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-5) var(--space-8);
}

/* Two columns only when the CONTENT area can actually hold them.
   The media query measures the viewport, but Pulse renders inside the
   app shell whose 240px sidebar has already taken that width — so at
   1024–1279px "1fr + 320px" asked for more room than existed and the
   rail overflowed its track, which is what read as the rail floating
   over the page and being clipped at the right edge.

   A container query is the correct tool where supported: it measures
   the space Pulse actually has. The media query below it is the
   fallback for browsers without container queries, set at 1280px —
   the first width where 240px of sidebar plus a readable feed plus a
   320px rail genuinely fit. */
/* A plain media query, NOT a container query.
   container-type: inline-size establishes a containing block for
   fixed-position descendants — so the mobile share panel, which is
   position: fixed and expects to be laid out against the VIEWPORT, was
   instead positioned inside the container. That is why it kept
   appearing off to one side and away from the screen edges no matter
   how the insets were set. The two-column layout is not worth breaking
   a control for, so the breakpoint measures the viewport and is set at
   the width where 240px of app sidebar plus a readable feed plus a
   320px rail genuinely fit. */
@media (min-width: 1281px) {
  .pulse__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
    gap: var(--space-6);
  }
}

@media (min-width: 1920px) {
  /* Avoid stretched reading lines on very wide screens. */
  .pulse__container { max-width: 1440px; }
}

.pulse__main { min-width: 0; }

/* ---- Page identity ---- */
.pulse__head { margin-bottom: var(--space-4); }

.pulse__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
  letter-spacing: -0.01em;
}

.pulse__lede { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* ---- Tab bar ---- */
.pulse__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.pulse__tabs {
  display: flex;
  gap: var(--space-1);
  min-width: 0;
  /* The tab strip owns its overflow so the PAGE never scrolls
     sideways at 320px. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.pulse__tabs::-webkit-scrollbar { display: none; }

.pulse__tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pulse__tab:hover { color: var(--color-ink-heading); }

/* Selected state carries a colour AND a rule, so it survives
   high-contrast modes where colour alone would vanish. */
.pulse__tab.is-active {
  color: var(--color-secondary-text);
  border-bottom-color: var(--color-secondary);
}

.pulse__customize { flex-shrink: 0; margin-bottom: var(--space-2); white-space: nowrap; }

.pulse__filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.pulse__filter a { color: var(--color-secondary-text); font-weight: var(--fw-semibold); }

/* ---- Feed ---- */
.pulse__feed {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pulse__more { margin: var(--space-5) 0 0; text-align: center; }
.pulse__more .btn { min-height: 44px; }
.pulse__empty-action { margin: var(--space-4) 0 0; text-align: center; }

/* ===============================================================
   STORY CARD
   =============================================================== */
.pcard {
  position: relative;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pcard:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }

/* Focus ring on the card when its stretched link is focused — the
   keyboard user sees the same target the mouse user clicks. */
.pcard:focus-within { border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(109, 94, 245, 0.18); }

.pcard__media {
  position: relative;
  /* Reserved ratio: the box exists before the image loads, so nothing
     below shifts (CLS target). */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.pcard__media img { width: 100%; height: 100%; object-fit: cover; }

.pcard__media-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-muted);
}

.pcard__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

/* The ⋮ is pinned right by its own auto margin, not by
   space-between: a card with no editorial label has only one child in
   this row, and space-between then put the menu wherever the single
   item fell — which is why it appeared left on some cards and right on
   others. */
.pcard__head { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 28px; }

.pcard__label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.pcard__label--top { background: color-mix(in srgb, var(--color-secondary) 12%, transparent); color: var(--color-secondary-text); }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pcard__label--top { background: var(--color-bg-alt); color: var(--color-secondary-text); }
}

.pcard__title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-bold); }

.pcard__title a { color: var(--color-ink-heading); text-decoration: none; }
.pcard__title a:hover { color: var(--color-secondary-text); }

/* The stretched link makes the whole card clickable. It sits at z-index
   0 so the action controls (z-index 1, position: relative) keep their
   own clicks — the spec's "whole card clickable except actions". */
.pcard__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pcard__byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.pcard__avatar { display: inline-flex; }
.pcard__avatar img { width: 24px; height: 24px; border-radius: var(--radius-full); }
.pcard__author { font-weight: var(--fw-semibold); color: var(--color-ink-soft); }
.pcard__sep { color: var(--color-border); }

.pcard__excerpt {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

/* ---- Card actions ---- */
.pcard__actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
}

.pcard__action-form { margin: 0; }

.pcard__action,
.pcard__action-slot > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  cursor: pointer;
}

.pcard__action:hover,
.pcard__action-slot > *:hover { background: var(--color-bg-alt); color: var(--color-secondary-text); }

.pcard__action.is-active { color: var(--color-secondary-text); font-weight: var(--fw-semibold); }
.pcard__action--static { cursor: default; }
.pcard__action--share { margin-inline-start: auto; }
.pcard__action-slot { position: relative; z-index: 1; display: inline-flex; }

/* ---- Card overflow menu ---- */
/* margin-inline-start: auto pins it right whether or not the card has
   an editorial label beside it. */
.pcard__more { position: relative; z-index: 1; flex-shrink: 0; margin-inline-start: auto; }

.pcard__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pcard__more-btn:hover { background: var(--color-bg-alt); color: var(--color-ink); }

.pcard__more-panel,
.pstory__more-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  min-width: 180px;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

.pcard__more.is-open .pcard__more-panel,
.pstory__more.is-open .pstory__more-panel { display: block; }

.pcard__more-item,
.pstory__more-item {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.pcard__more-item:hover,
.pstory__more-item:hover { background: var(--color-bg-alt); }

/* ===============================================================
   RAIL
   =============================================================== */
.pulse__rail {
  min-width: 0;
  max-width: 100%;
  /* Flex column, not grid.
     As a grid the rail's rows were sized by the track algorithm, and a
     card whose content grew after layout (an image loading, a long
     topic name wrapping) could paint beyond the row it was given and
     run into the card below. A flex column sizes each card to its own
     content, so a card can never occupy less space than it needs. */
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: stretch;
  /* Explicitly in flow: not sticky, not floated, not absolute. Stated
     so no global sidebar rule can pin it and make it ride over the
     feed on scroll. */
  position: static;
  float: none;
}

/* Each card is its own block and cannot shrink below its content —
   the shrink is what let two cards visually overlap when the rail ran
   short of room. */
.prail {
  flex: 0 0 auto;
  min-height: 0;
  /* A new formatting context, so nothing inside a card (a dropdown, a
     wrapped heading) can spill onto the card that follows it. */
  position: relative;
  isolation: isolate;
}

.prail {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.prail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.prail__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-ink-heading); }
.prail__viewall { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-secondary-text); text-decoration: none; white-space: nowrap; }
.prail__text { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--color-ink-soft); }
.prail__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.prail__list--events { gap: var(--space-3); }

/* ---- Trending ---- */
.ptrend {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
}

.ptrend:hover { background: var(--color-bg-alt); }
.ptrend__icon { display: inline-flex; flex-shrink: 0; color: var(--color-secondary-text); }
.ptrend__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.ptrend__count { flex-shrink: 0; font-size: var(--fs-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Events ---- */
.pevent { display: flex; gap: var(--space-3); align-items: flex-start; }

.pevent__date {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 52px;
  padding: var(--space-2) 0;
  margin: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  line-height: 1.1;
}

.pevent__month { font-size: 10px; font-weight: var(--fw-bold); letter-spacing: .06em; color: var(--color-secondary-text); }
.pevent__day { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-ink-heading); }

.pevent__body { min-width: 0; display: grid; gap: 4px; }
.pevent__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink-heading); text-decoration: none; overflow-wrap: anywhere; }
.pevent__title:hover { color: var(--color-secondary-text); }
.pevent__meta { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.pevent__cta { justify-self: start; min-height: 36px; margin-top: 2px; }

/* ---- Who's Active ---- */
.pactive { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-1) 0; }
.pactive__avatar { flex-shrink: 0; display: inline-flex; }
.pactive__avatar img { border-radius: var(--radius-full); }
.pactive__body { min-width: 0; }
.pactive__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink-heading); text-decoration: none; }
.pactive__name:hover { color: var(--color-secondary-text); }
.pactive__meta { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- Related ---- */
.prelated { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-1) 0; }
.prelated__thumb { flex-shrink: 0; }
.prelated__thumb img { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; }
.prelated__body { min-width: 0; }
.prelated__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink-heading); text-decoration: none; overflow-wrap: anywhere; }
.prelated__title:hover { color: var(--color-secondary-text); }
.prelated__meta { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ===============================================================
   STORY DETAIL
   =============================================================== */
.pstory { min-width: 0; }

.pstory__badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-3);
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-secondary-text);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pstory__badge { background: var(--color-bg-alt); }
}

.pstory__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
  letter-spacing: -0.01em;
}

.pstory__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.pstory__source { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.pstory__source-avatar { flex-shrink: 0; display: inline-flex; }
.pstory__source-avatar img { border-radius: var(--radius-full); }

.pstory__source-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: var(--fw-bold);
  color: var(--color-ink-heading);
}

.pstory__verified { display: inline-flex; color: var(--color-success-text); }
.pstory__dates { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 6px; }
.pstory__updated { font-style: italic; }

.pstory__tools { display: flex; align-items: center; gap: var(--space-2); }
.pstory__tools .btn { min-height: 40px; }
.pstory__more { position: relative; }

.pstory__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.pstory__more-btn:hover { background: var(--color-bg-alt); color: var(--color-ink); }

.pstory__hero {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
}

.pstory__hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.pstory__h2 { margin: 0 0 var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-ink-heading); }
.pstory__section { margin-bottom: var(--space-5); color: var(--color-ink-soft); }
.pstory__content { margin-bottom: var(--space-5); color: var(--color-ink-soft); }
.pstory__takeaways { margin-bottom: var(--space-5); }

.ptake { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.ptake__item { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-ink-soft); }

.ptake__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-secondary) 12%, transparent);
  color: var(--color-secondary-text);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .ptake__check { background: var(--color-bg-alt); }
}

/* JDEVerse Perspective — visually separated from source reporting. */
.pstory__perspective {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--color-secondary);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
  color: var(--color-ink-soft);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pstory__perspective { background: var(--color-bg-alt); }
}

.pstory__perspective-title { margin: 0 0 var(--space-2); font-size: var(--fs-md); color: var(--color-secondary-text); }

.pstory__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.pstory__tag {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary-text);
  text-decoration: none;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .pstory__tag { background: var(--color-bg-alt); }
}

.pstory__sourceline { margin: 0 0 var(--space-5); font-size: var(--fs-sm); color: var(--color-text-muted); }
.pstory__sourceline a { color: var(--color-secondary-text); font-weight: var(--fw-semibold); }

/* ---- Engagement ---- */
/* One row: label + reactions on the left, comments + share + print on
   the right.
   Two elements both carried margin-inline-start: auto, and a second
   auto margin has nothing left to push against — so the tools group
   was bumped onto its own line and sat right while everything else sat
   left. Exactly one auto margin now creates the split, and the tools
   simply follow the comments link. */
.pstory__engage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* The reactions take the slack, so the right-hand cluster is pushed to
   the edge rather than floating mid-row. */
.pstory__reactions { flex: 1 1 auto; }

.pstory__engage-label { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-ink-heading); }
.pstory__reactions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.pstory__react-form { margin: 0; }

.pstory__react {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  cursor: pointer;
}

.pstory__react:hover { border-color: var(--color-secondary); color: var(--color-secondary-text); }
.pstory__react.is-active { border-color: var(--color-secondary); color: var(--color-secondary-text); font-weight: var(--fw-semibold); }
.pstory__react--static { cursor: default; }
.pstory__react--comments { margin-inline-start: auto; }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 767px) {
  .pulse__layout { padding-block: var(--space-4) var(--space-6); gap: var(--space-5); }
  .pulse__title { font-size: var(--fs-xl); }

  .pulse__bar { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .pulse__customize { align-self: flex-start; margin-bottom: var(--space-2); }

  /* Card becomes thumbnail + text side by side with a compact image,
     matching the mobile reference rather than a stacked card that
     would push the title below the fold. */
  .pcard { grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); }
  .pcard__media { aspect-ratio: 1 / 1; }
  .pcard__title { font-size: var(--fs-sm); }
  .pcard__excerpt { display: none; }
  .pcard__byline { font-size: 11px; }

  .pstory__title { font-size: var(--fs-xl); }
  .pstory__meta { flex-direction: column; align-items: flex-start; }
  .pstory__tools { width: 100%; }
  .pstory__react--comments { margin-inline-start: 0; }
}

@media (max-width: 360px) {
  /* Nothing may overflow at 320px. */
  .pcard { grid-template-columns: minmax(0, 1fr); }
  .pcard__media { aspect-ratio: 16 / 9; }
  .pcard__action--share { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pulse__tab { transition: none; }
}




/* Current page carries a border AND a fill, so the state survives
   high-contrast modes where colour alone would be lost. */
.ppager__page.is-current {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}


/* ---- Counters ---- */
.pcard__count,
.pstory__savecount {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.pcard__action--share [data-share-total]:empty { display: none; }
.pstory__tools [data-share-total]:empty { display: none; }

/* ---- Shared components adopted from the article page ----
   share-row, quick-reactions and the bookmark button are the site's
   own components; these rules only place them inside Pulse, they do
   not restyle the components themselves. */
.pstory__share { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.pstory__share-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pstory__tools { flex-wrap: wrap; row-gap: var(--space-2); }

.pstory__comments-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  /* The single split point in this row. */
  margin-inline-start: auto;
  flex-shrink: 0;
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  text-decoration: none;
  white-space: nowrap;
}

.pstory__comments-link:hover { color: var(--color-secondary-text); }

/* ---- Share dropdowns (card + story detail) ----
   The panel holds the shared share-row component; these rules only
   position it. The toggle keeps position: relative and a z-index above
   the card's stretched link, or the link would swallow the click. */
.pcard__share,
.pstory__share { position: relative; z-index: 1; display: inline-flex; }

.pcard__share-panel,
.pstory__share-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  /* Anchored to the button's START edge, not its end.
     End-anchoring throws the panel leftward, so a Share button near the
     left of the content column pushed 232px of panel out over the
     sidebar and off the screen. Opening rightward from the button keeps
     it inside the column, because the button is never at the right
     edge of the viewport. */
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: var(--z-dropdown);
  width: max-content;
  min-width: 232px;
  /* Never wider than the screen, whatever the anchor. */
  max-width: min(320px, calc(100vw - var(--space-6)));
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-lg);
}

/* In the story's TOP tools the button sits at the right of its row, so
   there the panel opens leftward — the mirror of the rule above, for
   the mirrored position. */
.pstory__meta .pstory__share-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* Cards: the share control is the last item in the action row, close
   to the card's right edge, so its panel opens leftward too. */
.pcard__share-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/* On the story detail the button sits near the top of the page, so its
   panel opens downward — a panel above it would be clipped by the
   viewport edge. */
/* Scoped to the top tools only: that button is near the top of the
   page, so its panel opens downward. The unscoped version also caught
   the bottom Share, whose panel then opened downward off the end of
   the page. */
.pstory__meta .pstory__share-panel { bottom: auto; top: calc(100% + 6px); }

.pcard__share.is-open .pcard__share-panel,
.pstory__share.is-open .pstory__share-panel { display: block; }

.pcard__share-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The share networks wrap inside the panel rather than forcing it
   wider than a phone. */
.pcard__share-panel .share-row,
.pstory__share-panel .share-row { flex-wrap: wrap; }

@media (max-width: 480px) {
  /* Anchored to the card's edge so a panel near the screen edge cannot
     open off-screen. */
  .pcard__share-panel {
    inset-inline: auto 0;
    min-width: 0;
    width: max-content;
    max-width: min(280px, calc(100vw - var(--space-6)));
  }
}

@media (max-width: 767px) {
  .pstory__comments-link { margin-inline-start: 0; }
}

/* ===============================================================
   RICHNESS PASS — featured story and two-up grid
   =============================================================== */

.pulse__title { display: flex; align-items: center; gap: var(--space-3); }
.pulse__mark { display: inline-flex; color: var(--color-secondary-text); }

/* ---- Featured story ---- */
.pulse__lead { margin: 0 0 var(--space-4); padding: 0; list-style: none; }

.pcard--featured { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-5); }
.pcard--featured .pcard__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.pcard--featured .pcard__title { font-size: var(--fs-xl); }
.pcard--featured .pcard__excerpt { display: block; }

/* ---- Two-up grid for the rest ---- */
.pulse__feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* At two-up the card stacks internally: a 200px thumbnail beside text
   in a half-width column leaves the title nowhere to go. */
.pulse__feed .pcard { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.pulse__feed .pcard__media { aspect-ratio: 16 / 9; }

/* ---- Events: the Register row ---- */
.pevent__cta { justify-self: start; }

@media (max-width: 1023px) {
  /* One column before the rail moves below, so cards keep a readable
     measure rather than being squeezed two-up in a narrow main. */
  .pulse__feed { grid-template-columns: minmax(0, 1fr); }
  .pcard--featured { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .pulse__feed .pcard { grid-template-columns: 96px minmax(0, 1fr); }
  .pulse__feed .pcard__media { aspect-ratio: 1 / 1; }
  .pcard--featured .pcard__title { font-size: var(--fs-md); }
}



/* ---- Share + Print at the foot of a story ----
   Sits with the reactions: both answer "what now that I have read
   this". The panel opens upward here because the row is low on the
   page and a downward panel would be clipped by the viewport. */
.pstory__bottom-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* No auto margin: the comments link already owns the split. */
  margin-inline-start: 0;
  flex-shrink: 0;
}

.pstory__bottom-tools .pstory__share-panel {
  top: auto;
  bottom: calc(100% + 6px);
}

@media (max-width: 767px) {
  /* Stacked, each part on its own full-width line — a right-aligned
     cluster in a wrapped row is what reads as misaligned on a phone. */
  .pstory__engage { align-items: stretch; gap: var(--space-3); }
  .pstory__engage-label { width: 100%; }
  .pstory__reactions { flex: 0 0 auto; width: 100%; }

  .pstory__comments-link {
    margin-inline-start: 0;
    /* Its own line, aligned with the label above it rather than
       trailing the reactions. */
    width: 100%;
    min-height: 0;
  }

  .pstory__bottom-tools { width: 100%; gap: var(--space-3); }

  /* Share is wrapped in .pstory__share, so `flex: 1` on .btn alone
     never reached it — Print stretched and Share kept its content
     width, which is the uneven pair in the screenshot. Both DIRECT
     children flex instead, and the share button fills its wrapper. */
  .pstory__bottom-tools > * { flex: 1 1 0; min-width: 0; }
  .pstory__bottom-tools .btn { width: 100%; justify-content: center; }
}

/* ===============================================================
   MOBILE FIXES — share panel inside the screen, rail clear of the
   fixed bottom navigation
   =============================================================== */
/* 768px, not 767: the bottom navigation itself appears at
   max-width: 768px (responsive.css), and a 1px window where the bar is
   visible but nothing clears it is exactly the kind of gap that gets
   reported as "sometimes the last card is cut off". */
@media (max-width: 767px) {
  /* The share panel is anchored to its button, and a button near the
     right edge pushed the panel off-screen — the networks were
     unreachable. Pinning it to the VIEWPORT instead keeps it inside
     the screen wherever its button happens to sit. */
  /* The share row inside the panel spreads across the wider box rather
     than clustering at one edge. */
  .pstory__share-panel .share-row,
  .pcard__share-panel .share-row { justify-content: flex-start; }

  /* Clear the fixed bottom navigation.
     Without this the last rail card — Related Stories — ran underneath
     the bar and its final rows were unreachable, which reads as the
     card flowing over the footer. */
  .pulse,
  .pulse-story {
    padding-bottom: calc(64px + var(--space-6));
  }
}

/* The rail must never be clipped or collapsed on any width: every card
   in it is content the reader can scroll to. Stated explicitly because
   a rail that renders but cannot be seen looks exactly like a rail
   that failed to render. */
.pulse__rail,
.pulse__rail .prail {
  overflow: visible;
  min-height: 0;
}

@media (min-width: 1024px) {
  /* On desktop the rail is the grid's second column. align-self: start
     keeps it at its natural height; without it a stretched item can
     exceed the row and its lower cards fall outside the visible box. */
  .pulse__rail { align-self: start; height: auto; }
}

/* ===============================================================
   VISUAL PASS — flat, professional
   ===============================================================
   No gradients. Depth comes from four things instead, which is what
   enterprise software actually reads as "considered": a restrained
   accent used sparingly, solid low-opacity tints, one-pixel borders
   doing real work, and shadows that only appear on interaction.

   Colour is never the only signal — every state that matters also has
   text or an icon, so the page survives high-contrast mode.
   =============================================================== */

/* ---- Title mark ---- */
.pulse__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-secondary-text);
}

/* ---- Featured story ----
   Distinguished by a heavier top rule and a slightly deeper surface,
   not by a coloured frame. */
.pcard--featured {
  border-top: 3px solid var(--color-secondary);
  background: var(--color-white);
}

.pcard--featured .pcard__media {
  background: var(--color-bg-alt);
  padding: 0;
}

.pcard--featured .pcard__media img { border-radius: var(--radius-md); }

/* Shadow on hover only: a card at rest sits flat on the page, and the
   lift is feedback rather than decoration. */
.pcard:hover { box-shadow: 0 2px 12px rgba(17, 24, 39, 0.06); }

/* ---- Editorial labels ---- */
.pcard__label--top,
.pstory__badge {
  background: rgba(109, 94, 245, 0.10);
  color: #4C3FD1;
  border: 1px solid rgba(109, 94, 245, 0.18);
}

/* ---- Rail ---- */
.prail { background: var(--color-white); }

.prail__title {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.prail__head { align-items: baseline; }

/* One accent for every trending row. Cycling hues implied a ranking
   the data does not carry; a single restrained tint reads as a list. */
.ptrend__icon {
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-secondary-text);
}

.ptrend:hover .ptrend__icon { background: rgba(109, 94, 245, 0.10); }

.ptrend__count {
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}

/* ---- Events ---- */
.pevent__date {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.pevent__month { color: var(--color-secondary-text); }

/* ---- Saved state ---- */
.pcard__action-slot .bookmark-form__btn.is-active,
.pstory__tools .bookmark-form__btn.is-active { color: var(--color-secondary-text); }

/* ===============================================================
   STORY DETAIL
   =============================================================== */

.pstory__role {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-2);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

/* Tools grouped in one bordered cluster rather than loose buttons. */
.pstory__meta .pstory__tools {
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.pstory__meta .pstory__tools .btn { border-color: transparent; }

.pstory__meta .pstory__tools .btn:hover {
  background: var(--color-bg-alt);
  border-color: transparent;
  color: var(--color-secondary-text);
}

/* Hero: a plain framed image. */
.pstory__hero {
  padding: 0;
  border: 0;
  background: none;
}

.pstory__hero img { border-radius: 0; }

/* Key Takeaways: a plain list under a heading, like any other section
   of the article. */
.pstory__takeaways {
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: var(--space-5);
}

.pstory__takeaways .ptake {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.pstory__takeaways .ptake {
  gap: var(--space-2);
}

.pstory__takeaways .ptake__item {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
  border: 0;
}

/* A small accent mark, not a filled tile — the list should read as
   part of the article, not as a widget dropped into it. */
.pstory__takeaways .ptake__check {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-secondary-text);
}

/* Section headings carry a solid accent rule. */
.pstory__takeaways .pstory__h2,
.pstory__section .pstory__h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pstory__takeaways .pstory__h2::before,
.pstory__section .pstory__h2::before {
  content: '';
  width: 3px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
}

.pstory__content h2 {
  scroll-margin-top: calc(var(--jdev-header-h, 64px) + var(--space-5));
  color: var(--color-ink-heading);
}

/* Perspective panel: flat tint, accent edge, no gradient. */
.pstory__perspective { background: var(--color-bg-alt); }

@media (prefers-reduced-motion: reduce) {
  .pcard:hover { box-shadow: none; }
}

/* ---- Related stories: a fixed thumbnail slot on every row ----
   The slot has its own dimensions so the row's grid holds whether the
   image has loaded, failed, or was never set — the title column starts
   at the same x on every row either way. */
.prelated__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}

.prelated__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The initial, not a stock image: it says "no picture" honestly while
   still filling the slot. */
.prelated__placeholder {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-secondary-text);
  line-height: 1;
}

.prelated { align-items: center; }

/* ===============================================================
   MOBILE TOOL ROWS — last in the file, deliberately
   ===============================================================
   These override the desktop treatments above. They sit at the END of
   the stylesheet because CSS resolves ties by source order: the same
   rules earlier in the file were being undone by the desktop pass that
   followed them, which is why the top and bottom Share buttons stopped
   matching each other.
   =============================================================== */
@media (max-width: 767px) {
  /* Both rows behave identically: one wrapping line of equal controls,
     with the share panel expanding beneath the WHOLE ROW rather than
     beneath the button. Anchoring to the row means the panel is exactly
     the column's width — it cannot run off either edge, and it looks
     the same at the top of the story and at the foot of it. */
  .pstory__meta .pstory__tools,
  .pstory__bottom-tools {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* Share is a control like the others — not a full-width banner on a
     line of its own. */
  .pstory__share { position: static; display: inline-flex; width: auto; }

  /* An earlier rule stretched the bottom row's children to equal
     halves, which is what pushed Share to the far left and Print to the
     far right with a gulf between them. Both rows now size their
     controls to content and group them at the start, so the top and the
     foot of the story look the same. */
  .pstory__bottom-tools > *,
  .pstory__meta .pstory__tools > * { flex: 0 0 auto; }

  .pstory__meta .pstory__tools .btn,
  .pstory__bottom-tools .btn,
  .pstory__share > .btn {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    border-color: var(--color-border);
  }

  /* Left-aligned, sharing one gap — not spread across the row. */
  .pstory__bottom-tools { justify-content: flex-start; margin-inline-start: 0; }

  /* The panel: full width of the row, in the flow of the column. */
  .pstory__share-panel,
  .pstory__meta .pstory__share-panel,
  .pstory__bottom-tools .pstory__share-panel {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + var(--space-2));
    bottom: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    z-index: var(--z-dropdown);
  }

  /* Room for the panel to open into, so it never sits on top of the
     paragraph below the row. */
  .pstory__share.is-open ~ *,
  .pstory__meta .pstory__tools:has(.is-open),
  .pstory__bottom-tools:has(.is-open) { margin-bottom: 0; }

  .pstory__share-panel .share-row { justify-content: flex-start; flex-wrap: wrap; }
}