/* ═════════════════════════════════════════════════════════════════════════════
   js/insights-v2.css — WIP-UI-INSIGHTS-01 Phase 1
   Target-pulse KPI cards (green hit / red miss / yellow risk), AI insights
   strip, dashboard hero. Classes namespaced .ins2-* / .kpi-card to avoid
   colliding with existing reports markup.
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --ins2-hit-fg: #15803D;
  --ins2-miss-fg: #DC2626;
  --ins2-risk-fg: #D97706;
  --ins2-ai-purple: #7C3AED;
}

/* ─── Pulse keyframes (per spec Section 1) ─────────────────────────── */
@keyframes ins2-pulse-hit  {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21,128,61,.35),  0 4px 14px -4px rgba(21,128,61,.4); }
  50%      { box-shadow: 0 0 0 10px rgba(21,128,61,0), 0 8px 20px -4px rgba(21,128,61,.55); }
}
@keyframes ins2-pulse-miss {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.45),  0 4px 14px -4px rgba(220,38,38,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(220,38,38,0), 0 8px 22px -4px rgba(220,38,38,.6); }
}
@keyframes ins2-pulse-risk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35),  0 4px 14px -4px rgba(217,119,6,.4); }
  50%      { box-shadow: 0 0 0 10px rgba(245,158,11,0), 0 8px 20px -4px rgba(217,119,6,.5); }
}
@keyframes ins2-ai-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ins2-page .kpi-card.pulse-hit,
  .ins2-page .kpi-card.pulse-miss,
  .ins2-page .kpi-card.pulse-risk,
  .ins2-page .ins2-ai-panel::before {
    animation: none !important;
  }
}

/* ─── Page chassis ──────────────────────────────────────────────────── */
.ins2-page { padding: 4px 0 32px; font-family: 'Archivo', system-ui, sans-serif; }

