/* Styles for intel.js. Load chart-kit.css too. PreviewKit tokens with fallbacks. */
.il { display: grid; gap: 20px; }
.il-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.il-kpi { background: #fff; border: 1px solid var(--line, #e2ddd4); border-radius: 14px; padding: 14px 16px; position: relative; min-width: 0; display: grid; gap: 2px; align-content: start; }
.il-kpi .kl { font-size: 13px; color: var(--muted, #5e6470); font-weight: 700; padding-right: 104px; }
.il-kpi b { font-size: 26px; line-height: 1.15; }
.il-kpi .spark { position: absolute; right: 12px; top: 12px; }
.il-d { font-size: 12.5px; color: var(--muted, #5e6470); font-weight: 600; }
.il-d.up { color: var(--ok, #2a6f47); } .il-d.down { color: var(--danger, #a33a2a); }
@media (max-width: 760px) { .il-kpis { grid-template-columns: 1fr 1fr; } .il-kpi .spark { display: none; } .il-kpi .kl { padding-right: 0; } .il-kpi b { font-size: 22px; } }
.il-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1020px) { .il-grid { grid-template-columns: 1fr; } }
.il-card { background: #fff; border: 1px solid var(--line, #e2ddd4); border-radius: var(--radius, 14px); padding: 16px 18px; min-width: 0; }
.il-head h3 { margin: 0; font-size: 16px; } .il-head p { margin: 2px 0 10px; font-size: 13.5px; color: var(--muted, #5e6470); }
.il-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.il-chip { font: inherit; font-size: 13px; font-weight: 700; border: 1.5px solid var(--line, #e2ddd4); background: #fff; border-radius: 999px; padding: 6px 11px; cursor: pointer; color: var(--muted, #5e6470); }
.il-chip[aria-pressed="true"] { border-color: var(--ink, #15181f); color: var(--ink, #15181f); background: var(--paper, #faf8f4); }
.il details { margin-top: 10px; } .il summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.il-alist { list-style: none; margin: 0; padding: 0; }
.il-alist li { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; padding: 10px 0; border-top: 1px solid var(--line-2, #efebe4); align-items: start; }
.il-alist li.resolved { opacity: .55; }
.il-alist b { font-size: 14.5px; display: block; } .il-alist small { font-size: 12.5px; color: var(--muted, #5e6470); }
.il-aacts { grid-column: 2; display: flex; gap: 6px; flex-wrap: wrap; }
.il-aacts button, .il-btn { font: inherit; font-size: 12.5px; font-weight: 700; border: 1.5px solid var(--line, #e2ddd4); background: transparent; border-radius: 999px; padding: 4px 10px; cursor: pointer; color: var(--ink, #15181f); }
.il-sev { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-top: 2px; }
.il-sev.high { background: var(--danger-soft, #f8e3df); color: var(--danger, #a33a2a); } .il-sev.med { background: var(--warn-soft, #fbf0d6); color: var(--warn, #8a5e0e); }
.il-rules ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.il-rules li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.il-num input { width: 64px; font: inherit; padding: 3px 6px; border: 1.5px solid var(--line, #e2ddd4); border-radius: 8px; }
.il-empty { color: var(--muted, #5e6470); font-size: 14px; }
.il-st { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.il-st.ok { background: var(--ok-soft, #e3f1e7); color: var(--ok, #2a6f47); } .il-st.warn { background: var(--warn-soft, #fbf0d6); color: var(--warn, #8a5e0e); } .il-st.danger { background: var(--danger-soft, #f8e3df); color: var(--danger, #a33a2a); }
.il-ctbl { min-width: 560px; }
.il .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.il-col { display: grid; gap: 20px; min-width: 0; }
.il-kpi .il-d + .il-d { display: block; }
.il-ctbl td:not(:last-child) { white-space: nowrap; }