/* SENTINEL v12 — Exploitation view. */

/* ── at a glance ── */
#view-exploitation .xp-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--slate);
  margin-bottom: var(--s-5);
  overflow: hidden;
}
#view-exploitation .xp-stats .stat { padding: var(--s-4) var(--s-5) var(--s-4); border-left: 1px solid var(--rule); position: relative; }
#view-exploitation .xp-stats .stat:first-child { border-left: 0; }
#view-exploitation .xp-stats .num { font-size: var(--t-36); }
#view-exploitation .xp-stats .label { font-size: var(--t-14); color: var(--fog); line-height: 1.35; margin-top: 4px; }
#view-exploitation .xp-stats .delta { margin-top: 4px; }
#view-exploitation .xp-stat--soon .num { color: var(--amber); }
#view-exploitation .xp-stat--over .num { color: var(--sev-crit); }
#view-exploitation .xp-stat--mine .num { color: var(--amber); }
#view-exploitation .xp-stat--weap .num { color: var(--sev-high); }
#view-exploitation .xp-stat--soon::before, #view-exploitation .xp-stat--over::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--amber);
}
#view-exploitation .xp-stat--over::before { background: var(--sev-crit); }

/* ── layout: list beside the context column ── */
#view-exploitation .xp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--s-5); align-items: start; }
#view-exploitation .xp-side { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }

/* ── toolbar ── */
#view-exploitation .xp-tools {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); background: var(--ink-2);
}
#view-exploitation .xp-q { flex: 1 1 280px; }
#view-exploitation .xp-sort { display: flex; align-items: center; gap: var(--s-2); }
#view-exploitation .xp-tools .toggles { flex: 1 1 100%; }

#view-exploitation .xp-colhead {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 196px; gap: var(--s-4);
  padding: var(--s-2) var(--s-5); border-bottom: 1px solid var(--rule);
  font-size: var(--t-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--mist);
}
#view-exploitation .xp-colhead span:last-child { text-align: right; }

/* ── one row per CVE ── */
#view-exploitation .xp-row { grid-template-columns: 140px minmax(0, 1fr) 196px; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); }
#view-exploitation .xp-clock { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
#view-exploitation .xp-clock b { font-size: var(--t-16); font-weight: 600; line-height: 1.2; color: var(--paper); }
#view-exploitation .xp-clock.soon b { color: var(--amber); }
#view-exploitation .xp-clock.over b { color: var(--sev-crit); }
#view-exploitation .xp-clock.over { opacity: .92; }
#view-exploitation .xp-track { display: block; width: 100%; max-width: 120px; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
#view-exploitation .xp-track i { display: block; height: 100%; width: var(--v, 0%); background: var(--fog); border-radius: 2px; }
#view-exploitation .xp-clock.soon .xp-track i { background: var(--amber); }
#view-exploitation .xp-clock.over .xp-track i { background: var(--sev-crit); }
#view-exploitation .xp-due { font-size: var(--t-12); color: var(--mist); }

#view-exploitation .xp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
#view-exploitation .xp-id .mono { font-size: var(--t-14); color: var(--cyan); font-weight: 500; margin-right: 4px; }
#view-exploitation .xp-row .row-title { font-size: var(--t-16); }
#view-exploitation .xp-row .row-sub { font-size: var(--t-14); line-height: 1.45; }
#view-exploitation .xp-corr { margin-top: 6px; font-size: var(--t-13); color: var(--ok); }

#view-exploitation .xp-scores { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 2px; }
#view-exploitation .xp-cvss { display: inline-flex; align-items: center; gap: 8px; }
#view-exploitation .xp-src { font-family: var(--f-data); font-size: var(--t-12); color: var(--mist); }
#view-exploitation .epss { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-12); color: var(--fog); }
#view-exploitation .epss .meter { width: 56px; min-width: 56px; }
#view-exploitation .xp-row:hover .xp-id .mono { text-decoration: underline; text-underline-offset: 3px; }
#view-exploitation .xp-list .empty .xp-clear { display: flex; margin-top: var(--s-3); }

/* ── context column ── */
#view-exploitation .xp-chart { min-height: 150px; }
#view-exploitation .xp-chart svg { display: block; }
#view-exploitation .xp-chart + .note { margin-top: var(--s-3); }
#view-exploitation .xp-gapkey { display: inline-block; width: 14px; border-top: 1px dashed var(--mist); vertical-align: middle; margin: 0 2px; }

