/* pulse.css — the live market-pulse card inside a blog article.
 *
 * Built from the site's own variables and the pill palette the forecast
 * page's briefing card already uses, so the two read as the same feature
 * seen twice. Loaded only on a single post that actually carries one.
 */

.ps-pulse{
  margin:30px 0;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff,#fbfcff);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  position:relative;
  font-family:'Inter',system-ui,sans-serif;
}
.ps-pulse::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent2) 42%,transparent 88%);
}

/* head */
.ps-pulse .pp-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 18px 0;
}
.ps-pulse .pp-spark{
  width:24px;height:24px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid;place-items:center;color:#fff;font-size:12px;line-height:1;
  box-shadow:0 2px 8px rgba(99,102,241,.32);
}
.ps-pulse .pp-head h3{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.2px;margin:0;color:var(--ink);
}
.ps-pulse .pp-when{
  font-size:11.5px;color:var(--blog-muted,#5f6b80);margin-left:auto;white-space:nowrap;
}

/* rows */
.ps-pulse .pp-rows{padding:12px 18px 4px}
.ps-pulse .pp-row{padding:12px 0;border-top:1px solid var(--line)}
.ps-pulse .pp-row:first-child{border-top:0;padding-top:4px}

.ps-pulse .pp-sym{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.ps-pulse .pp-sym b{
  font-family:'Space Grotesk',Inter,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.4px;color:var(--ink);
}
.ps-pulse .pp-sym span{font-size:12px;color:var(--blog-muted,#5f6b80)}

.ps-pulse .pp-pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.ps-pulse .pp-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.2px;border:1px solid transparent;white-space:nowrap;
  text-transform:none;
}
.ps-pulse .pp-pill.bull{background:#e8f9f1;color:#0f7b53;border-color:#b6ebd4}
.ps-pulse .pp-pill.bear{background:#fdecef;color:#b3213c;border-color:#f8c9d3}
.ps-pulse .pp-pill.neut{background:#eef1f8;color:#4a5570;border-color:#dde2ee}
.ps-pulse .pp-pill.risk-low{background:#e8f9f1;color:#0f7b53;border-color:#b6ebd4}
.ps-pulse .pp-pill.risk-medium{background:#fff6e6;color:#a1650a;border-color:#fae2b5}
.ps-pulse .pp-pill.risk-high{background:#fdecef;color:#b3213c;border-color:#f8c9d3}

.ps-pulse .pp-conf{
  font-size:11.5px;color:var(--blog-muted,#5f6b80);white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
}
.ps-pulse .pp-conf b{color:var(--ink);font-weight:700}
.ps-pulse .pp-lock{
  font-style:normal;letter-spacing:1px;color:#8b93a7;
  background:#eef1f8;border:1px solid #dde2ee;border-radius:6px;
  padding:0 6px;line-height:16px;display:inline-block;cursor:help;
}

/* the briefing line: whole for a member, one clause for everyone else */
.ps-pulse .pp-line{
  margin:9px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink);font-weight:500;
}
.ps-pulse .pp-cut::after{
  content:" … ";color:#a6adbd;
}
.ps-pulse .pp-meta{
  margin-top:6px;font-size:11.5px;color:var(--blog-muted,#5f6b80);
}

/* foot */
.ps-pulse .pp-foot{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px 18px;margin-top:8px;
  background:linear-gradient(90deg,#eef2ff,#faf5ff);
  border-top:1px solid var(--line);
  font-size:13px;color:var(--blog-muted,#5f6b80);line-height:1.5;
}
.ps-pulse .pp-foot span{flex:1 1 240px;min-width:0}
.ps-pulse .pp-cta{
  flex:0 0 auto;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;
}
.ps-pulse .pp-cta:hover{color:var(--accent2);text-decoration:underline}

/* The article's own prose rules must not reach inside the card. They are
 * written as `.blog-article .prose h3` and load after this file, so equal
 * specificity loses: every element the prose styles and the card also uses
 * is restated here one class deeper. */
.blog-article .prose .ps-pulse h3{font-size:15px;margin:0;line-height:1.3}
.blog-article .prose .ps-pulse p{margin:9px 0 0;font-size:14.5px;line-height:1.55}
.blog-article .prose .ps-pulse a{text-decoration:none}
.blog-article .prose .ps-pulse a:hover{text-decoration:underline}
.blog-article .prose .ps-pulse .pp-foot{font-size:13px}

@media(max-width:560px){
  .ps-pulse .pp-head{padding:14px 15px 0}
  .ps-pulse .pp-rows{padding:10px 15px 2px}
  .ps-pulse .pp-foot{padding:12px 15px}
  .ps-pulse .pp-when{margin-left:0;flex-basis:100%}
  .ps-pulse .pp-line{font-size:14px}
}