/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Live Status Mockup — landing page component
   Namespace: lsm-  (live status mockup)
   All classes prefixed to avoid conflicts with page CSS.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── Design tokens scoped to the frame ─────────────── */
.lsm-frame {
  --lsm-bg:         #F8F9FB;
  --lsm-card:       #ffffff;
  --lsm-sidebar:    #ffffff;
  --lsm-border:     #F0EFF4;
  --lsm-text:       #0c0821;
  --lsm-sub:        #81819C;
  --lsm-muted:      #9b9bb0;
  --lsm-purple:     #5B4ED4;
  --lsm-red:        #FF5B5B;
  --lsm-orange:     #FF8F07;
  --lsm-green:      #21C3A8;
  --lsm-font:       'Plus Jakarta Sans', 'Lato', system-ui, sans-serif;
  --lsm-mono:       'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --lsm-display:    'Geist Sans', 'Plus Jakarta Sans', sans-serif;
}

/* ─── Outer wrapper ──────────────────────────────────── */
.lsm-outer {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1170px;  /* 1020 × 1.15 */
  margin: 0 auto;
}

/* ─── App frame ──────────────────────────────────────── */
.lsm-frame {
  background: var(--lsm-bg);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--lsm-font);
  font-size: 15px;
  line-height: 1.4;
  color: var(--lsm-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  box-shadow:
    0 60px 160px rgba(0,0,0,0.12),
    0 0 0 1px rgba(96, 80, 220, 0.06),
    0 16px 48px rgba(0,0,0,0.08);
}

/* ─── Browser chrome ─────────────────────────────────── */
.lsm-chrome {
  height: 34px;
  background: #e5e6eb;
  border-bottom: 1px solid rgba(0,0,0,0.09);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}
