/* SENTINEL v12 — Extortion view, plus the actor-profile drawer it opens
   (drawer rules are scoped under #drawer with xa- classes). */

#view-extortion .wrap > * + * { margin-top: var(--s-5); }
#view-extortion .view-head { margin-bottom: var(--s-5); }
#view-extortion .xt-src { font-size: var(--t-13); font-weight: 600; text-decoration: none; border: 1px solid var(--rule-2); border-radius: 999px; padding: 3px 12px; }
#view-extortion .xt-src:hover { border-color: var(--cyan); }

/* ── at a glance ── */
#view-extortion .xt-stats {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--slate); overflow: hidden;
}
#view-extortion .xt-stats .stat { padding: var(--s-4) var(--s-5); border-left: 1px solid var(--rule); position: relative; }
#view-extortion .xt-stats .stat:first-child { border-left: 0; }
#view-extortion .xt-stats .label { font-size: var(--t-14); line-height: 1.35; margin-top: 4px; }
#view-extortion .xt-stats .delta { margin-top: 4px; line-height: 1.4; }
#view-extortion .xt-stat--amber .num { color: var(--amber); }
#view-extortion .xt-stat--amber::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--amber); }

/* ── timeline ── */
#view-extortion .xt-chart { min-height: 170px; }
#view-extortion .xt-chart svg { display: block; }
#view-extortion .xt-chart + .note { margin-top: var(--s-3); max-width: 90ch; }

/* ── three tallies ── */
#view-extortion .xt-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
#view-extortion .xt-hotkey { display: inline-flex; align-items: center; gap: 6px; }
#view-extortion .xt-hotkey i { width: 10px; height: 10px; border-radius: 2px; background: var(--amber); }
#view-extortion .xt-bars { list-style: none; display: grid; gap: 10px; }
#view-extortion .xt-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); align-items: baseline; font-size: var(--t-14); }
#view-extortion .xt-bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-extortion .xt-bars b { font-weight: 500; color: var(--paper); }
#view-extortion .xt-bt { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
#view-extortion .xt-bt i { display: block; height: 100%; width: var(--v, 0%); background: var(--sev-high); border-radius: 3px; opacity: .85; }
#view-extortion .xt-bars li.hot .xt-bt i, #view-extortion .xt-bars li.mark .xt-bt i { background: var(--amber); opacity: 1; }
#view-extortion .xt-bars li.hot .xt-bn, #view-extortion .xt-bars li.mark .xt-bn { color: var(--amber); }
#view-extortion .xt-bars li.ns { padding-top: 10px; border-top: 1px dashed var(--rule-2); }
#view-extortion .xt-bars li.ns .xt-bn { color: var(--mist); font-style: italic; }
#view-extortion .xt-bars li.ns .xt-bt i { background: transparent; border: 1px dashed var(--mist); box-sizing: border-box; }
#view-extortion .xt-rest { margin-top: var(--s-3); }

/* group names that open the actor drawer */
#view-extortion .xt-actor {
  background: none; border: 0; padding: 0; color: var(--cyan); font-weight: 600; font-size: inherit; text-align: left;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cyan) 40%, transparent); text-underline-offset: 3px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#view-extortion .xt-actor:hover { color: var(--paper); text-decoration-color: var(--paper); }

/* ── claims ── */
#view-extortion .xt-tools {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: end;
  padding: var(--s-4) var(--s-5); background: var(--ink-2); border-bottom: 1px solid var(--rule);
}
#view-extortion .xt-tools .toggle { min-height: 38px; }
#view-extortion .xt-row { grid-template-columns: minmax(0, 1fr) minmax(120px, 200px) 150px; align-items: center; padding-block: var(--s-3); }
#view-extortion .xt-row .row-title { font-size: var(--t-16); }
#view-extortion .xt-row--hot { box-shadow: inset 3px 0 0 var(--amber); }
#view-extortion .xt-g { min-width: 0; font-size: var(--t-14); }
#view-extortion .xt-when { font-size: var(--t-12); color: var(--fog); text-align: right; white-space: nowrap; }
#view-extortion .xt-claims .empty .btn { display: flex; margin-top: var(--s-3); }
#view-extortion .xt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); }
#view-extortion .xt-foot a { font-weight: 600; }