#view-exploitation .xp-mixbar { display: flex; height: 34px; border-radius: var(--radius); overflow: hidden; gap: 2px; }
#view-exploitation .xp-mixbar span { display: flex; align-items: center; justify-content: center; min-width: 22px; flex-basis: 0; }
#view-exploitation .xp-mixbar b { font-size: var(--t-13); font-weight: 600; color: var(--ink); }
#view-exploitation .mix-3 { --c: var(--sev-crit); }
#view-exploitation .mix-14 { --c: var(--amber); }
#view-exploitation .mix-21 { --c: var(--cyan); }
#view-exploitation .mix-x { --c: var(--mist); }
#view-exploitation .xp-mixbar span { background: var(--c); }
#view-exploitation .xp-mixkey { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: var(--s-3) 0; font-size: var(--t-14); }
#view-exploitation .xp-mixkey li { display: grid; grid-template-columns: 10px minmax(0, 1fr) 3ch 4ch; align-items: center; gap: 10px; }
#view-exploitation .xp-mixkey b { text-align: right; }
#view-exploitation .xp-mixkey i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
#view-exploitation .xp-mixkey .quiet { font-size: var(--t-12); min-width: 3ch; text-align: right; }

#view-exploitation .xp-defs { display: grid; gap: 0; font-size: var(--t-14); }
#view-exploitation .xp-defs dt:not(:first-child) { margin-top: var(--s-3); }
#view-exploitation .xp-defs dt { font-family: var(--f-data); font-size: var(--t-13); font-weight: 600; color: var(--amber); }
#view-exploitation .xp-defs dd { margin: 2px 0 0; color: var(--fog); line-height: 1.55; }
#view-exploitation .xp-defs .sev { vertical-align: 1px; }

/* ── exploit maturity ladder (rows, side panel and the KEV drawer) ── */
#view-exploitation .xi-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
#view-exploitation .xp-scores .xi-ladder { margin-top: 2px; }
#view-exploitation .xi-ladder, #drawer .xi-ladder { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
#view-exploitation .xi-rungs, #drawer .xi-rungs { display: inline-flex; gap: 2px; }
#view-exploitation .xi-r, #drawer .xi-r {
  font-style: normal;
  --c: var(--mist);
  display: block; width: 13px; height: 8px; border-radius: 1px; background: var(--rule); box-sizing: border-box;
}
#view-exploitation .xi-r--poc, #drawer .xi-r--poc { --c: var(--cyan); }
#view-exploitation .xi-r--weaponized, #drawer .xi-r--weaponized { --c: var(--amber); }
#view-exploitation .xi-r--exploited, #drawer .xi-r--exploited { --c: var(--sev-high); }
#view-exploitation .xi-r--ransomware, #drawer .xi-r--ransomware { --c: var(--sev-crit); }
#view-exploitation .xi-r.is-off, #drawer .xi-r.is-off { background: transparent; border: 1px solid var(--rule-2); }
#view-exploitation .xi-r.is-on, #drawer .xi-r.is-on { background: color-mix(in srgb, var(--c) 72%, var(--ink-2)); }
#view-exploitation .xi-r.is-top, #drawer .xi-r.is-top { background: var(--c); box-shadow: 0 0 0 1px var(--c); }
#view-exploitation .xi-r.is-unk, #drawer .xi-r.is-unk { background: transparent; border: 1px dotted var(--mist); }
#view-exploitation .is-pending .xi-r.is-top, #drawer .is-pending .xi-r.is-top { background: transparent; border: 1px dashed var(--c); box-shadow: none; }
#view-exploitation .xi-lbl { font-family: var(--f-data); font-size: var(--t-12); color: var(--fog); white-space: nowrap; }
#view-exploitation .xi-ladder--weaponized .xi-lbl { color: var(--amber); }
#view-exploitation .xi-ladder--exploited .xi-lbl { color: var(--sev-high); }
#view-exploitation .xi-ladder--ransomware .xi-lbl { color: var(--sev-crit); }
#view-exploitation .xi-ladder--poc .xi-lbl { color: var(--cyan); }
#view-exploitation .xi-ssvc, #drawer .xi-ssvc { font-family: var(--f-data); font-size: var(--t-12); }
#view-exploitation .xi-ssvc-k { color: var(--mist); }
#view-exploitation .xi-tool { font-family: var(--f-data); font-size: var(--t-12); color: var(--amber); }

/* side panels */
#view-exploitation .xp-chart--bars { min-height: 0; }
#view-exploitation .xp-arow { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); }
#view-exploitation .xp-arow .row-sub { font-size: var(--t-13); overflow-wrap: anywhere; }
#view-exploitation .xp-arow .row-side { font-size: var(--t-12); color: var(--fog); align-self: start; padding-top: 2px; }
#view-exploitation .xp-arow .xp-id .mono { font-size: var(--t-13); }
#view-exploitation .xp-ahead .empty { margin: var(--s-4); }
#view-exploitation .xp-more { padding: var(--s-2) var(--s-5); font-size: var(--t-12); }
#view-exploitation button:disabled { opacity: .45; cursor: not-allowed; }