/* ─── Hero ──────────────────────────────────────────────────────────── */
.ins2-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 22px; padding-bottom: 18px;
  border-bottom: 1px solid var(--s200, #E7E5E4); flex-wrap: wrap;
}
.ins2-hero-l { display: flex; flex-direction: column; gap: 6px; }
.ins2-hero-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--s500, #78716C);
}
.ins2-hero-title {
  font-size: 36px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--ink, #0A0A0A); line-height: 1;
}
.ins2-hero-sub {
  font-size: 14px; font-weight: 600; color: var(--s500, #78716C);
  margin-top: 4px; display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.ins2-hero-sub .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok-fg, #15803D);
  box-shadow: 0 0 8px rgba(21,128,61,.5);
}
.ins2-hero-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ins2-period-tabs {
  display: inline-flex; background: #fff;
  border: 1px solid var(--s200, #E7E5E4); border-radius: 11px;
  padding: 3px; gap: 2px; box-shadow: var(--shadow-rest);
}
.ins2-period-tab {
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  color: var(--s500, #78716C); border-radius: 8px; cursor: pointer;
  letter-spacing: -0.005em; border: none; background: none;
  font-family: inherit; transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-period-tab:hover { color: var(--ink, #0A0A0A); }
.ins2-period-tab.on {
  background: var(--ink, #0A0A0A); color: #fff;
  box-shadow: 0 1px 2px rgba(10,10,10,.15);
}

/* ─── KPI band ──────────────────────────────────────────────────────── */
.ins2-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 22px;
}
@media (max-width: 1100px) { .ins2-kpi-row { grid-template-columns: repeat(2, 1fr); } }

.kpi-card {
  background: #fff; border: 1.5px solid var(--s200, #E7E5E4);
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--shadow-rest);
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.kpi-card:hover { transform: translateY(-2px); }

.kpi-card.pulse-hit  { animation: ins2-pulse-hit  2.4s ease-in-out infinite; border-color: rgba(21,128,61,.45); }
.kpi-card.pulse-miss { animation: ins2-pulse-miss 1.8s ease-in-out infinite; border-color: rgba(220,38,38,.5); border-width: 2px; }
.kpi-card.pulse-risk { animation: ins2-pulse-risk 2.0s ease-in-out infinite; border-color: rgba(245,158,11,.45); }

.kpi-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--s500, #78716C);
  display: flex; align-items: center; gap: 6px;
}
.kpi-eyebrow .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s400, #A8A29E);
}
.kpi-card.pulse-hit  .kpi-eyebrow .status-dot { background: var(--ins2-hit-fg);  box-shadow: 0 0 6px rgba(21,128,61,.5); }
.kpi-card.pulse-miss .kpi-eyebrow .status-dot { background: var(--ins2-miss-fg); box-shadow: 0 0 8px rgba(220,38,38,.6); }
.kpi-card.pulse-risk .kpi-eyebrow .status-dot { background: var(--ins2-risk-fg); box-shadow: 0 0 6px rgba(217,119,6,.5); }

.kpi-num {
  font-size: 30px; font-weight: 900; letter-spacing: -0.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink, #0A0A0A);
  display: flex; align-items: baseline; gap: 4px;
}
.kpi-num .unit {
  font-size: 13px; font-weight: 700; color: var(--s500, #78716C);
}
.kpi-card.pulse-hit  .kpi-num { color: var(--ins2-hit-fg); }
.kpi-card.pulse-miss .kpi-num { color: var(--ins2-miss-fg); }
.kpi-card.pulse-risk .kpi-num { color: var(--ins2-risk-fg); }

.kpi-sub {
  font-size: 11.5px; font-weight: 700; color: var(--s500, #78716C);
  letter-spacing: -0.005em;
}
.kpi-sub b { color: var(--ink, #0A0A0A); font-weight: 800; }

/* KPI bar with period-elapsed marker tick */
.kpi-bar {
  height: 7px; background: var(--s100, #F5F5F4);
  border-radius: 4px; position: relative; overflow: visible;
  margin-top: 4px;
}
.kpi-bar-fill {
  height: 100%; border-radius: 4px;
  background: var(--s400, #A8A29E);
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.kpi-card.pulse-hit  .kpi-bar-fill { background: linear-gradient(90deg, #22C55E 0%, var(--ins2-hit-fg) 100%); }
.kpi-card.pulse-miss .kpi-bar-fill { background: linear-gradient(90deg, #F87171 0%, var(--ins2-miss-fg) 100%); }
.kpi-card.pulse-risk .kpi-bar-fill { background: linear-gradient(90deg, #FBBF24 0%, var(--ins2-risk-fg) 100%); }
.kpi-bar-marker {
  position: absolute; top: -3px;
  width: 2px; height: 13px;
  background: var(--ink, #0A0A0A);
  border-radius: 1px;
}
.kpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 700;
  color: var(--s500, #78716C);
}
.kpi-foot .attainment {
  font-size: 11px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #0A0A0A);
}

/* ─── AI Insights strip ──────────────────────────────────────────────── */
.ins2-ai-panel {
  background: linear-gradient(135deg, var(--ink, #0A0A0A) 0%, var(--s900, #1C1917) 100%);
  color: #fff; border-radius: 14px; padding: 16px 22px;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-rest);
  position: relative; overflow: hidden;
}
.ins2-ai-panel::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(124,58,237,.12) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ins2-ai-shimmer 4s infinite;
  pointer-events: none;
}
.ins2-ai-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg, var(--ins2-ai-purple) 0%, #A855F7 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
  box-shadow: 0 4px 12px -3px rgba(124,58,237,.5);
  position: relative; z-index: 1;
}
.ins2-ai-mid { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ins2-ai-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin-bottom: 3px;
  display: flex; align-items: center; gap: 8px;
}
.ins2-ai-eyebrow .badge {
  background: rgba(255,255,255,.1);
  padding: 1px 7px; border-radius: 4px;
  font-size: 9px; letter-spacing: 0.06em;
  color: rgba(255,255,255,.7);
  text-transform: none;
}
.ins2-ai-line {
  font-size: 14px; font-weight: 700; color: #fff;
  letter-spacing: -0.01em; line-height: 1.4;
}
.ins2-ai-line b { color: #FCD34D; font-weight: 900; }
.ins2-ai-line .ok    { color: #86EFAC; font-weight: 800; }
.ins2-ai-line .alert { color: #FCD34D; font-weight: 800; }
.ins2-ai-line .red   { color: #FCA5A5; font-weight: 900; }
.ins2-ai-actions {
  display: flex; gap: 6px; flex-shrink: 0; position: relative; z-index: 1;
}
.ins2-ai-act {
  padding: 6px 12px; font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  cursor: pointer; font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  letter-spacing: -0.005em;
}
.ins2-ai-act:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
}
.ins2-ai-disabled {
  opacity: 0.7;
  padding: 12px 16px; background: rgba(255,255,255,.04);
  border-radius: 10px; font-size: 12px; color: rgba(255,255,255,.6);
  font-style: italic;
}

/* ─── Buttons ──────────────────────────────────────────────────────── */
.ins2-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer; font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.ins2-btn-w {
  background: #fff; color: var(--s700, #44403C);
  border-color: var(--s200, #E7E5E4);
  box-shadow: var(--shadow-rest);
}
.ins2-btn-w:hover { border-color: var(--ink, #0A0A0A); color: var(--ink, #0A0A0A); }
.ins2-btn-d {
  background: var(--ink, #0A0A0A); color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.ins2-btn-d:hover { background: var(--s900, #1C1917); }

/* ─── Phase 2: top eyebrow + title (above hero meta) ─────────────────── */
.ins2-page .ins2-eyebrow-top {
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--s500, #78716C);
  margin-bottom: 8px;
}
.ins2-page .ins2-title {
  font-size: 40px; font-weight: 900; letter-spacing: -0.04em;
  color: var(--ink, #0A0A0A); line-height: 1;
  margin: 0 0 16px;
}
.ins2-page .ins2-hero-sub-top {
  font-size: 12.5px; font-weight: 600;
  color: var(--s500, #78716C);
  font-variant-numeric: tabular-nums;
}
.ins2-page .ins2-hero-sub-top b { color: var(--ink, #0A0A0A); font-weight: 800; }

/* Add red-button variant (matches mockup New Report) */
.ins2-page .ins2-btn-r {
  background: var(--red, #C41230); color: #fff;
  border-color: var(--red, #C41230);
  box-shadow: 0 1px 2px rgba(196,18,48,.2), 0 4px 12px -4px rgba(196,18,48,.4);
}
.ins2-page .ins2-btn-r:hover { background: var(--red-dark, #A60F28); }

/* ─── KPI card v2 (eyebrow icon + status badge + delta arrow) ───────── */
.ins2-page .kpi-card {
  padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ins2-page .kpi-card.pulse-hit  { background: linear-gradient(180deg, #fff 0%, rgba(21,128,61,.04) 100%); }
.ins2-page .kpi-card.pulse-miss { background: linear-gradient(180deg, #fff 0%, rgba(220,38,38,.05) 100%); }
.ins2-page .kpi-card.pulse-risk { background: linear-gradient(180deg, #fff 0%, rgba(245,158,11,.04) 100%); }

.ins2-page .kpi-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.ins2-page .kpi-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--s500, #78716C);
  display: flex; align-items: center; gap: 6px;
}
.ins2-page .kpi-eyebrow svg { color: var(--s500, #78716C); }
.ins2-page .kpi-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--s400, #A8A29E); flex-shrink: 0;
}

.ins2-page .ins2-status-badge {
  font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 4px;
  letter-spacing: 0.1em; text-transform: uppercase;
  flex-shrink: 0;
}
.ins2-page .ins2-status-hit  { background: #DCFCE7; color: var(--ins2-hit-fg);  border: 1px solid rgba(21,128,61,.2); }
.ins2-page .ins2-status-miss { background: #FEE2E2; color: var(--ins2-miss-fg); border: 1px solid rgba(220,38,38,.3); }
.ins2-page .ins2-status-risk { background: #FEF3C7; color: var(--ins2-risk-fg); border: 1px solid rgba(146,64,14,.2); }

.ins2-page .kpi-num {
  font-size: 32px; font-weight: 900; letter-spacing: -0.035em;
  line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--ink, #0A0A0A);
  display: flex; align-items: baseline; gap: 6px;
}
.ins2-page .kpi-num .unit {
  font-size: 14px; font-weight: 700; color: var(--s500, #78716C);
  letter-spacing: 0.02em;
}
.ins2-page .kpi-card.pulse-hit .kpi-num  { color: var(--ins2-hit-fg); }
.ins2-page .kpi-card.pulse-miss .kpi-num { color: var(--ins2-miss-fg); }
.ins2-page .kpi-card.pulse-risk .kpi-num { color: var(--ins2-risk-fg); }

.ins2-page .kpi-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11px;
}
.ins2-page .kpi-target {
  color: var(--s500, #78716C); font-weight: 700;
  letter-spacing: -0.005em;
}
.ins2-page .kpi-target b {
  color: var(--ink, #0A0A0A); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ins2-page .ins2-delta {
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em; white-space: nowrap;
}
.ins2-page .ins2-delta.good { color: var(--ins2-hit-fg); }
.ins2-page .ins2-delta.bad  { color: var(--ins2-miss-fg); }

.ins2-page .kpi-bar {
  margin-top: 4px;
  height: 6px; background: var(--s100, #F5F5F4);
  border-radius: 4px; position: relative; overflow: visible;
}
.ins2-page .kpi-bar-fill {
  height: 100%; border-radius: 4px;
  background: var(--s400, #A8A29E);
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .kpi-card.pulse-hit  .kpi-bar-fill { background: linear-gradient(90deg, #22C55E 0%, var(--ins2-hit-fg) 100%); }
.ins2-page .kpi-card.pulse-miss .kpi-bar-fill { background: linear-gradient(90deg, #F87171 0%, var(--ins2-miss-fg) 100%); }
.ins2-page .kpi-card.pulse-risk .kpi-bar-fill { background: linear-gradient(90deg, #FBBF24 0%, var(--ins2-risk-fg) 100%); }
.ins2-page .kpi-bar-marker {
  position: absolute; top: -3px;
  width: 2px; height: 12px;
  background: var(--ink, #0A0A0A);
  border-radius: 1px;
}

/* ─── Reports toolbar + grid ──────────────────────────────────────── */
.ins2-page .ins2-reports-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 0 14px; gap: 14px;
}
.ins2-page .ins2-reports-toolbar-l {
  display: flex; align-items: center; gap: 14px;
}
.ins2-page .ins2-reports-eyebrow {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--s500, #78716C);
}
.ins2-page .ins2-view-toggle {
  display: inline-flex; background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 9px; padding: 3px; gap: 2px;
}
.ins2-page .ins2-view-tab {
  padding: 5px 11px; font-size: 11px; font-weight: 700;
  color: var(--s500, #78716C); border-radius: 6px;
  cursor: pointer; display: inline-flex; align-items: center;
  gap: 5px; border: none; background: none;
  font-family: inherit; letter-spacing: -0.005em;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .ins2-view-tab:hover { color: var(--ink, #0A0A0A); }
.ins2-page .ins2-view-tab.on { background: #fff; color: var(--ink, #0A0A0A); box-shadow: 0 1px 2px rgba(10,10,10,.06); }

.ins2-page .ins2-grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 16px; margin-bottom: 32px;
}
.ins2-page .ins2-span-3  { grid-column: span 3; }
.ins2-page .ins2-span-4  { grid-column: span 4; }
.ins2-page .ins2-span-6  { grid-column: span 6; }
.ins2-page .ins2-span-8  { grid-column: span 8; }
.ins2-page .ins2-span-12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .ins2-page .ins2-span-8, .ins2-page .ins2-span-6, .ins2-page .ins2-span-4 { grid-column: span 12; }
}

.ins2-page .ins2-card {
  background: #fff; border: 1px solid var(--s200, #E7E5E4);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: var(--shadow-rest);
  display: flex; flex-direction: column;
  transition: transform 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .ins2-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.ins2-page .ins2-card-h {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.ins2-page .ins2-card-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--s500, #78716C);
  display: flex; align-items: center; gap: 6px;
}
.ins2-page .ins2-type-chip {
  background: var(--s100, #F5F5F4); color: var(--s700, #44403C);
  padding: 1px 6px; border-radius: 4px;
  font-weight: 800; letter-spacing: 0.06em;
  font-family: ui-monospace, monospace; font-size: 9px;
}
.ins2-page .ins2-card-title {
  font-size: 14px; font-weight: 800; color: var(--ink, #0A0A0A);
  letter-spacing: -0.015em; margin-top: 3px;
  display: flex; align-items: center; gap: 7px;
}
.ins2-page .ins2-card-sub {
  font-size: 11px; color: var(--s500, #78716C);
  font-weight: 600; margin-top: 3px;
}
.ins2-page .ins2-card-h-r {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.ins2-page .ins2-card-h-btn {
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; color: var(--s500, #78716C);
  border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .ins2-card-h-btn:hover {
  background: var(--s100, #F5F5F4);
  color: var(--ink, #0A0A0A);
}
.ins2-page .ins2-card-body { flex: 1; min-height: 100px; }
.ins2-page .ins2-card-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--s200, #E7E5E4);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
}
.ins2-page .ins2-card-foot-stat {
  font-size: 11px; color: var(--s500, #78716C);
  font-weight: 700; letter-spacing: -0.005em;
}
.ins2-page .ins2-card-foot-stat b {
  color: var(--ink, #0A0A0A); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ins2-page .ins2-card-foot-link {
  font-size: 11.5px; font-weight: 800;
  color: var(--ink, #0A0A0A);
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-family: inherit; letter-spacing: -0.005em;
}
.ins2-page .ins2-card-foot-link:hover { color: var(--red, #C41230); }

/* Placeholder card (Build a custom report) */
.ins2-page .ins2-card-placeholder {
  background: linear-gradient(180deg, var(--s50, #FAFAF9) 0%, #fff 100%);
  border: 2px dashed var(--s300, #D6D3D1);
  align-items: center; justify-content: center;
  text-align: center; padding: 32px 20px;
  cursor: pointer;
}
.ins2-page .ins2-card-placeholder:hover {
  border-color: var(--ink, #0A0A0A);
  background: #fff;
}
.ins2-page .ins2-placeholder-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--s100, #F5F5F4); color: var(--s500, #78716C);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 400; margin-bottom: 10px;
}
.ins2-page .ins2-placeholder-title {
  font-size: 14px; font-weight: 800; color: var(--ink, #0A0A0A);
  margin-bottom: 6px;
}
.ins2-page .ins2-placeholder-sub {
  font-size: 11.5px; font-weight: 600;
  color: var(--s500, #78716C); max-width: 240px;
}

/* ─── Report Library ──────────────────────────────────────────────── */
.ins2-page .ins2-library {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--s200, #E7E5E4);
}
.ins2-page .ins2-library-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 16px; gap: 14px;
}
.ins2-page .ins2-library-title {
  font-size: 20px; font-weight: 900;
  letter-spacing: -0.025em; color: var(--ink, #0A0A0A);
}
.ins2-page .ins2-library-sub {
  font-size: 12px; color: var(--s500, #78716C);
  font-weight: 600; margin-top: 3px;
}
.ins2-page .ins2-library-sub b {
  color: var(--ink, #0A0A0A); font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ins2-page .ins2-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); gap: 12px;
}
@media (max-width: 1100px) { .ins2-page .ins2-library-grid { grid-template-columns: repeat(2, 1fr); } }
.ins2-page .ins2-library-card {
  background: #fff; border: 1px solid var(--s200, #E7E5E4);
  border-radius: 12px; padding: 12px 14px;
  display: flex; align-items: center; gap: 11px;
  cursor: pointer; transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .ins2-library-card:hover {
  border-color: var(--ink, #0A0A0A);
  box-shadow: var(--shadow-rest);
}
.ins2-page .ins2-library-card.on {
  background: linear-gradient(180deg, rgba(196,18,48,.04) 0%, #fff 100%);
  border-color: rgba(196,18,48,.25);
}
.ins2-page .ins2-library-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ins2-page .ins2-library-mid { flex: 1; min-width: 0; }
.ins2-page .ins2-library-card-title {
  font-size: 12.5px; font-weight: 800;
  color: var(--ink, #0A0A0A); letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ins2-page .ins2-library-card-type {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--s500, #78716C);
  margin-top: 2px;
}
.ins2-page .ins2-library-action { flex-shrink: 0; }

/* ─── Modal overlay (builder) ──────────────────────────────────────── */
.ins2-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 10, 10, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
  animation: ins2-modal-fade 180ms cubic-bezier(.4,0,.2,1);
}
@keyframes ins2-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.ins2-modal {
  background: #fff; border-radius: 16px;
  width: 100%; max-width: 720px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px -16px rgba(10,10,10,0.4);
  overflow: hidden;
}
.ins2-modal-h {
  padding: 18px 22px;
  border-bottom: 1px solid var(--s200, #E7E5E4);
  display: flex; align-items: flex-start; justify-content: space-between;
}
.ins2-modal-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--s500, #78716C);
}
.ins2-modal-pips {
  display: flex; gap: 4px; margin-top: 6px;
}
.ins2-builder-pip {
  width: 24px; height: 4px; border-radius: 2px;
  background: var(--s200, #E7E5E4);
  transition: background 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-builder-pip.done { background: var(--ok-fg, #15803D); }
.ins2-builder-pip.on   { background: var(--ink, #0A0A0A); }
.ins2-modal-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: none; color: var(--s500, #78716C);
  font-size: 22px; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-modal-close:hover { background: var(--s100, #F5F5F4); color: var(--ink, #0A0A0A); }
.ins2-modal-body {
  padding: 22px; overflow-y: auto; flex: 1; min-height: 0;
}
.ins2-modal-foot {
  padding: 14px 22px; border-top: 1px solid var(--s200, #E7E5E4);
  background: var(--s50, #FAFAF9);
  display: flex; align-items: center; justify-content: space-between;
}

.ins2-builder-step-h {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
}
.ins2-builder-step-h .step-num {
  font-size: 10px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--s500, #78716C);
}
.ins2-builder-step-h .step-title {
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.025em; color: var(--ink, #0A0A0A);
  line-height: 1.1;
}

.ins2-builder-options {
  display: flex; flex-direction: column; gap: 6px;
}
.ins2-builder-option {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--s200, #E7E5E4);
  border-radius: 10px; cursor: pointer;
  text-align: left; font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-builder-option:hover { border-color: var(--s300, #D6D3D1); background: var(--s50, #FAFAF9); }
.ins2-builder-option.on {
  border-color: var(--ink, #0A0A0A); background: var(--s50, #FAFAF9);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.ins2-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--s300, #D6D3D1);
  flex-shrink: 0; position: relative;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-radio.on {
  border-color: var(--ink, #0A0A0A);
  background: var(--ink, #0A0A0A);
}
.ins2-radio.on::after {
  content: ''; position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; top: 4px; left: 4px;
}
.ins2-builder-option-mid { flex: 1; min-width: 0; }
.ins2-builder-option-title {
  font-size: 14px; font-weight: 800;
  color: var(--ink, #0A0A0A); letter-spacing: -0.01em;
}
.ins2-builder-option-sub {
  font-size: 11.5px; color: var(--s500, #78716C);
  font-weight: 600; margin-top: 2px;
}

.ins2-builder-charts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ins2-builder-chart {
  background: #fff; border: 1.5px solid var(--s200, #E7E5E4);
  border-radius: 10px; padding: 12px; cursor: pointer;
  text-align: center; font-family: inherit;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-builder-chart:hover { border-color: var(--s300, #D6D3D1); }
.ins2-builder-chart.on {
  border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.ins2-builder-chart-preview {
  height: 50px; display: flex; align-items: center; justify-content: center;
  background: var(--s50, #FAFAF9); border-radius: 6px;
  margin-bottom: 8px;
}
.ins2-builder-chart-preview svg { width: 60px; height: 36px; }
.ins2-builder-chart-title {
  font-size: 12.5px; font-weight: 800;
  color: var(--ink, #0A0A0A); letter-spacing: -0.005em;
}
.ins2-builder-chart-sub {
  font-size: 10px; color: var(--s500, #78716C);
  font-weight: 600; margin-top: 2px;
}

.ins2-builder-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ins2-builder-col {
  background: var(--s50, #FAFAF9); border-radius: 10px;
  padding: 14px;
}
.ins2-builder-col-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--s500, #78716C);
  margin-bottom: 10px;
}
.ins2-builder-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ins2-builder-chip {
  padding: 5px 10px; font-size: 11.5px; font-weight: 700;
  background: #fff; border: 1px solid var(--s200, #E7E5E4);
  border-radius: 6px; cursor: pointer; font-family: inherit;
  color: var(--s700, #44403C); letter-spacing: -0.005em;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-builder-chip:hover { border-color: var(--s400, #A8A29E); }
.ins2-builder-chip.on {
  background: var(--ink, #0A0A0A); color: #fff;
  border-color: var(--ink, #0A0A0A);
}
.ins2-builder-hint {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(124,58,237,0.06);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: 8px;
  font-size: 11.5px; color: var(--s700, #44403C);
  font-weight: 600; line-height: 1.5;
}

.ins2-builder-filters {
  display: flex; flex-direction: column; gap: 8px;
}
.ins2-builder-empty {
  padding: 24px; text-align: center;
  background: var(--s50, #FAFAF9); border-radius: 8px;
  font-size: 12px; color: var(--s500, #78716C);
  font-style: italic; font-weight: 600;
}
.ins2-builder-filter {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 8px;
  font-size: 12.5px; font-weight: 700;
  color: var(--s700, #44403C);
  font-family: ui-monospace, monospace;
}
.ins2-builder-filter-del {
  width: 22px; height: 22px; border-radius: 5px;
  border: none; background: transparent;
  color: var(--s500, #78716C); font-size: 16px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.ins2-builder-filter-del:hover { background: #FEE2E2; color: #DC2626; }

.ins2-builder-form {
  display: flex; flex-direction: column; gap: 14px;
}
.ins2-builder-label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--s500, #78716C);
}
.ins2-builder-label-opt {
  text-transform: none; letter-spacing: 0;
  color: var(--s400, #A8A29E); font-weight: 600;
}
.ins2-builder-input {
  padding: 10px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--s200, #E7E5E4); border-radius: 8px;
  background: #fff; font-family: inherit;
  color: var(--ink, #0A0A0A);
  transition: all 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-builder-input:focus {
  outline: none; border-color: var(--ink, #0A0A0A);
  box-shadow: 0 0 0 3px rgba(10,10,10,.05);
}
.ins2-builder-summary {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--s50, #FAFAF9);
  border: 1px solid var(--s200, #E7E5E4);
  border-radius: 10px;
  font-size: 12px; color: var(--s700, #44403C);
  font-weight: 600; line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.ins2-builder-summary-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--s500, #78716C);
  margin-bottom: 6px;
}
.ins2-builder-summary b { color: var(--ink, #0A0A0A); font-weight: 800; }

/* ─── Rep Scorecard table styles ──────────────────────────────────── */
.ins2-page .ins2-table-wrap { overflow-x: auto; }
.ins2-page .ins2-scorecard-table {
  width: 100%; border-collapse: collapse;
}
.ins2-page .ins2-scorecard-table th {
  background: var(--s50, #FAFAF9);
  padding: 10px 14px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--s500, #78716C);
  text-align: left;
  border-bottom: 1px solid var(--s200, #E7E5E4);
}
.ins2-page .ins2-scorecard-table th.r { text-align: right; }
.ins2-page .ins2-scorecard-table td {
  padding: 12px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--s100, #F5F5F4);
  font-variant-numeric: tabular-nums;
  color: var(--s700, #44403C);
}
.ins2-page .ins2-scorecard-table td.r { text-align: right; font-weight: 700; }
.ins2-page .ins2-scorecard-table tr:last-child td { border-bottom: none; }
.ins2-page .ins2-scorecard-table tr:hover td { background: var(--s50, #FAFAF9); }
.ins2-page .ins2-table-rep {
  font-weight: 800;
  color: var(--ink, #0A0A0A) !important;
  letter-spacing: -0.005em;
}
.ins2-page .ins2-grade-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px; font-weight: 900;
  letter-spacing: -0.005em;
}

/* ─── Phase 3: Customize mode / drag-and-drop ────────────────────────── */
.ins2-page .ins2-grid.is-customizing .ins2-card {
  cursor: grab;
  border: 2px dashed var(--s300, #D6D3D1);
  transition: border-color 180ms cubic-bezier(.4,0,.2,1), transform 180ms cubic-bezier(.4,0,.2,1);
}
.ins2-page .ins2-grid.is-customizing .ins2-card:hover {
  border-color: var(--ink, #0A0A0A);
  transform: translateY(-2px);
}
.ins2-page .ins2-grid.is-customizing .ins2-card-placeholder {
  border-style: dashed !important;
  border-color: var(--red, #C41230);
}
.ins2-page .ins2-card.ins2-draggable { user-select: none; }
.ins2-page .ins2-card.ins2-dragging {
  opacity: 0.5;
  transform: scale(0.97);
  cursor: grabbing !important;
  border-color: var(--red, #C41230) !important;
  border-style: solid !important;
  box-shadow: 0 8px 24px -6px rgba(196,18,48,0.4);
}
.ins2-page .ins2-grid.is-customizing::before {
  content: 'Drag cards to reorder · click Customize again to lock';
  display: block;
  grid-column: span 12;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(196,18,48,0.08) 0%, rgba(196,18,48,0.04) 100%);
  border: 1px solid rgba(196,18,48,0.18);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--red, #C41230);
  letter-spacing: -0.005em;
  text-align: center;
  margin-bottom: -4px;
}