@media (max-width: 1180px) {
  #view-extortion .xt-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #view-extortion .xt-stats .stat:nth-child(4) { border-left: 0; }
  #view-extortion .xt-stats .stat:nth-child(n+4) { border-top: 1px solid var(--rule); }
  #view-extortion .xt-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-extortion .xt-three > :first-child { grid-row: span 2; }
}
@media (max-width: 760px) {
  #view-extortion .xt-three { grid-template-columns: minmax(0, 1fr); }
  #view-extortion .xt-three > :first-child { grid-row: auto; }
  #view-extortion .xt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-extortion .xt-tools .xt-q { grid-column: 1 / -1; }
  #view-extortion .xt-tools .toggle { grid-column: 1 / -1; justify-self: start; }
  #view-extortion .xt-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "group when"; row-gap: 6px; }
  #view-extortion .xt-row .row-main { grid-area: main; }
  #view-extortion .xt-g { grid-area: group; }
  #view-extortion .xt-when { grid-area: when; }
}
@media (max-width: 560px) {
  #view-extortion .xt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-extortion .xt-stats .stat { padding: var(--s-3) var(--s-4); }
  #view-extortion .xt-stats .stat:nth-child(n) { border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); }
  #view-extortion .xt-stats .stat:nth-child(odd) { border-left: 0; }
  #view-extortion .xt-stats .stat:nth-child(-n+2) { border-top: 0; }
  #view-extortion .xt-stats .num { font-size: var(--t-28); }
  #view-extortion .xt-tools { padding-inline: var(--s-4); }
}

/* ── actor drawer ── */
#drawer .xa-caveat { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-left: 3px solid var(--amber); border-radius: var(--radius); background: color-mix(in srgb, var(--amber) 6%, transparent); }
#drawer .xa-caveat .eyebrow { color: var(--amber); margin-bottom: 4px; }
#drawer .xa-caveat p:last-child { font-size: var(--t-14); color: var(--paper); }
#drawer .xa-local { margin-top: var(--s-3); font-size: var(--t-14); color: var(--fog); }
#drawer .xa-local b { color: var(--paper); font-weight: 500; }
#drawer .xa-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0; }
#drawer .xa-stats > div { background: var(--slate); padding: 10px 12px; min-width: 0; }
#drawer .xa-stats dt { font-size: var(--t-12); color: var(--fog); }
#drawer .xa-stats dd { margin: 2px 0 0; font-size: var(--t-18); color: var(--paper); overflow-wrap: anywhere; }
#drawer .xa-stats + .note { margin-top: var(--s-2); }
#drawer .xa-spark { display: flex; align-items: flex-end; gap: 3px; height: 64px; border-bottom: 1px solid var(--rule-2); }
#drawer .xa-spark span { flex: 1; height: var(--h); background: var(--sev-high); opacity: .7; border-radius: 2px 2px 0 0; }
#drawer .xa-spark span.now { opacity: 1; background: var(--amber); }
#drawer .xa-spark span.zero { background: var(--rule-2); }
#drawer .xa-axis { display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-12); color: var(--mist); margin-top: 4px; }
#drawer .xa-bars { list-style: none; display: grid; gap: 8px; }
#drawer .xa-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: var(--s-3); align-items: center; font-size: var(--t-14); }
#drawer .xa-bl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer .xa-bt { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
#drawer .xa-bt i { display: block; height: 100%; width: var(--v, 0%); background: var(--sev-high); border-radius: 3px; }
#drawer .xa-bars b { font-weight: 500; min-width: 3ch; text-align: right; }
#drawer .xa-recent { list-style: none; }
#drawer .xa-recent li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--rule); }
#drawer .xa-recent li:first-child { border-top: 0; padding-top: 0; }
#drawer .xa-recent span { font-size: var(--t-13); color: var(--fog); }
#drawer .xa-head { padding-right: 44px; }
#drawer .xa-fail { margin-top: var(--s-2); padding: var(--s-4) 0; }
#drawer .xa-bars li.ns { color: var(--mist); font-style: italic; }
#drawer .xa-bars li.ns .xa-bt i { background: transparent; border: 1px dashed var(--mist); box-sizing: border-box; }
#drawer .xa-upd { margin-top: var(--s-5); }
#drawer .xa-src { margin-top: var(--s-3); font-size: var(--t-13); color: var(--fog); }