/* KEV drawer: "How close is this to you" (drawer lives outside the view) */
#drawer .xi-ladder--labels { display: flex; width: 100%; margin: var(--s-2) 0 var(--s-3); }
#drawer .xi-ladder--labels .xi-rungs { display: grid; grid-template-columns: 1.05fr .7fr 1.25fr 1.05fr 1.25fr; gap: 3px; width: 100%; }
#drawer .xi-ladder--labels .xi-r { width: auto; height: auto; min-height: 30px; display: flex; align-items: flex-end; padding: 0 4px 5px; border-radius: 2px; }
#drawer .xi-ladder--labels .xi-r span { font-style: normal; font-size: var(--t-12); font-weight: 600; line-height: 1.1; color: var(--fog); hyphens: auto; overflow-wrap: anywhere; }
#drawer .xi-ladder--labels .xi-r.is-on span { color: var(--paper); }
#drawer .xi-ladder--labels .xi-r.is-top span { color: var(--ink); }
#drawer .is-pending .xi-r.is-top span { color: var(--paper); }
#drawer .xi-stage { margin-bottom: var(--s-3); }
#drawer .xi-block { margin-top: var(--s-4); }
#drawer .xi-block h4 { font-size: var(--t-13); font-weight: 600; color: var(--paper); margin-bottom: var(--s-2); }
#drawer .xi-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#drawer .xi-links li { line-height: 1.45; overflow-wrap: anywhere; }
#drawer .xi-links a { color: var(--cyan); }
#drawer .xi-mono { font-family: var(--f-data); font-size: var(--t-13); }
#drawer .xi-links .chip { margin-left: 4px; font-size: var(--t-12); }
#drawer .xi-meta { display: block; font-size: var(--t-12); color: var(--mist); margin-top: 2px; }
#drawer p.xi-meta { margin-top: var(--s-2); }
#drawer .xi-none { color: var(--fog); font-size: var(--t-14); }
#drawer .xi-warn { margin-top: var(--s-2); border-left: 2px solid var(--amber); padding-left: var(--s-3); }
#drawer .xi-ssvc-dl { display: grid; gap: var(--s-2); margin: 0; }
#drawer .xi-ssvc-dl dt { font-size: var(--t-13); font-weight: 600; color: var(--paper); }
#drawer .xi-ssvc-dl dt .chip { margin-left: 6px; }
#drawer .xi-ssvc-dl dd { margin: 2px 0 0; font-size: var(--t-14); color: var(--fog); line-height: 1.5; }
#drawer .xi-basis { margin-top: var(--s-4); }
#drawer .xi-unavail { margin-top: var(--s-2); }

/* ── responsive ── */
@media (max-width: 1180px) {
  #view-exploitation .xp-grid { grid-template-columns: minmax(0, 1fr); }
  #view-exploitation .xp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-exploitation .xp-side .xp-read { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  #view-exploitation .xp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-exploitation .xp-stats .stat:nth-child(4) { border-left: 0; }
  #view-exploitation .xp-stats .stat:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 760px) {
  #view-exploitation .xp-side { grid-template-columns: minmax(0, 1fr); }
  #view-exploitation .xp-defs { grid-template-columns: minmax(0, 1fr); }
  #view-exploitation .xp-colhead { display: none; }
  #view-exploitation .xp-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "clock scores";
    row-gap: var(--s-3);
  }
  #view-exploitation .xp-row .row-main { grid-area: main; }
  #view-exploitation .xp-clock { grid-area: clock; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  #view-exploitation .xp-track { flex: 1 0 100%; max-width: 160px; }
  #view-exploitation .xp-scores { grid-area: scores; justify-content: flex-start; }
}
@media (max-width: 560px) {
  #view-exploitation .xp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-exploitation .xp-stats .stat { padding: var(--s-3) var(--s-4); }
  #view-exploitation .xp-stats .stat:nth-child(n) { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  #view-exploitation .xp-stats .stat:nth-child(odd) { border-left: 0; }
  #view-exploitation .xp-stats .stat:nth-child(-n+2) { border-top: 0; }
  #view-exploitation .xp-stats .num { font-size: var(--t-28); }
  #view-exploitation .xp-tools { padding-inline: var(--s-4); }
  #view-exploitation .xp-sort { flex-wrap: wrap; }
  #view-exploitation .xp-sort .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  #view-exploitation .xp-sort .seg button { border-bottom: 1px solid var(--rule-2); }
  #view-exploitation .xp-sort .seg button:nth-child(3) { border-right: 0; }
  #view-exploitation .xp-sort .seg button:nth-child(n+4) { border-bottom: 0; }
}