.lsm-chrome-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.lsm-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.lsm-chrome-dot:nth-child(1) { background: #ff6057; }
.lsm-chrome-dot:nth-child(2) { background: #ffbd2e; }
.lsm-chrome-dot:nth-child(3) { background: #28ca41; }
.lsm-chrome-url {
  flex: 1;
  max-width: 300px;
  margin: 0 auto;
  height: 20px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
}
.lsm-chrome-url-text {
  font-size: 12px;
  color: rgba(0,0,0,0.42);
  font-family: var(--lsm-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Layout: sidebar + main ─────────────────────────── */
.lsm-layout {
  display: grid;
  grid-template-columns: 196px 1fr;
  /* Fixed height so the third row of cards extends past the bottom and gets
     clipped + faded — suggests "scroll for more" without paying the vertical
     real-estate cost of showing it all. */
  height: 660px;
  overflow: hidden;
}
.lsm-main {
  position: relative;
}
/* Soft fade overlay at the bottom of the main column — fades the truncated
   cluster card into the page background so the cut reads as deliberate. */
.lsm-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(248,249,251,0) 0%, var(--lsm-bg) 75%);
  z-index: 5;
}

/* ─── Sidebar ────────────────────────────────────────── */
.lsm-sidebar {
  background: var(--lsm-sidebar);
  border-right: 1px solid var(--lsm-border);
  box-shadow: 2px 0 8px rgba(0,0,0,0.04);
  padding: 14px 0 12px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 1;
}
.lsm-sidebar-logo {
  padding: 2px 18px 13px;
  color: var(--lsm-text);
}
.lsm-sidebar-prop {
  padding: 0 12px 12px;
}
.lsm-sidebar-prop-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 8px;
  background: var(--lsm-sidebar);
  border: 1px solid var(--lsm-border);
  border-radius: 6px;
  cursor: default;
}
.lsm-sidebar-prop-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.lsm-prop-icon {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: linear-gradient(135deg, #D97757, #C56A4A);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.lsm-sidebar-prop-name {
  font-size: 13.5px;
  color: var(--lsm-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsm-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lsm-nav-main {
  flex: 1;
  padding: 2px 0;
}
.lsm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: #4b5563;
  cursor: default;
  border-right: 2px solid transparent;
}
.lsm-nav-item--active {
  color: #5B4ED4;
  background: rgba(96, 80, 220, 0.06);
  border-right-color: #6050DC;
  font-weight: 600;
}
.lsm-nav-bottom {
  border-top: 1px solid var(--lsm-border);
  padding-top: 10px;
  margin-top: 4px;
}
.lsm-nav-section-label {
  padding: 0 18px 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lsm-muted);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* ─── Main content area ──────────────────────────────── */
.lsm-main {
  background: var(--lsm-bg);
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ─── Page header ────────────────────────────────────── */
.lsm-breadcrumb {
  font-size: 12.5px;
  color: var(--lsm-sub);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.lsm-breadcrumb-sep {
  opacity: 0.5;
  font-size: 12px;
}
.lsm-breadcrumb-cur {
  color: var(--lsm-text);
  font-weight: 500;
}
.lsm-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lsm-page-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--lsm-text);
  letter-spacing: -0.025em;
  font-family: var(--lsm-display);
  margin: 0;
  line-height: 1.2;
}
.lsm-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.lsm-avatars {
  display: flex;
}
.lsm-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--lsm-bg);
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}
.lsm-avatar + .lsm-avatar { margin-left: -7px; }
.lsm-header-btn {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.09);
  font-size: 13px;
  font-weight: 500;
  color: var(--lsm-text);
  cursor: default;
  white-space: nowrap;
}
.lsm-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(0,0,0,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
}

/* ─── Portfolio Summary Card ─────────────────────────── */
.lsm-summary {
  background: var(--lsm-card);
  border: 1px solid var(--lsm-border);
  border-radius: 10px;
  display: flex;
  align-items: stretch;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 3px 8px rgba(0,0,0,0.015);
  overflow: hidden;
  flex-shrink: 0;
}
.lsm-summary-left {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px 16px 18px;
  flex-shrink: 0;
}


.lsm-summary-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lsm-status-line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.lsm-status-heading {
  font-size: 18px;
  font-weight: 700;
  color: var(--lsm-text);
  font-family: var(--lsm-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.lsm-live-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.lsm-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.lsm-live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: lsm-ping 2.2s ease-out infinite;
}
@keyframes lsm-ping {
  0%   { transform: scale(0.7); opacity: 0.7; }
  70%  { transform: scale(2);   opacity: 0;   }
  100% { transform: scale(0.7); opacity: 0;   }
}
.lsm-live-dot--orange      { background: #FF8F07; }
.lsm-live-dot--orange::after { background: rgba(255,143,7,0.32); }
.lsm-live-dot--red         { background: #FF5B5B; }
.lsm-live-dot--red::after    { background: rgba(255,91,91,0.32); }
.lsm-live-dot--green       { background: #21C3A8; }
.lsm-live-dot--green::after  { background: rgba(33,195,168,0.32); }

.lsm-live-text {
  font-size: 13px;
  font-weight: 700;
}
.lsm-live-text--orange { color: #FF8F07; }
.lsm-live-text--red    { color: #FF5B5B; }
.lsm-live-text--green  { color: #21C3A8; }

.lsm-summary-sub {
  font-size: 13px;
  color: var(--lsm-sub);
  line-height: 1.5;
  max-width: 230px;
}
.lsm-checked-time {
  font-size: 13px;
  color: var(--lsm-sub);
  margin-top: 4px;
}

.lsm-summary-divider {
  width: 1px;
  background: var(--lsm-border);
  align-self: stretch;
  flex-shrink: 0;
}

.lsm-summary-stats {
  display: flex;
  flex: 1;
}
.lsm-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px 18px;
  gap: 2px;
  position: relative;
}
.lsm-stat + .lsm-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: var(--lsm-border);
}
.lsm-stat-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
.lsm-stat-label--red    { color: #FF5B5B; }
.lsm-stat-label--orange { color: #FF8F07; }
.lsm-stat-label--green  { color: #21C3A8; }
.lsm-stat-num {
  font-size: 33px;
  font-weight: 700;
  color: var(--lsm-text);
  font-family: var(--lsm-mono);
  line-height: 1;
  letter-spacing: -0.03em;
}
.lsm-stat-sub {
  font-size: 12px;
  color: var(--lsm-sub);
  line-height: 1.3;
  white-space: nowrap;
}

/* ─── Static morph shape (non-animated NeonRing) ─────── */
.lsm-morph-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.lsm-morph-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 12px 4px rgba(255,98,0,0.25), 0 0 24px 8px rgba(255,51,0,0.12);
  pointer-events: none;
}
.lsm-morph {
  width: 100%;
  height: 100%;
  border-radius: 52% 48% 49% 51% / 50% 52% 48% 50%;
  background: conic-gradient(from 45deg, #FF6200, #FF3300, #FF6200);
  -webkit-mask: radial-gradient(circle, transparent 46%, #fff 48%);
  mask: radial-gradient(circle, transparent 46%, #fff 48%);
  filter: brightness(1.2);
}

/* ─── Issue / alert banner ───────────────────────────── */
.lsm-banner {
  border-radius: 8px;
  padding: 9px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lsm-banner--issue {
  background: rgba(255, 91, 91, 0.07);
  border: 1px solid rgba(255, 91, 91, 0.22);
}
.lsm-banner-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 91, 91, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lsm-banner-text {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lsm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsm-banner-note {
  font-weight: 400;
  color: var(--lsm-sub);
}
.lsm-banner-badge {
  font-size: 13px;
  font-weight: 700;
  color: #FF5B5B;
  background: rgba(255, 91, 91, 0.12);
  padding: 2px 8px;
  border-radius: 20px;
  flex-shrink: 0;
}
.lsm-banner-time {
  font-size: 12.5px;
  color: var(--lsm-sub);
  flex-shrink: 0;
}

/* ─── Floating alert card (overlaps mockup top-right) ─── */
.lsm-float-alert {
  position: absolute;
  /* Overhangs the frame's top-right corner. Keep the overhang (≈56px) smaller
     than the gap between the logo row and the mockup (~80px on desktop) so the
     card never rides up into the "Trusted by" logos. */
  top: -56px;
  right: -32px;
  width: 320px;
  padding: 19px 22px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid #FF5B5B;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  z-index: 10;
  text-align: left;
}
.lsm-float-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lsm-float-alert .lsm-banner-icon {
  background: rgba(255,91,91,0.1);
}
.lsm-float-alert .lsm-banner-icon svg {
  stroke: #FF5B5B;
}
.lsm-float-alert-label {
  font-size: 14px;
  font-weight: 700;
  color: #FF5B5B;
  flex: 1;
}
.lsm-float-alert .lsm-banner-badge {
  background: rgba(255,91,91,0.1);
  color: #FF5B5B;
}
.lsm-float-alert-title {
  font-family: var(--lsm-display);
  font-size: 18px;
  font-weight: 700;
  color: #0c0821;
  line-height: 1.35;
  margin-bottom: 8px;
}
.lsm-float-chart {
  margin: 12px -4px 10px;
  height: 58px;
  border-radius: 6px;
  overflow: hidden;
}
.lsm-float-chart svg {
  display: block;
  width: 100%;
  height: 100%;
}
.lsm-float-alert-meta {
  font-size: 13px;
  color: #81819C;
}
/* Mid / tablet widths: pull the card just inside the viewport (the -32px
   overhang would otherwise spill off-screen once the frame reaches the edge),
   and use a smaller top overhang — the logo-to-mockup gap narrows to ~48px
   under 960px, so 32px keeps the card clear of the logos. */
@media (min-width: 721px) and (max-width: 1200px) {
  .lsm-float-alert { right: -4px; top: -32px; }
}
@media (max-width: 720px) {
  .lsm-float-alert { right: 6px; top: -8px; width: 260px; }
  .lsm-float-positive { display: none; }
}

/* ─── Floating positive card ─────────────────────────── */
.lsm-float-positive {
  position: absolute;
  bottom: -24px;
  left: -110px;
  width: 320px;
  padding: 19px 22px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-left: 4px solid #21C3A8;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  z-index: 10;
  text-align: left;
  will-change: transform;
  transition: transform 0.1s linear;
}
.lsm-float-positive .lsm-float-alert-head { margin-bottom: 8px; }
.lsm-float-positive .lsm-float-alert-label { color: #21C3A8; }
.lsm-float-positive .lsm-float-alert-title { color: #0c0821; }
.lsm-float-positive .lsm-float-alert-meta { color: #81819C; }
.lsm-float-positive .lsm-float-cause { border-top: 1px solid rgba(0,0,0,0.06); }
.lsm-float-positive .lsm-float-cause-label { color: #81819C; }
.lsm-float-positive .lsm-float-cause-name { color: #0c0821; }

/* ─── Parallax transition ────────────────────────────── */
.lsm-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ─── Cards grid ─────────────────────────────────────── */
.lsm-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

/* Subtitle line under the cluster card head ("9 clusters · 174 queries tracked") */
.lsm-clusters-sub {
  padding: 4px 14px 8px;
  font-size: 12px;
  color: var(--lsm-sub);
}

/* ─── Category card ──────────────────────────────────── */
.lsm-card {
  background: var(--lsm-card);
  border: 1px solid var(--lsm-border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02), 0 3px 8px rgba(0,0,0,0.015);
}
.lsm-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px 11px;
}
.lsm-card-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--lsm-purple);
}
.lsm-card--issue .lsm-card-icon {
  background: rgba(255, 91, 91, 0.1);
  border-color: rgba(255, 91, 91, 0.4);
  color: #FF5B5B;
}
.lsm-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--lsm-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsm-card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.lsm-card-badge--issue    { color: #FF5B5B; background: rgba(255,91,91,0.1); }
.lsm-card-badge--watching { color: #FF8F07; background: rgba(255,143,7,0.1); }
.lsm-card-badge--stable   { color: #21C3A8; background: rgba(33,195,168,0.1); }
.lsm-card-badge--positive { color: #21C3A8; background: rgba(33,195,168,0.1); }

.lsm-card-rule {
  height: 1px;
  background: var(--lsm-border);
  margin: 0 14px;
}

/* ─── Metric rows ────────────────────────────────────── */
.lsm-metrics {
  padding: 5px 14px 10px;
}
.lsm-metric {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4.5px 0;
}
.lsm-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lsm-dot--red    { background: #FF5B5B; }
.lsm-dot--orange { background: #FF8F07; }
.lsm-dot--green  { background: #21C3A8; }
.lsm-dot--muted  { background: #9b9bb0; }

.lsm-metric-label {
  font-size: 12px;
  color: var(--lsm-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lsm-metric-right {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.lsm-metric-event {
  font-size: 11px;
  color: var(--lsm-sub);
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.lsm-metric-change {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.lsm-metric-change--red    { color: #FF5B5B; }
.lsm-metric-change--orange { color: #FF8F07; }
.lsm-metric-change--green  { color: #21C3A8; }

.lsm-metric-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.lsm-metric-pill--issue    { color: #FF5B5B; background: rgba(255,91,91,0.1); }
.lsm-metric-pill--watching { color: #FF8F07; background: rgba(255,143,7,0.1); }
.lsm-metric-pill--stable   { color: #21C3A8; background: rgba(33,195,168,0.1); }
.lsm-metric-pill--positive { color: #21C3A8; background: rgba(33,195,168,0.1); }
.lsm-metric-pill--muted    { color: #9b9bb0; background: rgba(155,155,176,0.1); }

/* Inline metric value (e.g. "$426 / $200") — sits between the sparkline
   and the status pill on issue rows. Mono typography keeps numbers tabular. */
.lsm-metric-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--lsm-text);
  font-family: var(--lsm-mono);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Likely contributors — root-cause analysis card sitting below the summary */
.lsm-contributors {
  margin: 12px 14px 0;
  padding: 12px 14px;
  background: rgba(255,91,91,0.04);
  border: 1px solid rgba(255,91,91,0.18);
  border-radius: 10px;
}
.lsm-contributors-head {
  margin-bottom: 10px;
}
.lsm-contributors-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--lsm-text);
  margin: 0 0 2px;
  letter-spacing: -0.005em;
}
.lsm-contributors-sub {
  font-size: 11px;
  color: var(--lsm-sub);
  margin: 0;
  line-height: 1.4;
}
.lsm-contributors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lsm-contributor-card {
  background: var(--lsm-card);
  border: 1px solid var(--lsm-border);
  border-radius: 8px;
  padding: 10px 12px;
}
.lsm-contributor-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.lsm-contributor-icon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(91,78,212,0.1);
  color: #5B4ED4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lsm-contributor-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--lsm-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lsm-contributor-pill {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--lsm-mono);
}
.lsm-contributor-pill--red    { color: #FF5B5B; background: rgba(255,91,91,0.1); }
.lsm-contributor-pill--orange { color: #FF8F07; background: rgba(255,143,7,0.1); }
.lsm-contributor-value {
  font-size: 11.5px;
  color: var(--lsm-text);
  font-family: var(--lsm-mono);
  margin-bottom: 4px;
  font-weight: 500;
}
.lsm-contributor-desc {
  font-size: 11px;
  color: var(--lsm-sub);
  line-height: 1.45;
  margin: 0;
}

/* Sidebar prop tag — small "Active issue" indicator under the project name */
.lsm-sidebar-prop-textcol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.lsm-sidebar-prop-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #FF5B5B;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.lsm-sidebar-prop-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FF5B5B;
  flex-shrink: 0;
}

/* Description under the floating alert title */
.lsm-float-alert-desc {
  font-size: 12px;
  color: #81819C;
  line-height: 1.4;
  margin: 4px 0 0;
}

/* Compact "Likely contributor" block inside the floating alert */
.lsm-float-cause {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.lsm-float-cause-label {
  font-size: 12px;
  font-weight: 600;
  color: #81819C;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.lsm-float-cause-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.lsm-float-cause-name {
  font-size: 14px;
  font-weight: 600;
  color: #0c0821;
  line-height: 1.35;
  /* Allow the cause name to wrap onto a second line so longer drivers like
     "Organic traffic surge · 340 transactions (vs 202 avg)" stay legible
     instead of getting truncated mid-word. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.lsm-float-cause-pill {
  font-size: 12px;
  font-weight: 700;
  color: #FF5B5B;
  background: rgba(255,91,91,0.1);
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--lsm-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Red flag for major budget changes — matches `.lsm-metric-pill--issue` */
.lsm-budget-flag {
  font-size: 10.5px;
  font-weight: 600;
  color: #FF5B5B;
  background: rgba(255,91,91,0.1);
  padding: 1.5px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Inline sparkline — mirrors dashboard metric-row sparklines.
   Anomaly bar coloured by status; baseline bars muted grey at 35%. */
.lsm-sparkline {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 16px;
  flex-shrink: 0;
}
.lsm-sparkline-bar {
  width: 2px;
  border-radius: 1px;
  background: #9b9bb0;
  opacity: 0.35;
}
.lsm-sparkline-bar--anomaly { opacity: 1; }
.lsm-sparkline-bar--red     { background: #FF5B5B; }
.lsm-sparkline-bar--orange  { background: #FF8F07; }
.lsm-sparkline-bar--green   { background: #21C3A8; }

/* ─── Responsive ─────────────────────────────────────── */
/* Mobile + small-tablet: collapse the sidebar layout and clip the mockup so it
   reads as a top-of-app screenshot. The 960px cutoff covers phones and iPad
   portrait — anything wider has the horizontal room for the desktop two-col
   layout. */
@media (max-width: 960px) {
  .lsm-layout {
    grid-template-columns: 1fr;
    height: 460px;
    overflow: hidden;
  }
  .lsm-sidebar { display: none; }
  .lsm-main { padding: 14px 14px 16px; }
  .lsm-cards { grid-template-columns: 1fr; }
  .lsm-summary { flex-direction: column; }
  .lsm-summary-divider { width: auto; height: 1px; }
  .lsm-summary-stats { flex-wrap: wrap; }
  .lsm-bottom-fade { height: 110px; }
}