/* ── v12.1 catalogue chips on the group tally ── */
#view-extortion .xt-bars .xt-bn { display: flex; align-items: baseline; gap: 8px; }
#view-extortion .xt-bn .xt-actor { flex: 0 1 auto; min-width: 0; }
#view-extortion .xt-ak {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--f-data); font-size: var(--t-12); line-height: 1.5; color: var(--fog);
  border: 1px solid var(--rule-2); border-radius: 999px; padding: 0 7px; max-width: 60%;
}
#view-extortion .xt-ak--g { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, transparent); }
#view-extortion .xt-aknote:empty { display: none; }
#view-extortion .xt-aknote { margin-top: var(--s-3); }

/* ── v12.1 actor drawer: reference dossier ── */
#drawer .xa-dos { padding-top: var(--s-4); border-top: 1px solid var(--rule-2); }
#drawer .xa-dos h4 { font-size: var(--t-13); font-weight: 700; color: var(--paper); margin: var(--s-4) 0 var(--s-2); }
#drawer .xa-dos h4 .quiet { font-weight: 400; font-family: var(--f-data); margin-left: 4px; }
#drawer .xa-dcav { font-size: var(--t-13); color: var(--fog); margin-bottom: var(--s-3); }
#drawer .xa-match { list-style: none; display: grid; gap: 4px; font-size: var(--t-14); margin-bottom: var(--s-3); }
#drawer .xa-match .quiet { font-size: var(--t-13); }
#drawer .xa-facts { display: grid; gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
#drawer .xa-facts > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s-3); background: var(--slate); padding: 9px 12px; }
#drawer .xa-facts > div.xa-dis { box-shadow: inset 3px 0 0 var(--amber); }
#drawer .xa-facts dt { font-size: var(--t-12); color: var(--fog); line-height: 1.5; }
#drawer .xa-facts dt .chip { margin-top: 4px; }
#drawer .xa-facts dd { margin: 0; font-size: var(--t-14); color: var(--paper); display: grid; gap: 6px; min-width: 0; }
#drawer .xa-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-width: 0; overflow-wrap: anywhere; }
#drawer .xa-v small { flex-basis: 100%; font-size: var(--t-12); color: var(--mist); }
#drawer .xa-s { font-size: var(--t-12); line-height: 1.4; padding: 0 6px; border-radius: 3px; border: 1px solid var(--rule-2); color: var(--fog); white-space: nowrap; }
#drawer .xa-s--is { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
#drawer .xa-s--rl { color: var(--sev-high); border-color: color-mix(in srgb, var(--sev-high) 40%, transparent); }
#drawer .xa-akas { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-14); }
#drawer .xa-akas .xa-v small { flex-basis: auto; }
#drawer .xa-akas .field-label { flex-basis: 100%; }
#drawer .xa-gapnote { margin-top: var(--s-2); color: var(--amber); }
#drawer .xa-dos > .note { margin-top: var(--s-2); }
#drawer .xa-tech { list-style: none; display: grid; }
#drawer .xa-tech li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; grid-template-areas: "id name src" "id tac src"; column-gap: var(--s-3); padding: 7px 0; border-top: 1px solid var(--rule); font-size: var(--t-14); align-items: baseline; }
#drawer .xa-tech li:first-child { border-top: 0; }
#drawer .xa-tech li > a { grid-area: id; font-size: var(--t-13); }
#drawer .xa-tech li > span:first-of-type { grid-area: name; min-width: 0; }
#drawer .xa-tech .xa-tac { grid-area: tac; font-size: var(--t-12); color: var(--mist); text-transform: capitalize; }
#drawer .xa-tech .xa-ts { grid-area: src; justify-self: end; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
#drawer .xa-desc { font-size: var(--t-14); color: var(--fog); }
#drawer .xa-refs { list-style: none; display: grid; gap: 4px; font-size: var(--t-14); }
#drawer .xa-refs li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
#drawer .xa-refs a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  #drawer .xa-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #drawer .xa-tech li { grid-template-columns: 5.5rem minmax(0, 1fr); grid-template-areas: "id name" "id tac" "id src"; }
  #drawer .xa-tech .xa-ts { grid-area: src; justify-self: start; justify-content: flex-start; margin-top: 4px; }
}
#view-extortion .xt-also { color: var(--fog); border-style: dashed; }