/* insights.css — IPM Insights tab (risk forecast · env factors · watch list) */
/* embedded at the top of the Insights (activity) dashboard — no outer padding */
.ipm-ins { padding: 0; margin-bottom: 26px; display: flex; flex-direction: column; gap: 16px; }
.ipm-ins-title { margin-top: 2px; }
.ipm-ins-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.ipm-ins-eyebrow { font: 700 11px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-cyan, #38bdf8); margin-bottom: 7px; }
.ipm-ins-title { font: 800 26px/1 var(--font-display, 'Space Grotesk', sans-serif); color: var(--text-primary, #e8ecf6); margin: 0 0 6px; }
.ipm-ins-sub { font: 500 13px/1.5 var(--font-body, 'Inter', sans-serif); color: var(--text-secondary, #9fb3d9); margin: 0; max-width: 540px; }
.ipm-ins-stats { display: flex; gap: 10px; }
.ipm-ins-stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 16px; border-radius: 13px;
  background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); min-width: 78px; }
.ipm-ins-stat-v { font: 800 22px/1 var(--font-display, 'Space Grotesk', sans-serif); }
.ipm-ins-stat-k { font: 600 10.5px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary, #9fb3d9); }

.ipm-ins-card { border-radius: 16px; padding: 16px 18px; background: linear-gradient(165deg, color-mix(in srgb, var(--col-indigo, #0f1535) 70%, transparent), color-mix(in srgb, var(--col-navy, #0a0f24) 60%, transparent));
  border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }
.ipm-ins-card-h { font: 700 12px/1 var(--font-body, 'Inter', sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary, #9fb3d9); margin-bottom: 13px; }

.ipm-ins-list { display: flex; flex-direction: column; gap: 7px; }
.ipm-ins-row { display: grid; grid-template-columns: 26px minmax(140px, 1.4fr) minmax(80px, 1fr) 72px minmax(120px, 1.3fr); align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; padding: 9px 11px; border-radius: 11px;
  background: var(--glass-1, rgba(255,255,255,.04)); border: 1px solid var(--glass-border, rgba(255,255,255,.08)); transition: background .15s, border-color .15s, transform .08s; }
.ipm-ins-row:hover { background: var(--glass-2, rgba(255,255,255,.08)); border-color: var(--glass-border-2, rgba(255,255,255,.18)); }
.ipm-ins-row:active { transform: scale(.997); }
.ipm-ins-rank { font: 800 14px/1 var(--font-display, sans-serif); color: var(--text-secondary, #64748b); text-align: center; }
.ipm-ins-where { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ipm-ins-where b { font: 700 14px/1.1 var(--font-body, 'Inter', sans-serif); color: var(--text-primary, #e8ecf6); }
.ipm-ins-cond { font: 500 11.5px/1 var(--font-body, 'Inter', sans-serif); color: var(--text-secondary, #9fb3d9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ipm-ins-bar { height: 8px; border-radius: 100px; background: rgba(148,163,184,.16); overflow: hidden; }
.ipm-ins-bar-fill { display: block; height: 100%; border-radius: 100px; min-width: 6px; }
.ipm-ins-score { font: 800 20px/1 var(--font-display, 'Space Grotesk', sans-serif); text-align: right; }
.ipm-ins-score small { font: 600 10px/1 var(--font-body, sans-serif); display: block; opacity: .85; margin-top: 2px; letter-spacing: .03em; text-transform: uppercase; }
.ipm-ins-facs { display: flex; gap: 5px; flex-wrap: wrap; }
.ipm-ins-fac { font: 700 10.5px/1 var(--font-body, 'Inter', sans-serif); padding: 4px 8px; border-radius: 100px; color: var(--fc, #9fb3d9);
  background: color-mix(in srgb, var(--fc, #9fb3d9) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fc, #9fb3d9) 36%, transparent); }
.ipm-ins-allclear { padding: 18px; text-align: center; font: 600 14px/1 var(--font-body, sans-serif); color: var(--accent-teal, #2dd4bf); }

.ipm-ins-factors { display: flex; flex-direction: column; gap: 10px; }
.ipm-ins-frow { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ipm-ins-flabel { font: 700 12px/1.4 var(--font-body, sans-serif); min-width: 132px; }
.ipm-ins-fwhere { display: flex; gap: 6px; flex-wrap: wrap; }
.ipm-ins-fwhere-c { font: 600 11.5px/1 var(--font-body, sans-serif); color: var(--text-secondary, #cbd5e1); padding: 4px 9px; border-radius: 8px;
  background: var(--glass-1, rgba(255,255,255,.05)); border: 1px solid var(--glass-border, rgba(255,255,255,.1)); }

.ipm-ins-watch { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ipm-ins-watch-item { display: flex; gap: 10px; padding: 11px 13px; border-radius: 12px; background: var(--glass-1, rgba(255,255,255,.04)); border: 1px solid var(--glass-border, rgba(255,255,255,.09)); }
.ipm-ins-watch-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 4px; flex: none; }
.ipm-ins-watch-name { font: 700 13.5px/1.2 var(--font-body, sans-serif); color: var(--text-primary, #e8ecf6); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ipm-ins-watch-n { font: 600 10.5px/1 var(--font-body, sans-serif); color: var(--text-secondary, #94a3b8); padding: 3px 7px; border-radius: 100px; background: rgba(148,163,184,.14); }
.ipm-ins-watch-act { font: 500 12px/1.45 var(--font-body, sans-serif); color: var(--text-secondary, #9fb3d9); margin-top: 4px; }

.ipm-ins-empty { padding: 40px 24px; text-align: center; border-radius: 16px; display: flex; flex-direction: column; gap: 8px;
  background: var(--glass-1, rgba(255,255,255,.04)); border: 1px dashed var(--glass-border-2, rgba(255,255,255,.16)); }
.ipm-ins-empty b { font: 700 16px/1 var(--font-display, sans-serif); color: var(--text-primary, #e8ecf6); }
.ipm-ins-empty span { font: 500 13px/1.5 var(--font-body, sans-serif); color: var(--text-secondary, #9fb3d9); }

@media (max-width: 760px) {
  .ipm-ins-row { grid-template-columns: 22px 1fr 64px; }
  .ipm-ins-bar, .ipm-ins-facs { display: none; }
}

/* ── light theme ─────────────────────────────────────────────────────────── */
/* the card gradient mixes into --col-indigo/--col-navy (dark; not inverted) →
   rebuild it on a frosted-white base so the panel reads on the pale page. */
html[data-theme="light"] .ipm-ins-card {
  background: linear-gradient(165deg, var(--glass-3, rgba(255,255,255,.80)), var(--glass-2, rgba(255,255,255,.68)));
  border-color: var(--glass-border, rgba(130,100,200,.18));
}
html[data-theme="light"] .ipm-ins-bar { background: rgba(19,16,58,.10); }
html[data-theme="light"] .ipm-ins-watch-n { background: rgba(19,16,58,.08); }