/* === Synedica Dashboard — modern dark UI === */

/* Country flag emoji polyfill — Windows does not render flag glyphs by
   default, so route any `.flag-emoji` span through this font first. The
   font ships only flag codepoints (~10KB woff2), so it falls through to
   the system emoji font for everything else. */
@font-face {
  font-family: "Twemoji Country Flags";
  font-style: normal;
  font-weight: 400;
  unicode-range: U+1F1E6-1F1FF;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
}
.flag-emoji {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", "EmojiOne Color", sans-serif;
  font-size: 1.05em;
  line-height: 1;
  vertical-align: -1px;
  margin-right: 4px;
}

:root {
  /* canvas */
  --bg:        #0b0d10;
  --bg-1:     #11141a;
  --bg-2:     #161a21;
  --bg-3:     #1d222b;
  --bg-hover: #232935;

  /* foreground */
  --fg:        #e8ecf2;
  --fg-1:     #c6ccd6;
  --fg-2:     #8b94a3;
  --fg-3:     #5d6675;

  /* edges */
  --border:        #232833;
  --border-strong: #2d3340;

  /* accents */
  --accent:     #7aa2f7;   /* refined blue */
  --accent-hi:  #9ec1ff;
  --accent-bg:  rgba(122,162,247,0.10);
  --gold:       #e0af68;
  --green:      #9ece6a;
  --red:        #f7768e;
  --orange:     #ff9e64;
  --magenta:    #bb9af7;
  --teal:       #7dcfff;

  /* classification colours */
  --c-official:         #5ec2ff;
  --c-legit-competitor: #8b94a3;
  --c-legit-customer:   #9ece6a;
  --c-imposter-brand:   #f7768e;
  --c-imposter-seller:  #ff9e64;
  --c-suspect:          #e0af68;
  --c-news:             #bb9af7;
  --c-unknown:          #5d6675;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.03) inset;
  --shadow-drawer: -16px 0 40px rgba(0,0,0,0.55);
  --shadow-drawer-up: 0 -16px 40px rgba(0,0,0,0.55);

  --glow-accent: 0 0 0 1px var(--accent-bg), 0 0 18px rgba(122,162,247,0.18);
  --glow-red:    0 0 0 1px rgba(247,118,142,0.18), 0 0 18px rgba(247,118,142,0.20);
  --focus-ring:  0 0 0 2px rgba(122,162,247,0.40);

  --radius:    10px;
  --radius-sm: 6px;

  --sidebar-w:           220px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            52px;
  --statusfab-w:         260px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The HTML `hidden` attribute sets `display: none` at the user-agent layer,
   but id-targeted rules like `#syn-shell { display: grid }` outrank it by
   specificity and silently leak the element. Force it. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--accent-bg); color: var(--fg); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hi); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 22px; line-height: 1.25; }
h2 { font-size: 17px; line-height: 1.3; }
h3 {
  font-size: 11px; line-height: 1.2;
  color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
p  { margin: 0; }

/* ============================================
   SHELL — sidebar + main column
   ============================================ */
#syn-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}
body.sidebar-collapsed #syn-shell {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

/* ============================================
   SIDEBAR
   ============================================ */
#syn-sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

.syn-brand {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.syn-brand a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg); font-weight: 600; font-size: 14px;
  min-width: 0;
}
.syn-brand a:hover { color: var(--fg); }
.syn-brand .mark {
  flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(140deg, var(--accent) 0%, var(--magenta) 100%);
  color: #0b0d10; font-weight: 700; font-size: 13px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05) inset, 0 4px 10px rgba(122,162,247,0.25);
}
.syn-brand .brand-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.syn-collapse-btn {
  background: transparent; border: 0; color: var(--fg-3);
  padding: 4px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.syn-collapse-btn:hover { color: var(--fg); background: var(--bg-2); }
.syn-collapse-btn .icon { width: 16px; height: 16px; }

body.sidebar-collapsed .brand-name,
body.sidebar-collapsed .syn-nav-group-label,
body.sidebar-collapsed .syn-nav-item-label,
body.sidebar-collapsed .syn-user-meta,
body.sidebar-collapsed #syn-sidebar .role-pill {
  display: none;
}
/* D11 — when collapsed, hide the brand mark/link entirely (the 56px column
   can't fit both the 26px mark and the toggle alongside) and let the toggle
   button become the sole brand-area control, centred and clearly visible. */
body.sidebar-collapsed .syn-brand {
  justify-content: center;
  padding: 12px 0;
}
body.sidebar-collapsed .syn-brand a { display: none; }
body.sidebar-collapsed .syn-collapse-btn {
  transform: rotate(180deg);
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--fg-1);
}
body.sidebar-collapsed .syn-collapse-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

#syn-nav {
  overflow-y: auto;
  padding: 6px 4px 16px;
  display: flex; flex-direction: column;
}

.syn-nav-group {
  display: flex; flex-direction: column; gap: 0;
  padding: 6px 0;
  position: relative;
}
.syn-nav-group + .syn-nav-group {
  border-top: 1px solid var(--border);
}
.syn-nav-group-label {
  display: flex; align-items: center; gap: 7px;
  color: var(--fg-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 6px 12px 4px;
}
.syn-nav-group-label::before {
  content: ""; flex: 0 0 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--group-accent, var(--fg-3));
  box-shadow: 0 0 6px var(--group-accent, transparent);
  opacity: 0.85;
}
.syn-nav-group[data-accent="teal"]   { --group-accent: var(--teal); }
.syn-nav-group[data-accent="accent"] { --group-accent: var(--accent); }
.syn-nav-group[data-accent="orange"] { --group-accent: var(--orange); }
.syn-nav-group[data-accent="magenta"]{ --group-accent: var(--magenta); }
.syn-nav-group[data-accent="green"]  { --group-accent: var(--green); }

.syn-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 10px;
  border-radius: 6px;
  color: var(--fg-2);
  font-size: 12.5px;
  font-weight: 500;
  margin: 1px 4px;
  transition: background 120ms, color 120ms;
  position: relative;
}
.syn-nav-item:hover {
  color: var(--fg);
  background: var(--bg-2);
}
.syn-nav-item:hover .icon { color: var(--group-accent, var(--fg-1)); }
.syn-nav-item.active {
  color: var(--fg);
  background: var(--bg-3);
  box-shadow: inset 2px 0 0 var(--group-accent, var(--accent));
}
.syn-nav-item .icon {
  flex: 0 0 15px;
  width: 15px; height: 15px;
  color: var(--fg-3);
  transition: color 120ms;
}
.syn-nav-item.active .icon { color: var(--group-accent, var(--accent)); }
.syn-nav-item-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.syn-nav-item .badge {
  margin-left: auto;
  background: var(--bg-3); color: var(--fg-1);
  padding: 0 6px; border-radius: 999px; font-size: 10px;
}

body.sidebar-collapsed .syn-nav-item { justify-content: center; padding: 6px 0; }
body.sidebar-collapsed .syn-nav-item .badge { display: none; }
body.sidebar-collapsed .syn-nav-group-label {
  padding: 6px 0 4px;
  justify-content: center;
}
body.sidebar-collapsed .syn-nav-group-label::before { box-shadow: 0 0 8px var(--group-accent, transparent); }

/* D11 — when the sidebar is collapsed, give each nav-item's icon the group
   accent colour so analysts can navigate by hue alone. Previously every
   icon stayed fg-3 grey, so the collapsed sidebar lost its visual grouping. */
body.sidebar-collapsed .syn-nav-item .icon {
  color: var(--group-accent, var(--fg-1));
  opacity: 0.75;
}
body.sidebar-collapsed .syn-nav-item:hover .icon,
body.sidebar-collapsed .syn-nav-item.active .icon { opacity: 1; }

/* D11 — collapsed-sidebar tooltip. CSS ::after couldn't escape the sidebar's
   overflow:hidden, so the tooltip is now a JS-positioned <div> appended to
   document.body (see app.js :: setupNavTooltips). This rule styles that
   singleton element when it's active. */
#syn-nav-tip {
  position: fixed;
  background: var(--bg-3, #1a1f28);
  color: var(--fg-1, #e7eaf0);
  border: 1px solid var(--border);
  border-left: 2px solid var(--group-accent, var(--accent));
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  pointer-events: none;
  display: none;
}
#syn-nav-tip.is-visible { display: block; }

.syn-sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-1);
  min-width: 0;
}
/* D11.F — when collapsed, the 56px column can't fit the cog + logout side
   by side once user-meta is hidden; stack them vertically so logout stays
   inside the sidebar boundary. */
body.sidebar-collapsed .syn-sidebar-footer {
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  align-items: center;
}
body.sidebar-collapsed .syn-sidebar-footer .syn-foot-btn {
  width: 32px; height: 32px;
}
.syn-sidebar-footer .syn-user-meta {
  display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.syn-sidebar-footer .syn-user-ident {
  color: var(--fg); font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.syn-sidebar-footer .role-pill {
  margin-top: 2px; align-self: flex-start;
  background: var(--bg-3); padding: 1px 7px; border-radius: 6px;
  font-size: 10px; color: var(--fg-1); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.syn-sidebar-footer .syn-foot-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-2); padding: 5px;
  border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.syn-sidebar-footer .syn-foot-btn:hover {
  color: var(--fg);
  background: var(--bg-2);
  border-color: var(--border-strong);
}
.syn-sidebar-footer .syn-foot-btn.syn-admin-cog:hover {
  color: var(--accent);
  border-color: rgba(122,162,247,0.45);
}
.syn-sidebar-footer .syn-foot-btn.syn-logout:hover {
  color: var(--red); border-color: rgba(247,118,142,0.45);
  background: rgba(247,118,142,0.06);
}
.syn-sidebar-footer .syn-foot-btn .icon { width: 14px; height: 14px; }
.syn-sidebar-footer .syn-foot-btn.active {
  color: var(--accent);
  border-color: rgba(122,162,247,0.55);
  background: var(--accent-bg);
}

/* ============================================
   MAIN COLUMN — topbar + content
   ============================================ */
#syn-main-col {
  display: grid;
  grid-template-rows: var(--topbar-h) 1fr;
  min-width: 0;
}

#syn-topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: rgba(13, 16, 22, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}

/* Search */
.syn-search {
  position: relative;
  flex: 1; max-width: 640px;
}
.syn-search input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px 7px 34px;
  color: var(--fg);
  font: inherit;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}
.syn-search input::placeholder { color: var(--fg-3); }
.syn-search input:focus {
  outline: none; border-color: var(--accent); background: var(--bg-1);
  box-shadow: var(--focus-ring);
}
.syn-search .icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--fg-3); pointer-events: none;
}
.syn-search .kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--fg-3); font-family: var(--mono);
  background: var(--bg-3); border: 1px solid var(--border); padding: 1px 6px;
  border-radius: 4px;
}
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: var(--shadow-2);
  max-height: 60vh; overflow: auto; padding: 6px;
  z-index: 60;
}
.search-results .hit {
  display: grid; grid-template-columns: 76px 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
.search-results .hit.no-href { cursor: default; opacity: 0.85; }
.search-results .hit:hover, .search-results .hit.focus { background: var(--bg-hover); }
.search-results .hit .kind { font-size: 11px; color: var(--fg-3); text-transform: uppercase; }
.search-results .group-head {
  padding: 8px 10px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
  border-top: 1px solid var(--border); margin-top: 4px;
}
.search-results .group-head:first-child { border-top: 0; margin-top: 0; }
.search-results .empty { padding: 14px 12px; color: var(--fg-3); font-size: 13px; text-align: center; }

#syn-topbar-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
}

button.icon-btn {
  background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
button.icon-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); }
button.icon-btn .icon { width: 14px; height: 14px; }

/* ============================================
   STATUS FAB + DRAWERS
   ============================================ */
#syn-status-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  background: var(--bg-1); color: var(--fg-1);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer; font: inherit; font-size: 12px;
  box-shadow: var(--shadow-2);
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 80px;
  transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
#syn-status-fab:hover { transform: translateY(-1px); box-shadow: var(--shadow-2), var(--glow-accent); }
#syn-status-fab.alert { border-color: rgba(247,118,142,0.55); box-shadow: var(--shadow-2), var(--glow-red); }
#syn-status-fab .seg { display: inline-flex; align-items: center; gap: 4px; }
#syn-status-fab .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-3);
}
#syn-status-fab .dot.green   { background: var(--green); box-shadow: 0 0 6px rgba(158,206,106,0.6); }
#syn-status-fab .dot.gold    { background: var(--gold);  box-shadow: 0 0 6px rgba(224,175,104,0.6); }
#syn-status-fab .dot.red     { background: var(--red);   box-shadow: 0 0 6px rgba(247,118,142,0.6); }
#syn-status-fab .dot.pulse   { animation: pulse 1.6s infinite; }

/* Route-policy chip — colour by route kind so the active policy is readable
   at a glance. direct=red (your IP), tor=magenta, anything else=blue. */
#syn-status-fab .seg.route-policy {
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
}
#syn-status-fab .seg.route-policy.policy-direct  { color: var(--red);     border-color: rgba(247,118,142,0.45); background: rgba(247,118,142,0.08); }
#syn-status-fab .seg.route-policy.policy-direct  .dot { background: var(--red); }
#syn-status-fab .seg.route-policy.policy-tor     { color: var(--magenta); border-color: rgba(187,154,247,0.50); background: rgba(187,154,247,0.10); }
#syn-status-fab .seg.route-policy.policy-tor     .dot { background: var(--magenta); }
#syn-status-fab .seg.route-policy.policy-proxy   { color: var(--accent);  border-color: rgba(122,162,247,0.45); background: rgba(122,162,247,0.08); }
#syn-status-fab .seg.route-policy.policy-proxy   .dot { background: var(--accent); }
#syn-status-fab .seg.route-policy.policy-none    { color: var(--fg-3);    border-color: var(--border); background: var(--bg-3); }
#syn-status-fab .seg.route-policy.policy-none    .dot { background: var(--fg-3); }
/* Greyed out when the default route is configured but its status is disabled / broken. */
#syn-status-fab .seg.route-policy.offline {
  opacity: 0.55;
  text-decoration: line-through;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 6px transparent; opacity: 0.7; }
}

#syn-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 65; backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.syn-drawer {
  position: fixed; z-index: 68;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  display: grid; grid-template-rows: auto 1fr;
  transition: transform 220ms ease;
}
.syn-drawer.drawer-bottom {
  left: 0; right: 0; bottom: 0;
  height: 42vh; min-height: 280px;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-drawer-up);
  transform: translateY(100%);
}
.syn-drawer.drawer-bottom.open { transform: translateY(0); }
.syn-drawer.drawer-right {
  top: 0; bottom: 0; right: 0;
  width: 480px; max-width: 92vw;
  border-top: 0; border-right: 0; border-bottom: 0;
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
}
.syn-drawer.drawer-right.open { transform: translateX(0); }

.syn-drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.syn-drawer-head .title { font-weight: 600; font-size: 14px; }
.syn-drawer-head .sub   { color: var(--fg-3); font-size: 12px; }
.syn-drawer-head .tabs  { display: flex; gap: 2px; margin-left: auto; }
.syn-drawer-head .tabs button {
  background: transparent; color: var(--fg-2);
  border: 0; border-bottom: 2px solid transparent;
  padding: 6px 10px; border-radius: 0;
  font-weight: 500; font-size: 12px;
}
.syn-drawer-head .tabs button:hover { color: var(--fg); background: transparent; filter: none; }
.syn-drawer-head .tabs button.active { color: var(--fg); border-bottom-color: var(--accent); }
.syn-drawer-head .close {
  background: transparent; border: 0; color: var(--fg-3);
  padding: 4px; cursor: pointer; border-radius: 6px;
  margin-left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.syn-drawer-head .close:hover { color: var(--red); background: var(--bg-2); }
.syn-drawer-head .close .icon { width: 16px; height: 16px; }
.syn-drawer-body {
  overflow: auto;
  padding: 14px 16px;
}

/* outbound-blocked surface (legacy banner now inside FAB; kept for inline use) */
.outbound-banner {
  background: rgba(247,118,142,0.10);
  border: 1px solid rgba(247,118,142,0.45);
  color: var(--red);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 14px;
}
.outbound-banner.warn {
  background: rgba(224,175,104,0.08);
  border-color: rgba(224,175,104,0.45);
  color: var(--gold);
}
.outbound-banner strong { color: inherit; }

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
  display: flex; align-items: center; gap: 6px;
  color: var(--fg-3); font-size: 11px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.breadcrumbs:empty { display: none; }
.breadcrumbs a { color: var(--fg-2); }
.breadcrumbs a:hover { color: var(--fg); }
.breadcrumbs .sep { color: var(--fg-3); opacity: 0.5; }
.breadcrumbs .cur { color: var(--fg-1); }

/* ============================================
   PAGE LAYOUT

   `main#syn-app` is a flex column that owns the viewport height. The
   body-head zone (breadcrumbs + .page-head) sits at the top with
   `flex-shrink: 0`. Below it lives the page content — either a shell
   (.ent-shell, .globe-shell, .tools-shell, …) that fills with flex:1
   and scrolls *internally*, or a plain content block that overflows
   into main's own scrollbar.
   ============================================ */
main#syn-app {
  max-width: none;
  margin: 0;
  padding: 12px 20px 72px;
  width: 100%;
  height: calc(100vh - var(--topbar-h));
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 10px; flex-wrap: wrap;
  flex-shrink: 0;
}

/* D11 — sticky page-head stack. Views opt in by wrapping their entire
   chrome (breadcrumbs + page-head + any hero/summary + filter cards + tab
   strips) in `.sticky-stack`. The wrapper anchors to `main#syn-app`'s
   scroll context. F11.F fixes the 10px reveal gap above the bar by
   extending the bg upward via ::before (margin-top alone wasn't covering
   the main padding).

   D10.6c (2026-05-26 sweep) — universal rule: there is ONE .sticky-stack
   per page. Any chrome the page wants pinned (filters, sub-tabs, hero,
   summary cards) lives inside it. Child views that render INTO the parent
   page's pane (admin sub-pages, class-editor sub-tabs) use `.sticky-sub`
   to stick AT THE BOTTOM OF the parent sticky-stack via the
   `--sticky-stack-h` CSS variable, which JS measures after each render
   (see syncStickyStackHeight in lib.js). */
.sticky-stack {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-0, #0d1016);
  padding-top: 8px; padding-bottom: 10px;
  margin-left: -20px; padding-left: 20px;
  margin-right: -20px; padding-right: 20px;
  margin-top: -12px;
  /* Bottom hairline so the sticky bar is visually separated from
     content scrolling beneath it. */
  box-shadow: 0 1px 0 var(--border);
}
.sticky-stack::before {
  /* Cover the main#syn-app top padding (12px) so scrolled-up content
     doesn't show through above the sticky bar. */
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
  background: var(--bg-0, #0d1016);
}
/* Pad the first block after a sticky-stack so table headers / cards aren't
   tucked underneath the bar's shadow. D10.6c — bumped to 10px to give
   clearer separation between the sticky chrome and the first scrolling
   content card. */
.sticky-stack + * { margin-top: 10px; }

/* D10.6c — nested sticky for sub-page chrome (e.g. risk-weights section
   tabs, importer batch detail header). Sticks below the page's main
   sticky-stack using the JS-measured --sticky-stack-h variable. */
.sticky-sub {
  position: sticky; top: var(--sticky-stack-h, 80px); z-index: 9;
  background: var(--bg-0, #0d1016);
  margin-left: -20px; padding-left: 20px;
  margin-right: -20px; padding-right: 20px;
  padding-top: 6px; padding-bottom: 6px;
  box-shadow: 0 1px 0 var(--border);
}
.sticky-sub + * { margin-top: 6px; }

/* D10.6c — pages that own a child shell (tools-shell, ent-shell, etc.)
   render the shell below the sticky-stack. Tagging the shell wrapper
   with `.page-pane-fill` makes it fill the remaining viewport so the
   scrollable shell inside it actually scrolls instead of growing. */
.page-pane-fill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-head .title {
  display: flex; align-items: baseline; gap: 10px;
}
.page-head .title h1 {
  font-size: 18px; line-height: 1.2;
}
.page-head .title .sub {
  color: var(--fg-3); font-size: 12px; font-weight: 400;
}
.page-actions { display: flex; gap: 8px; }

.boot {
  color: var(--fg-3); padding: 60px 0; text-align: center;
}
.boot:before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-right: 10px; vertical-align: middle;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   CARDS
   ============================================ */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.card + .card, .row + .card, .card + .row { margin-top: 14px; }
.card.tight { padding: 10px 14px; }
.card-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.card-title h3 { margin: 0; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > .card { flex: 1; min-width: 280px; }

.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Stat tiles */
.stat {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.stat .label { font-size: 11px; text-transform: uppercase; color: var(--fg-3); letter-spacing: 0.06em; font-weight: 600; }
.stat .value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); font-feature-settings: "tnum"; }
.stat .delta { font-size: 12px; color: var(--fg-2); }
.stat .accent  { color: var(--accent); }
.stat .red     { color: var(--red); }
.stat .green   { color: var(--green); }
.stat .gold    { color: var(--gold); }
.stat .orange  { color: var(--orange); }

/* Clickable stat card (dashboard) */
a.stat-link {
  text-decoration: none; color: inherit;
  position: relative;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
}
a.stat-link:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1), var(--glow-accent);
  transform: translateY(-1px);
  color: inherit;
}
a.stat-link:hover .value { color: var(--fg); }
a.stat-link::after {
  content: "›";
  position: absolute; top: 12px; right: 14px;
  color: var(--fg-3); font-size: 18px; line-height: 1;
  transition: color 140ms, transform 140ms;
}
a.stat-link:hover::after { color: var(--accent); transform: translateX(2px); }

.stat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--bg-3); color: var(--fg-2);
  flex: 0 0 22px;
}
.stat-icon .icon { width: 13px; height: 13px; }
.stat-icon.red    { background: rgba(247,118,142,0.12); color: var(--red); }
.stat-icon.orange { background: rgba(255,158,100,0.12); color: var(--orange); }
.stat-icon.gold   { background: rgba(224,175,104,0.12); color: var(--gold); }
.stat-icon.green  { background: rgba(158,206,106,0.12); color: var(--green); }
.stat-icon.accent { background: var(--accent-bg);       color: var(--accent); }

/* ============================================
   FORMS
   ============================================ */
input, select, textarea, button {
  font: inherit; color: var(--fg);
}
input, select, textarea {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-1);
  box-shadow: var(--focus-ring);
}
label.field { display: grid; gap: 4px; }
label.field > .lbl { font-size: 12px; color: var(--fg-2); }

button {
  cursor: pointer; font-weight: 600;
  background: var(--accent); color: #0b0d10;
  border: 0; border-radius: var(--radius-sm);
  padding: 7px 14px;
  transition: filter 120ms, background 120ms, box-shadow 120ms;
  display: inline-flex; align-items: center; gap: 6px;
}
button:hover { filter: brightness(1.08); }
button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button .icon { width: 14px; height: 14px; }
button.secondary {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--border);
  font-weight: 500;
}
button.secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); filter: none; }
button.ghost {
  background: transparent; color: var(--fg-1);
  border: 1px solid transparent; font-weight: 500;
}
button.ghost:hover { background: var(--bg-2); filter: none; }
button.danger { background: var(--red); color: #1a0509; }
button.small { padding: 4px 9px; font-size: 12px; }
button.small .icon { width: 12px; height: 12px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   CHIPS / TOGGLES (filter pills + switches)
   ============================================ */
.chip-group {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 3px; border-radius: 999px;
}
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: transparent; color: var(--fg-2);
  border: 1px solid transparent;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.chip:hover { color: var(--fg); background: var(--bg-hover); }
.chip.active {
  color: var(--fg);
  background: var(--bg-3);
  border-color: var(--border-strong);
  box-shadow: inset 0 0 0 1px var(--accent-bg);
}
.chip.active .count { color: var(--accent); }
.chip.excluded {
  color: var(--red);
  background: rgba(247,118,142,0.08);
  border-color: rgba(247,118,142,0.40);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.chip.excluded:hover { background: rgba(247,118,142,0.14); }
.chip.excluded .count { color: var(--red); background: rgba(247,118,142,0.18); }
.chip .count {
  font-size: 10px; color: var(--fg-3);
  background: var(--bg-3); padding: 0 5px;
  border-radius: 999px; font-feature-settings: "tnum";
}
.chip .icon { width: 12px; height: 12px; }
.chip.danger.active { box-shadow: inset 0 0 0 1px rgba(247,118,142,0.45); }

/* Standalone (un-grouped) chip — used when a chip stands on its own (no parent .chip-group),
   such as a single toggle next to a filter or in a row of mixed controls. */
.chip.standalone {
  background: var(--bg-2);
  border-color: var(--border);
}
.chip.standalone:hover { background: var(--bg-hover); }
.chip.standalone.active {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--fg);
}

/* Switch — flat toggle */
.switch {
  position: relative; display: inline-block;
  width: 32px; height: 18px;
  vertical-align: middle;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0;
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.switch .slider:before {
  content: ""; position: absolute;
  width: 12px; height: 12px;
  left: 2px; top: 50%; transform: translateY(-50%);
  background: var(--fg-2);
  border-radius: 50%;
  transition: transform 140ms, background 140ms;
}
.switch input:checked + .slider {
  background: var(--accent-bg); border-color: var(--accent);
}
.switch input:checked + .slider:before {
  transform: translate(14px, -50%); background: var(--accent);
}
.switch input:focus-visible + .slider { box-shadow: var(--focus-ring); }

/* ============================================
   TABLES
   ============================================ */
table.simple {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.simple th, table.simple td {
  text-align: left; padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
table.simple thead th {
  color: var(--fg-3); font-weight: 500;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em;
  background: transparent;
}
table.simple tbody tr:nth-child(even) { background: rgba(255,255,255,0.012); }
table.simple tbody tr:hover { background: var(--bg-2); }
table.simple .right { text-align: right; }

/* ============================================
   PILLS
   ============================================ */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  background: var(--bg-3); color: var(--fg-1);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
  font-weight: 500;
}
.pill.tg { background: rgba(34,158,217,0.16); color: #6ec4eb; border-color: rgba(34,158,217,0.40); }

.pill.cls-official         { background: rgba(94,194,255,0.14);  color: var(--c-official);         border-color: rgba(94,194,255,0.40); }
.pill.cls-legit_competitor { background: rgba(139,148,163,0.16); color: var(--c-legit-competitor); border-color: rgba(139,148,163,0.40); }
.pill.cls-legit_customer   { background: rgba(158,206,106,0.16); color: var(--c-legit-customer);   border-color: rgba(158,206,106,0.40); }
.pill.cls-imposter_brand   { background: rgba(247,118,142,0.18); color: var(--c-imposter-brand);   border-color: rgba(247,118,142,0.45); }
.pill.cls-imposter_seller  { background: rgba(255,158,100,0.18); color: var(--c-imposter-seller);  border-color: rgba(255,158,100,0.45); }
.pill.cls-suspect          { background: rgba(224,175,104,0.18); color: var(--c-suspect);          border-color: rgba(224,175,104,0.45); }
.pill.cls-news_mention     { background: rgba(187,154,247,0.16); color: var(--c-news);             border-color: rgba(187,154,247,0.40); }
.pill.cls-unrelated        { color: var(--fg-3); }
.pill.cls-unknown          { color: var(--fg-3); }

/* Entity-type pills — distinct hue per type for visual grouping across views */
.pill.t-domain            { background: rgba(122,162,247,0.14); color: var(--accent);     border-color: rgba(122,162,247,0.40); }
.pill.t-subdomain         { background: rgba(125,207,255,0.12); color: var(--teal);       border-color: rgba(125,207,255,0.35); }
.pill.t-url               { background: rgba(158,206,106,0.12); color: var(--green);      border-color: rgba(158,206,106,0.35); }
.pill.t-ip                { background: rgba(255,158,100,0.14); color: var(--orange);     border-color: rgba(255,158,100,0.40); }
.pill.t-asn               { background: rgba(187,154,247,0.14); color: var(--magenta);    border-color: rgba(187,154,247,0.40); }
.pill.t-org               { background: rgba(247,118,142,0.14); color: var(--red);        border-color: rgba(247,118,142,0.40); }
.pill.t-person            { background: rgba(125,207,255,0.14); color: var(--teal);       border-color: rgba(125,207,255,0.40); }
.pill.t-product           { background: rgba(158,206,106,0.14); color: var(--green);      border-color: rgba(158,206,106,0.40); }
.pill.t-trademark         { background: rgba(224,175,104,0.16); color: var(--gold);       border-color: rgba(224,175,104,0.40); }
.pill.t-license           { background: rgba(94,194,255,0.14);  color: var(--c-official); border-color: rgba(94,194,255,0.40); }
.pill.t-legal_doc         { background: rgba(94,194,255,0.10);  color: var(--c-official); border-color: rgba(94,194,255,0.30); }
.pill.t-keyword_term      { background: rgba(187,154,247,0.10); color: var(--magenta);    border-color: rgba(187,154,247,0.30); }
.pill.t-ssl_cert          { background: rgba(125,207,255,0.10); color: var(--teal);       border-color: rgba(125,207,255,0.30); }
.pill.t-hosting_provider  { background: rgba(255,158,100,0.10); color: var(--orange);     border-color: rgba(255,158,100,0.30); }
.pill.t-payment_processor { background: rgba(158,206,106,0.10); color: var(--green);      border-color: rgba(158,206,106,0.30); }
.pill.t-tracker_id        { background: rgba(247,118,142,0.10); color: var(--red);        border-color: rgba(247,118,142,0.30); }
.pill.t-marketplace_listing,
.pill.t-news_article,
.pill.t-social_account,
.pill.t-ad_account,
.pill.t-factory,
.pill.t-phone,
.pill.t-email,
.pill.t-address          { background: var(--bg-3); color: var(--fg-1); border-color: var(--border-strong); }

.pill.status-pending,
.pill.status-queued     { background: rgba(224,175,104,0.18); color: var(--gold);    border-color: rgba(224,175,104,0.45); }
.pill.status-active,
.pill.status-approved,
.pill.status-available,
.pill.status-configured,
.pill.status-done       { background: rgba(158,206,106,0.16); color: var(--green);   border-color: rgba(158,206,106,0.40); }
.pill.status-running    { background: rgba(122,162,247,0.16); color: var(--accent);  border-color: rgba(122,162,247,0.40); }
.pill.status-suspended,
.pill.status-broken,
.pill.status-error      { background: rgba(247,118,142,0.18); color: var(--red);     border-color: rgba(247,118,142,0.45); }
.pill.status-disabled,
.pill.status-cancelled,
.pill.status-archived,
.pill.status-suppressed,
.pill.status-planned    { color: var(--fg-3); }

/* ============================================
   ACTION BUTTON (inline progress strip)
   ============================================ */
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); color: var(--fg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer; font-size: 12px; font-weight: 500;
  transition: background 120ms, border-color 120ms, box-shadow 120ms;
}
.action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
.action-btn .icon { width: 13px; height: 13px; color: var(--fg-2); }
.action-btn:hover .icon { color: var(--accent); }
.action-btn[disabled] { opacity: 0.55; pointer-events: none; }
.action-progress {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px; color: var(--fg-2);
}
.action-progress .spin {
  width: 12px; height: 12px;
  border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 700ms linear infinite;
}
.action-progress.done { border-color: rgba(158,206,106,0.45); color: var(--green); }
.action-progress.err  { border-color: rgba(247,118,142,0.45); color: var(--red); }

/* ============================================
   SELECTION ACTION BAR
   ============================================ */
.selection-bar {
  position: sticky; bottom: 0;
  margin-top: 12px;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-2);
  z-index: 30;
}
.selection-bar .count {
  font-size: 13px; font-weight: 600;
  color: var(--fg);
}
.selection-bar .count em { color: var(--accent); font-style: normal; }
.selection-bar .spacer { flex: 1; }

/* ============================================
   MISC
   ============================================ */
.muted { color: var(--fg-3); }
.mono  { font-family: var(--mono); font-size: 0.93em; }
.right { text-align: right; }
.hr    { height: 1px; background: var(--border); margin: 14px 0; }

pre.code, pre.tail {
  background: #0a0c10;
  color: #c0caf5;
  border: 1px solid var(--border);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 12px;
  line-height: 1.5;
  max-height: 480px;
  overflow: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* Key/value rows */
.kv {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 6px 16px; font-size: 13px;
}
.kv > .k { color: var(--fg-3); }
.kv > .v.mono { word-break: break-all; }

/* Tabs */
.tabs {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tabs button,
.tabs a {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--fg-2);
  border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; border-radius: 0;
  font-weight: 500; font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}
.tabs button:hover, .tabs a:hover { color: var(--fg); background: transparent; filter: none; }
.tabs button.active, .tabs a.active { color: var(--fg); border-bottom-color: var(--accent); }
.tabs .icon { width: 13px; height: 13px; opacity: 0.85; }
.tabs .active .icon { opacity: 1; color: var(--accent); }
.tabs .count {
  margin-left: 2px;
  background: var(--bg-3); color: var(--fg-2);
  padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  font-feature-settings: "tnum";
}
.tabs .active .count { color: var(--accent); background: var(--accent-bg); }

/* ============================================
   LOGIN
   ============================================ */
.login-shell { max-width: 380px; margin: 110px auto 60px; }
.login-shell h1 { text-align: center; margin-bottom: 24px; font-size: 24px; }
.login-shell .card { padding: 22px 24px; box-shadow: var(--shadow-2); }
.login-shell input { width: 100%; margin-bottom: 10px; padding: 10px 12px; }
.login-shell button { width: 100%; padding: 11px; justify-content: center; }
.login-shell .err {
  color: var(--red); margin-top: 8px; font-size: 13px;
  padding: 8px 10px; background: rgba(247,118,142,0.08);
  border: 1px solid rgba(247,118,142,0.25); border-radius: var(--radius-sm);
}
.login-shell .or {
  text-align: center; color: var(--fg-3); font-size: 12px;
  margin: 18px 0 14px; position: relative;
}
.login-shell .or::before, .login-shell .or::after {
  content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border);
}
.login-shell .or::before { left: 0; } .login-shell .or::after { right: 0; }

/* ============================================
   TABULATOR override — modern dark (override the midnight theme defaults
   that bleed grey-on-grey through). Bumped contrast on headers, cells, and
   pagination so labels are readable, plus a visible header-menu hint on
   hover.
   ============================================ */
.tabulator {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--fg);
}
.tabulator .tabulator-header {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border-strong);
}
.tabulator .tabulator-header .tabulator-col {
  background: transparent !important;
  border-right: 1px solid var(--border) !important;
}
.tabulator .tabulator-header .tabulator-col-content {
  color: var(--fg-2); font-weight: 600;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em;
  padding: 6px 10px;
}
.tabulator .tabulator-header .tabulator-col:hover .tabulator-col-content {
  color: var(--fg);
  background: var(--bg-hover);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-content {
  padding-right: 22px;
}
.tabulator .tabulator-header-menu-button {
  color: var(--fg-3); opacity: 0; transition: opacity 120ms, color 120ms;
}
.tabulator .tabulator-header .tabulator-col:hover .tabulator-header-menu-button {
  opacity: 1; color: var(--accent);
}
.tabulator-menu {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  padding: 4px 0;
}
.tabulator-menu .tabulator-menu-item {
  color: var(--fg-1) !important;
  padding: 5px 12px !important;
  font-size: 12px;
}
.tabulator-menu .tabulator-menu-item:hover { background: var(--bg-2) !important; color: var(--fg) !important; }
.tabulator-menu .tabulator-menu-separator { border-top: 1px solid var(--border) !important; }

/* Rows — boosted specificity (.tabulator .tabulator-row …) so the midnight
   theme's deeper selectors lose. Both odd and even sit close to bg-hover so
   the link foreground (--accent) stays readable, with a hair of alternation
   for scannability. Borders match the row tone. */
.tabulator .tabulator-row.tabulator-row {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--fg);
}
.tabulator .tabulator-row.tabulator-row-odd  { background: var(--bg-1) !important; }
.tabulator .tabulator-row.tabulator-row-even { background: var(--bg-2) !important; }
.tabulator .tabulator-row.tabulator-row:hover { background: var(--bg-hover) !important; }
.tabulator .tabulator-row.tabulator-selected,
.tabulator .tabulator-row.tabulator-selected:hover { background: var(--accent-bg) !important; }
.tabulator .tabulator-row .tabulator-cell {
  background: transparent !important;
  color: var(--fg) !important;
  padding: 7px 10px;
  border-right: 0;
  border-top: 0 !important;
}
.tabulator .tabulator-row .tabulator-cell.tabulator-row-handle { color: var(--fg-3) !important; }

.tabulator-footer {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border-strong) !important;
  color: var(--fg-1) !important;
  padding: 6px 10px !important;
}
.tabulator-footer .tabulator-paginator,
.tabulator-footer .tabulator-page-counter { color: var(--fg-1) !important; }
.tabulator-footer .tabulator-page {
  background: var(--bg-1) !important; color: var(--fg-1) !important;
  border: 1px solid var(--border) !important;
  padding: 3px 9px !important; margin: 0 1px !important;
  border-radius: 5px !important;
}
.tabulator-footer .tabulator-page:hover { background: var(--bg-hover) !important; color: var(--fg) !important; }
.tabulator-footer .tabulator-page.active {
  background: var(--accent) !important; color: #0b0d10 !important; border-color: var(--accent) !important;
}
.tabulator-footer .tabulator-page-size {
  background: var(--bg-1) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 5px !important;
  padding: 3px 6px !important;
}

/* Tabulator placeholder ("Queue is empty…") */
.tabulator .tabulator-placeholder {
  background: var(--bg-1) !important;
  color: var(--fg-3) !important;
}
.tabulator .tabulator-placeholder span {
  color: var(--fg-3) !important;
  font-style: normal;
  font-size: 13px;
}

/* Row selection checkbox styling — bring it in line with .switch / chip */
.tabulator-row .tabulator-cell input[type="checkbox"] {
  accent-color: var(--accent);
}

/* ============================================
   ENTITY HIERARCHY TREE (two-pane shell)
   ============================================ */
.ent-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  /* Fill all remaining viewport height inside main#syn-app's flex column,
     so the inner Tabulator (and the left tree pane) own their own scroll
     instead of pushing main into a page-level scroll. */
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 960px) {
  .ent-shell {
    grid-template-columns: 1fr;
    flex: 0 0 auto;
    min-height: 480px;
  }
  .ent-tree-pane { max-height: 320px; }
}

.ent-right {
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.ent-right-stack {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  gap: 10px;
  min-width: 0;
}
.ent-table-host {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  /* Tabulator container — height:100% inside Tabulator config fills this,
     and overflow:hidden ensures any column-width overflow scrolls inside
     Tabulator's own viewport instead of the parent. */
}

/* Compact filter card — anchored at the top of the right column via the
   parent .ent-right-stack grid (row 1 is `auto`). Sticky is left on so it
   keeps its top-anchor even when wrapping pushes the auto row taller. */
.card.ent-filters {
  padding: 8px 10px;
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}
.ent-filter-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.ent-q-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}
.ent-q-wrap input {
  width: 100%;
  padding: 6px 8px 6px 28px;
  font-size: 12.5px;
}
.ent-q-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  color: var(--fg-3); pointer-events: none;
}
.ent-filter-chips {
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ent-filter-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 600;
}
.ent-filter-chips .chip { padding: 3px 9px; font-size: 11px; }
.ent-filter-chips .chip .count { font-size: 9px; padding: 0 4px; }
.ent-filter-clear { padding: 4px 7px; }
.ent-filter-clear .icon { width: 11px; height: 11px; }

.ent-tree-pane {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  overflow: auto;
  padding: 4px 0 10px;
  font-size: 12.5px;
}
.ent-right { min-width: 0; }

.ent-tree-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 2;
}
.ent-tree-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--fg);
}
.ent-tree-title .icon { color: var(--teal); }

.ent-tree-search {
  position: sticky;
  top: 41px;     /* directly under .ent-tree-head (10+8+~22 = ~40px) */
  z-index: 2;
  margin: 0;
  padding: 6px 10px 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.ent-tree-search input {
  width: 100%;
  padding: 5px 8px 5px 26px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
}
.ent-tree-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.ent-tree-search > .icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px;
  color: var(--fg-3); pointer-events: none;
}

.ent-tree-subgroup { padding: 1px 0; }
.ent-tree-subgroup-head {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 22px;
  color: var(--fg-2);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 500;
  user-select: none;
}
.ent-tree-subgroup-head:hover { background: var(--bg-2); color: var(--fg); }
.ent-tree-subgroup-head .icon { width: 11px; height: 11px; color: var(--fg-3); }
.ent-tree-subgroup-head .label { flex: 1; }
.ent-tree-subgroup-head .count {
  font-size: 10px;
  background: var(--bg-3); color: var(--fg-2);
  padding: 0 6px; border-radius: 999px;
  font-feature-settings: "tnum";
}
.ent-tree-subgroup-head .pill {
  flex: 0 0 auto; padding: 1px 4px; font-size: 9px;
}
.ent-tree-subgroup .ent-tree-leaf,
.ent-tree-subgroup .ent-tree-leaf-row .ent-tree-leaf { padding-left: 8px; }
.ent-tree-subgroup .ent-tree-leaf-row .ent-tree-dom-toggle,
.ent-tree-subgroup .ent-tree-leaf-spacer { margin-left: 22px; }

.ent-tree-group { padding: 2px 0; }
.ent-tree-group + .ent-tree-group {
  border-top: 1px dashed var(--border);
  padding-top: 4px;
  margin-top: 4px;
}
.ent-tree-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  color: var(--fg-1);
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}
.ent-tree-group-head:hover { background: var(--bg-2); }
.ent-tree-group-head .icon { width: 13px; height: 13px; color: var(--fg-3); }
.ent-tree-group-head .label { flex: 1; }
.ent-tree-group-head .count {
  font-size: 10px;
  background: var(--bg-3); color: var(--fg-2);
  padding: 1px 7px; border-radius: 999px;
  font-weight: 500; font-feature-settings: "tnum";
}
.ent-tree-filter-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-3);
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 2px;
  display: inline-flex; align-items: center;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.ent-tree-filter-btn:hover {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: rgba(122,162,247,0.45);
}
.ent-tree-filter-btn .icon { width: 11px; height: 11px; }

.ent-tree-kids { display: flex; flex-direction: column; }
.ent-tree-leaf-row {
  display: flex; align-items: center; gap: 0;
}
.ent-tree-leaf-row .ent-tree-dom-toggle {
  background: transparent; border: 0;
  color: var(--fg-3);
  padding: 3px;
  cursor: pointer;
  width: 22px; flex: 0 0 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.ent-tree-leaf-row .ent-tree-dom-toggle:hover { color: var(--fg-1); background: var(--bg-2); }
.ent-tree-leaf-row .ent-tree-dom-toggle .icon { width: 11px; height: 11px; }
.ent-tree-leaf-spacer { width: 22px; flex: 0 0 22px; }

.ent-tree-leaf {
  display: flex; align-items: center; gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 3px 10px 3px 0;
  border-radius: 0;
  color: var(--fg-1);
  text-decoration: none;
  font-size: 12px;
  border-left: 2px solid transparent;
}
.ent-tree-leaf .leaf-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ent-tree-leaf:hover {
  background: var(--bg-2);
  color: var(--fg);
  border-left-color: var(--teal);
}
.ent-tree-leaf .pill {
  flex: 0 0 auto;
  padding: 1px 5px;
  font-size: 9px;
}
.ent-tree-leaf.nested {
  padding-left: 36px;
  font-size: 11.5px;
  color: var(--fg-2);
}
.ent-tree-leaf.nested:hover { color: var(--fg-1); }

.ent-tree-domkids {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  margin-left: 22px;
  padding: 2px 0;
}

/* ============================================
   GLOBE shell — canvas left, filters+pin-table right
   ============================================ */
.globe-shell {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(380px, 2fr);
  /* The single implicit row must be bounded to the container height, not
     sized by content — otherwise the IP-table's intrinsic scroll-height
     blows the panel out to several thousand pixels. */
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 960px) {
  .globe-shell { grid-template-columns: 1fr; grid-template-rows: auto auto; flex: 0 0 auto; min-height: 480px; }
  .globe-canvas-card { height: 520px; }
  .globe-canvas-card .globe-canvas-pane { height: 520px !important; }
}
.globe-canvas-card {
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 0;
  /* The two canvas panes (globe + map) are absolute-positioned so the active
     one fills the card; toggling between them is just a class swap. */
  display: block;
}
.globe-canvas-pane {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: none;
}
.globe-canvas-pane.is-active { display: block; }

/* Leaflet's internal containers must inherit the pane size — Leaflet measures
   on init, so an `is-active` pane that's still display:none reads 0×0 and the
   tile grid breaks. We force the host to fill the card. */
#map-canvas.is-active { display: block; }
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: #0a0e14;            /* matches the dark theme behind partial tiles */
}
.leaflet-control-attribution {
  background: rgba(15, 18, 24, 0.85) !important;
  color: var(--fg-3) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--bg-2) !important;
  color: var(--fg-1) !important;
  border-color: var(--border) !important;
}
.leaflet-tooltip {
  background: #0b0d10 !important;
  border: 1px solid #2d3340 !important;
  color: #e8ecf2 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
.leaflet-tooltip-top:before { border-top-color: #2d3340 !important; }

/* Segmented Globe ↔ Map toggle inside .page-actions. */
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-1);
  font-size: 12px;
}
.seg-toggle-btn {
  background: transparent;
  color: var(--fg-2);
  border: 0;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.seg-toggle-btn + .seg-toggle-btn { border-left: 1px solid var(--border); }
.seg-toggle-btn.active {
  background: var(--bg-2);
  color: var(--fg-1);
  font-weight: 500;
}
.seg-toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
  color: var(--fg-1);
}

.globe-canvas-card #globe-canvas {
  width: 100%; height: 100%;
}
.globe-side {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}
.globe-table-host {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  min-height: 0;
}
.globe-table-host table.simple { margin: 0; }
.globe-table-host table.simple thead th {
  position: sticky; top: 30px;     /* below the .globe-tbl-bar */
  background: var(--bg-2);
  z-index: 1;
}
.globe-tbl-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  position: sticky; top: 0; z-index: 2;
}

/* D11.G — globe row-selected highlight (Tabulator-driven). */
.tabulator .tabulator-row.row-selected { background: var(--bg-hover) !important; }
.tabulator .tabulator-row.row-unresolved { background: rgba(247,118,142,0.04); opacity: 0.85; }

/* D11.G — secondary "Domains on this IP" panel. Renders below the globe
   table when a pin is selected (table row click or globe pin click). */
.globe-domains-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
  overflow: hidden;
  max-height: 240px; display: flex; flex-direction: column;
}
.globe-domains-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.globe-domains-list { overflow: auto; padding: 4px 0; }
.globe-domains-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 4px 12px;
  font-size: 12px;
  text-decoration: none;
  color: var(--fg);
  border-bottom: 1px dashed var(--border);
}
.globe-domains-row:last-child { border-bottom: 0; }
.globe-domains-row:hover { background: var(--bg-hover); }

/* ============================================
   GRAPH shell — canvas left, selection panel right.
   Same flex-fill pattern as .ent-shell / .globe-shell: the shell owns
   the rest of main#syn-app's viewport height, and the canvas + side
   card each fill their grid cell with internal scroll.
   ============================================ */
.card.tight.graph-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.graph-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 960px) {
  .graph-shell { grid-template-columns: 1fr; grid-template-rows: auto auto; flex: 0 0 auto; min-height: 480px; }
  .graph-canvas-card #graph-canvas { height: 520px !important; }
}
.graph-canvas-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  min-height: 0;
  min-width: 0;
}
.graph-canvas-card #graph-canvas {
  width: 100%; height: 100%;
}
.card.graph-side {
  overflow: auto;
  min-height: 0;
}

/* ============================================
   TOOLS surface — category nav + per-tool tabbed config panel
   ============================================ */
.tools-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
@media (max-width: 960px) {
  .tools-shell { grid-template-columns: 1fr; flex: 0 0 auto; min-height: 480px; }
  .tools-nav-pane { max-height: 360px; }
}

.tools-nav-pane {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  overflow: auto;
  padding: 4px 0 10px;
  font-size: 12.5px;
}
.tools-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 1;
}
.tools-nav-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--fg);
}
.tools-nav-title .icon { color: var(--orange); }

.tools-nav-search {
  position: sticky;
  top: 41px;
  z-index: 2;
  margin: 0;
  padding: 6px 10px 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}
.tools-nav-search input {
  width: 100%;
  padding: 5px 8px 5px 26px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-size: 12px;
}
.tools-nav-search input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.tools-nav-search > .icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 11px; height: 11px; color: var(--fg-3); pointer-events: none;
}

.tools-nav-group { padding: 4px 0 6px; }
.tools-nav-group + .tools-nav-group {
  border-top: 1px dashed var(--border);
  margin-top: 4px; padding-top: 8px;
}
.tools-nav-group-label {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 12px;
  color: var(--fg-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.tools-nav-group-label .count {
  background: var(--bg-3); color: var(--fg-2);
  padding: 0 6px; border-radius: 999px; font-size: 9px;
  font-feature-settings: "tnum";
}
.tools-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 5px 12px;
  text-align: left;
  color: var(--fg-1);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border-left: 2px solid transparent;
  font: inherit;
}
.tools-nav-item:hover { background: var(--bg-2); color: var(--fg); }
.tools-nav-item.active {
  background: var(--bg-3);
  color: var(--fg);
  border-left-color: var(--orange);
}
.tools-nav-item .tool-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tools-nav-item .tool-status-mini {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-3);
}
.tools-nav-item.active .tool-status-mini { color: var(--fg-2); }

.tool-health-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  flex: 0 0 8px;
}
.tool-health-dot.green  { background: var(--green);  box-shadow: 0 0 4px rgba(158,206,106,0.5); }
.tool-health-dot.gold   { background: var(--gold);   box-shadow: 0 0 4px rgba(224,175,104,0.5); }
.tool-health-dot.red    { background: var(--red);    box-shadow: 0 0 4px rgba(247,118,142,0.5); }
.tool-health-dot.grey   { background: var(--fg-3); }

.tools-detail-pane {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  overflow: auto;
  display: flex; flex-direction: column;
}

.tool-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg-1);
  z-index: 1;
}
.tool-detail-head h2 { margin: 0; }
.tool-head-l { min-width: 0; }
.tool-head-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 6px;
}
.tool-head-r {
  display: flex; gap: 6px; flex-shrink: 0;
}

.tabs.tool-tabs {
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  position: sticky; top: 84px;
  z-index: 1;
}

.tool-pane { padding: 16px 18px 24px; flex: 1; }

.tool-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
}
.tool-field { display: flex; flex-direction: column; gap: 5px; }
.tool-field > label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 600;
}
.tool-field-full { grid-column: 1 / -1; }
.tool-field textarea {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
}

/* Health chip colours for the chip-group selector. */
.chip.tool-health-chip.h-green.active  { box-shadow: inset 0 0 0 1px rgba(158,206,106,0.55); color: var(--green); }
.chip.tool-health-chip.h-yellow.active { box-shadow: inset 0 0 0 1px rgba(224,175,104,0.55); color: var(--gold); }
.chip.tool-health-chip.h-red.active    { box-shadow: inset 0 0 0 1px rgba(247,118,142,0.55); color: var(--red); }

/* ============================================
   ENTITY EDITOR (right drawer)
   ============================================ */
.entity-editor { display: flex; flex-direction: column; gap: 16px; }

.entity-editor .ee-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.entity-editor .ee-head-row {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.entity-editor .ee-canon {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
.entity-editor .ee-open-dossier {
  font-size: 12px; color: var(--fg-2); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.entity-editor .ee-open-dossier:hover { color: var(--accent); }

.entity-editor .ee-field {
  display: flex; flex-direction: column; gap: 6px;
}
.entity-editor .ee-field > label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-3);
  font-weight: 600;
}
.entity-editor .ee-field textarea {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
}
.entity-editor .ee-field input { font-size: 13px; }

.entity-editor .ee-tags-attached {
  display: flex; gap: 4px; flex-wrap: wrap;
  min-height: 28px;
  padding: 4px 0;
}
.entity-editor .ee-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding-right: 4px;
}
.entity-editor .ee-tag-remove {
  background: transparent; border: 0;
  color: inherit; opacity: 0.6;
  padding: 0 3px; font-size: 14px; line-height: 1;
  cursor: pointer; border-radius: 3px;
}
.entity-editor .ee-tag-remove:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.entity-editor .ee-tags-add select {
  width: 100%; font-size: 12px;
}

.entity-editor .ee-readonly { background: var(--bg-2); border-radius: var(--radius-sm); padding: 10px 12px; }
.entity-editor .ee-readonly label { color: var(--fg-3); }
.entity-editor .ee-readonly .kv { font-size: 12px; }
.entity-editor .ee-readonly .kv > .v .score-bar { width: 60px; }

.entity-editor .ee-actions {
  display: flex; gap: 8px; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: var(--bg-1);
  margin: 0 -16px -14px;
  padding: 12px 16px;
}

/* The row-trigger button uses the inline `tag` icon for quick recognition. */
.ent-edit-btn .icon { width: 12px; height: 12px; }

/* ============================================
   COMPACT widgets
   ============================================ */
.score-bar {
  display: inline-block; width: 80px; height: 6px; border-radius: 3px;
  background: var(--bg-3); position: relative; vertical-align: middle;
}
.score-bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--red));
  border-radius: 3px;
}

.toast {
  position: fixed; right: 20px; bottom: 80px; z-index: 80;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  padding: 10px 14px; border-radius: var(--radius);
  box-shadow: var(--shadow-2); font-size: 13px;
  opacity: 0; transform: translateY(10px); transition: 200ms;
}
.toast.show { opacity: 1; transform: none; }
.toast.err  { border-color: rgba(247,118,142,0.5); }
.toast.ok   { border-color: rgba(158,206,106,0.5); }

/* Generic icon helper (when used outside another context) */
.icon { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }

/* ============================================
   TARGETS — list + cards + dossier
   ============================================ */

/* View toggle in the page-head */
.view-toggle {
  display: inline-flex;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.view-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; color: var(--fg-2);
  font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.view-toggle-btn .icon { width: 13px; height: 13px; }
.view-toggle-btn:hover { background: var(--bg-2); color: var(--fg); }
.view-toggle-btn.active {
  background: var(--accent-bg); color: var(--accent-hi);
}

/* Targets filter card — mirrors entities filter rhythm */
.card.tgt-filters { padding: 8px 10px; margin-bottom: 10px; flex-shrink: 0; }
.tgt-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tgt-q-wrap { position: relative; flex: 1 1 240px; min-width: 200px; }
.tgt-q-wrap input {
  width: 100%; padding: 6px 8px 6px 28px; font-size: 12.5px;
}
.tgt-q-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--fg-3); pointer-events: none;
}
.tgt-filter-clear { padding: 4px 7px; }
.tgt-filter-clear .icon { width: 11px; height: 11px; }

/* Targets pane fills the rest of main#syn-app so the Tabulator (table
   view) or card grid takes ownership of the scroll inside its own box,
   rather than pushing the page into a vertical scroll. */
#tgt-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#tgt-pane > #tgt-table { flex: 1 1 auto; min-height: 0; }
#tgt-pane > .tgt-card-grid { overflow: auto; padding-right: 4px; }

/* Sibling-cluster pill in the table */
.pill.cluster-pill {
  background: rgba(187,154,247,0.14);
  color: var(--magenta);
  border-color: rgba(187,154,247,0.30);
}

/* Rank badge — universal rank pill */
.rank-badge {
  display: inline-block; min-width: 28px; text-align: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-3); color: var(--fg-1);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
}
.rank-badge.gold   { background: rgba(224,175,104,0.18); color: var(--gold); }
.rank-badge.orange { background: rgba(255,158,100,0.18); color: var(--orange); }
.rank-badge.red    { background: rgba(247,118,142,0.18); color: var(--red); }

/* Card grid */
.tgt-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.tgt-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px; text-decoration: none;
  color: var(--fg); transition: 120ms;
}
.tgt-card:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.tgt-card.cls-imposter_brand  { border-left-color: var(--c-imposter-brand);   }
.tgt-card.cls-imposter_seller { border-left-color: var(--c-imposter-seller);  }
.tgt-card.cls-suspect         { border-left-color: var(--c-suspect);          }
.tgt-card.cls-official        { border-left-color: var(--c-official);         }
.tgt-card.cls-legit_competitor{ border-left-color: var(--c-legit-competitor); }
.tgt-card.cls-news_mention    { border-left-color: var(--c-news);             }

/* Locked official — standout blue, always rendered first in the grid.
   `order: -1` keeps it visually at the top-left even if the underlying
   sort order ever changes. */
.tgt-card.is-official {
  order: -1;
  background: linear-gradient(180deg, rgba(94,194,255,0.10) 0%, var(--bg-1) 100%);
  border-color: rgba(94,194,255,0.35);
  border-left-width: 4px;
  box-shadow: 0 0 0 1px rgba(94,194,255,0.15) inset;
}
.tgt-card.is-official .tgt-card-domain .icon {
  width: 13px; height: 13px; color: var(--c-official); margin-right: 4px;
  vertical-align: -2px;
}
.tgt-card.is-official:hover {
  border-color: var(--c-official);
}

/* Locked official row in the table view. Tabulator's `row.freeze()` pins
   it to the top of the body irrespective of sort/filter; this rule supplies
   the standout blue highlight. */
.tabulator .tabulator-row.is-official-row,
.tabulator .tabulator-row.is-official-row.tabulator-row-even {
  background: linear-gradient(90deg, rgba(94,194,255,0.10) 0%, transparent 60%);
  box-shadow: inset 3px 0 0 var(--c-official);
}
.tabulator .tabulator-row.is-official-row:hover {
  background: linear-gradient(90deg, rgba(94,194,255,0.18) 0%, var(--bg-hover) 60%);
}
.tabulator .tabulator-row.is-official-row .mono .icon {
  width: 11px; height: 11px; color: var(--c-official);
  vertical-align: -1px; margin-right: 3px;
}

.tgt-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.tgt-card-domain {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg);
}
.tgt-card-pills {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-size: 11px;
}
.tgt-card-pills .pill { font-size: 10.5px; padding: 1px 7px; }
.tgt-card-siblings {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: var(--magenta);
  background: rgba(187,154,247,0.10);
  padding: 1px 7px; border-radius: 999px;
}
.tgt-card-siblings .icon { width: 10px; height: 10px; }

.tgt-card-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px;
  margin-top: 2px;
}
.tgt-metric {
  display: grid; grid-template-columns: 70px 1fr 30px;
  align-items: center; gap: 6px;
  font-size: 11px; color: var(--fg-2);
}
.tgt-metric .lbl { color: var(--fg-3); font-size: 10px; }
.tgt-metric .val { text-align: right; color: var(--fg-1); font-size: 11px; }
.tgt-metric .bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--bg-3); position: relative; overflow: hidden;
}
.tgt-metric .bar .fill { display: block; height: 100%; border-radius: 2px; }
.tgt-metric .bar .fill.teal    { background: var(--teal); }
.tgt-metric .bar .fill.accent  { background: var(--accent); }
.tgt-metric .bar .fill.orange  { background: var(--orange); }
.tgt-metric .bar .fill.magenta { background: var(--magenta); }
.tgt-metric .bar .fill.red     { background: var(--red); }
.tgt-metric .bar .fill.gold    { background: var(--gold); }
.tgt-metric .bar .fill.green   { background: var(--green); }

.tgt-card-foot {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; padding-top: 4px;
  border-top: 1px dashed var(--border);
}

/* ============================================
   DOSSIER — the standalone report layout
   ============================================ */
.dossier-hero {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
}
.dossier-hero-main { flex: 1; min-width: 0; }
.dossier-hero-title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.dossier-hero-title h1 {
  font-size: 24px; font-weight: 600; color: var(--fg);
}
.dossier-hero-sub {
  font-size: 13px; color: var(--fg-2); margin-bottom: 8px;
}
.dossier-hero-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--fg-2);
}
.dossier-hero-meta span {
  display: inline-flex; align-items: center; gap: 5px;
}
.dossier-hero-meta .icon { width: 12px; height: 12px; color: var(--fg-3); }
.dossier-hero-meta strong { color: var(--fg-1); }

.dossier-hero-scores {
  display: flex; gap: 8px; flex-shrink: 0;
}
.dossier-hero-scores .score-block {
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px; min-width: 78px; text-align: center;
}
.dossier-hero-scores .score-label {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); margin-bottom: 4px;
}
.dossier-hero-scores .score-value {
  font-family: var(--mono); font-size: 22px; font-weight: 600;
  color: var(--accent);
}

/* Sibling ribbon */
.dossier-siblings {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.dossier-siblings.muted {
  border-left-color: var(--border-strong);
  color: var(--fg-3); font-size: 12px; padding: 10px 14px;
}
.dossier-siblings-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
}
.dossier-siblings-lbl .icon { width: 12px; height: 12px; color: var(--magenta); }
.dossier-siblings-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.sibling-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; text-decoration: none;
  color: var(--fg-1);
}
.sibling-chip:hover {
  background: var(--bg-hover); color: var(--fg);
  border-color: var(--accent);
}
.sibling-chip.cls-imposter_brand  { border-color: var(--c-imposter-brand); }
.sibling-chip.cls-imposter_seller { border-color: var(--c-imposter-seller); }
.sibling-chip.cls-suspect         { border-color: var(--c-suspect); }

/* Summary stat strip */
.dossier-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin-bottom: 16px;
}
.summary-stat {
  background: var(--bg-1); border: 1px solid var(--border);
  border-bottom: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 10px; text-align: center;
}
.summary-stat.teal    { border-bottom-color: var(--teal); }
.summary-stat.accent  { border-bottom-color: var(--accent); }
.summary-stat.orange  { border-bottom-color: var(--orange); }
.summary-stat.magenta { border-bottom-color: var(--magenta); }
.summary-stat.red     { border-bottom-color: var(--red); }
.summary-stat.gold    { border-bottom-color: var(--gold); }
.summary-stat.green   { border-bottom-color: var(--green); }
.summary-stat-val {
  font-family: var(--mono); font-size: 19px; font-weight: 600;
  color: var(--fg);
}
.summary-stat-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fg-3);
}

/* Dossier tabs — slightly heavier visual weight than default tabs */
.tabs.dossier-tabs {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}
.tabs.dossier-tabs button { font-size: 12.5px; }

/* D10.1 — two-tier dossier tab strip. Top tier carries a per-tier accent;
   the sub-tab strip below borrows the active top's accent so the analyst
   sees Web magenta, Security red, etc. as a domain breadcrumb. Both strips
   live inside `.sticky-stack.dossier-sticky` so they stay pinned while
   the sub-tab pane scrolls beneath. */
.sticky-stack.dossier-sticky { padding-top: 4px; padding-bottom: 4px; }
.sticky-stack.dossier-sticky #dossier-breadcrumb { margin-bottom: 4px; }
.sticky-stack.dossier-sticky .dossier-hero { margin-bottom: 6px; }
.sticky-stack.dossier-sticky .dossier-summary-wrap { margin-bottom: 6px; transition: max-height 180ms ease, opacity 120ms ease, margin-bottom 120ms ease; max-height: 320px; opacity: 1; overflow: hidden; }
.sticky-stack.dossier-sticky .tabs.dossier-tabs-top { margin-bottom: 0; }
.sticky-stack.dossier-sticky .tabs.dossier-tabs-sub { margin-bottom: 0; }

/* Dossier hero collapse — when collapsed, hide the summary strip + the
   meta row (first seen / last seen / cluster confidence) so the sticky
   bar shrinks to about 60% of its expanded height. The title + scores
   + dossier-sub stay visible so the identity remains. */
.dossier-hero-scores { position: relative; }
.dossier-hero-collapse {
  position: absolute; top: -6px; right: -6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--fg-3);
  transition: transform 160ms ease, color 120ms ease;
}
.dossier-hero-collapse:hover { color: var(--fg); }
.dossier-hero-collapse .icon { width: 11px; height: 11px; }
.dossier-sticky.hero-collapsed .dossier-hero-collapse { transform: rotate(180deg); }
.dossier-sticky.hero-collapsed .dossier-hero-meta { display: none; }
.dossier-sticky.hero-collapsed .dossier-summary-wrap { max-height: 0; opacity: 0; margin-bottom: 0; }
.tabs.dossier-tabs-top {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 4px 4px 0;
  margin-bottom: 0;
}
.tabs.dossier-tabs-top button {
  font-size: 12.5px;
  border-bottom-width: 2px;
}
/* Per-tier accent — applied to active state + icon */
.tabs.dossier-tabs-top button.accent-magenta.active { border-bottom-color: var(--magenta); }
.tabs.dossier-tabs-top button.accent-magenta.active .icon { color: var(--magenta); }
.tabs.dossier-tabs-top button.accent-red.active     { border-bottom-color: var(--red); }
.tabs.dossier-tabs-top button.accent-red.active .icon { color: var(--red); }
.tabs.dossier-tabs-top button.accent-green.active   { border-bottom-color: var(--green); }
.tabs.dossier-tabs-top button.accent-green.active .icon { color: var(--green); }
.tabs.dossier-tabs-top button.accent-gold.active    { border-bottom-color: var(--gold); }
.tabs.dossier-tabs-top button.accent-gold.active .icon { color: var(--gold); }
.tabs.dossier-tabs-top button.accent-teal.active    { border-bottom-color: var(--teal); }
.tabs.dossier-tabs-top button.accent-teal.active .icon { color: var(--teal); }
.tabs.dossier-tabs-top button.accent-orange.active  { border-bottom-color: var(--orange); }
.tabs.dossier-tabs-top button.accent-orange.active .icon { color: var(--orange); }
.tabs.dossier-tabs-top button.accent-accent.active  { border-bottom-color: var(--accent); }
.tabs.dossier-tabs-top button.accent-accent.active .icon { color: var(--accent); }

.tabs.dossier-tabs-sub {
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  /* D10.6c — opaque bg so content can't bleed through when sticky scrolls. */
  background: var(--bg-1);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 2px 8px;
  margin-bottom: 16px;
  font-size: 11.5px;
  min-height: 32px;
}
.tabs.dossier-tabs-sub button {
  font-size: 11.5px;
  padding: 6px 12px;
  color: var(--fg-3);
}
.tabs.dossier-tabs-sub button.active { color: var(--fg); border-bottom-color: var(--accent); }
/* Sub-strip borrows the active top tier's accent via data-accent on the strip itself. */
.tabs.dossier-tabs-sub[data-accent="magenta"] button.active { border-bottom-color: var(--magenta); color: var(--magenta); }
.tabs.dossier-tabs-sub[data-accent="red"]     button.active { border-bottom-color: var(--red);     color: var(--red); }
.tabs.dossier-tabs-sub[data-accent="green"]   button.active { border-bottom-color: var(--green);   color: var(--green); }
.tabs.dossier-tabs-sub[data-accent="gold"]    button.active { border-bottom-color: var(--gold);    color: var(--gold); }
.tabs.dossier-tabs-sub[data-accent="teal"]    button.active { border-bottom-color: var(--teal);    color: var(--teal); }
.tabs.dossier-tabs-sub[data-accent="orange"]  button.active { border-bottom-color: var(--orange);  color: var(--orange); }
.tabs.dossier-tabs-sub[data-accent="accent"]  button.active { border-bottom-color: var(--accent);  color: var(--accent); }

/* OSINT callout card */
.card.osint-callout {
  border-left: 3px solid var(--magenta);
  background: linear-gradient(180deg, rgba(187,154,247,0.06) 0%, var(--bg-1) 100%);
}

/* Dossier timeline list */
ul.dossier-timeline {
  list-style: none; padding: 0; margin: 0;
}
ul.dossier-timeline .timeline-row {
  display: grid;
  grid-template-columns: 150px 110px 1fr 120px;
  gap: 10px; align-items: center;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
ul.dossier-timeline .timeline-row:last-child { border-bottom: 0; }
ul.dossier-timeline .timeline-when { font-size: 11px; }
ul.dossier-timeline .timeline-event { font-size: 11px; text-transform: lowercase; }

/* ============================================
   DOSSIER hero — official variant tint
   ============================================ */
.dossier-hero.is-official {
  border-left: 3px solid var(--c-official);
}
.official-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(94,194,255,0.14);
  color: var(--c-official);
  border: 1px solid rgba(94,194,255,0.30);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.official-badge .icon { width: 11px; height: 11px; }

/* ============================================
   DOSSIER grid — multi-column card layout
   ============================================ */
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.dossier-card { padding: 12px 14px; }
.dossier-card .card-title { margin-bottom: 10px; }
.dossier-card.span-2 { grid-column: span 2; }
@media (max-width: 720px) {
  .dossier-card.span-2 { grid-column: span 1; }
}
.kv.kv-tight { grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 12px; }

/* ============================================
   Equivalence cards — the visual cluster spine
   ============================================ */
.equiv-section {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius);
  padding: 10px 14px 14px;
  margin-bottom: 14px;
}
.equiv-section-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
  margin-bottom: 10px;
}
.equiv-section-head .icon { color: var(--magenta); width: 13px; height: 13px; }
.equiv-section-head strong { color: var(--fg); font-family: var(--mono); }

/* D12.20 — attached-attr renderer used by Tech / DNS-IP / OSINT /
   Security panels to surface web-check + nuclei JSON blocks. */
.attr-block .attr-block-body { font-size: 12px; }
.attr-list {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--border);
  padding-left: 8px;
}
.attr-list > li {
  padding: 2px 0;
}
.attr-dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
}
.attr-dl dt {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-2);
  align-self: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attr-dl dd { margin: 0; min-width: 0; word-break: break-word; }

/* D12.21 — Sources list (dedicated grid columns, not piggy-backing
   the files-row template that misaligned label + pills). */
.sources-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 90px 140px 100px 28px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  font-size: 12px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed var(--border);
}
.sources-row:hover { background: var(--bg-2); }
.sources-row:last-child { border-bottom: 0; }
.sources-row-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  background: var(--bg-2);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid var(--border);
}
.sources-row-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sources-row-arrow { display: flex; justify-content: flex-end; color: var(--fg-2); }
.sources-row-arrow .icon { width: 14px; height: 14px; }

/* D12.21 — Files gallery + filetype rows. */
.files-section { margin-bottom: 14px; }
.files-section-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
  margin-bottom: 8px;
}
.files-section-head .icon { width: 14px; height: 14px; color: var(--magenta); }
.files-section-head .muted { margin-left: auto; font-family: var(--mono); }

.files-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.files-tile-img {
  display: flex; flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.12s;
}
.files-tile-img:hover { border-color: var(--magenta); }
.files-tile-thumb {
  display: block;
  aspect-ratio: 16/10;
  background-color: #0b0d10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.files-tile-meta { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.files-tile-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-tile-sub  { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.files-list { display: flex; flex-direction: column; gap: 4px; }
.files-row-flat {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.files-row-flat:hover { border-color: var(--magenta); }
.files-row-flat.is-disabled { opacity: 0.55; cursor: default; }
.files-row-icon {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--fg-2);
}
.files-row-icon .icon { width: 18px; height: 18px; }
.files-row-ext {
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  color: var(--magenta); letter-spacing: 0.04em;
}
.files-row-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-row-meta { font-size: 11px; white-space: nowrap; }

/* D12.19d / D12.21 — stacked-panels dossier layout. Top tier renders
   all its subtabs as side-by-side / stacked / grid panels depending on
   the per-tier `layout` setting. */
.dossier-stack.is-stack { display: flex; flex-direction: column; gap: 14px; }
.dossier-stack.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  align-items: start;
}
.dossier-stack-panel {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dossier-stack.is-stack .dossier-stack-panel { margin-bottom: 0; }
.dossier-stack-head {
  margin: 0;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.dossier-stack-head .icon { color: var(--magenta); width: 14px; height: 14px; }
.dossier-stack-body { padding: 12px 14px; }
.dossier-stack-body:empty { display: none; }
.dossier-stack-body .card { background: transparent; border: 0; padding: 0; }

/* D12.17 — graph seed autocomplete dropdown. */
.graph-suggest {
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  z-index: 50;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  margin-top: 4px;
}
.graph-suggest .graph-suggest-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font-size: 13px;
}
.graph-suggest .graph-suggest-row:last-child { border-bottom: 0; }
.graph-suggest .graph-suggest-row:hover { background: var(--bg-2); }
.graph-suggest .graph-suggest-row .mono { display: block; }

/* D12.13 — collapsed-by-default equivalence panel at bottom of Overview. */
details.equiv-collapsible {
  margin-top: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-left: 3px solid var(--magenta);
  border-radius: var(--radius);
}
details.equiv-collapsible > summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
  user-select: none;
  list-style: none;
}
details.equiv-collapsible > summary::-webkit-details-marker { display: none; }
details.equiv-collapsible > summary::before {
  content: '▸'; color: var(--magenta); margin-right: 4px;
  transition: transform 0.15s ease;
  display: inline-block;
}
details.equiv-collapsible[open] > summary::before { transform: rotate(90deg); }
details.equiv-collapsible > summary .icon { color: var(--magenta); width: 13px; height: 13px; }
details.equiv-collapsible > summary strong { color: var(--fg); font-family: var(--mono); }
details.equiv-collapsible > .equiv-section { margin: 0; border: 0; border-left: 0; padding: 0 14px 14px; border-radius: 0; }

.equiv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
}
.equiv-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.equiv-card.kind-ip       { border-left-color: var(--accent); }
.equiv-card.kind-asn      { border-left-color: var(--teal); }
.equiv-card.kind-ssl_cert { border-left-color: var(--gold); }

.equiv-card-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.equiv-card-kind {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-2); font-weight: 600;
}
.equiv-card-kind .icon { width: 11px; height: 11px; }
.equiv-card-val { font-size: 13px; font-weight: 500; color: var(--fg); }
.equiv-card-display {
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.equiv-card-window {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-family: var(--mono);
  color: var(--gold); margin: 4px 0 6px;
}
.equiv-card-window .icon { width: 11px; height: 11px; }

.equiv-card-domains {
  display: flex; gap: 5px; flex-wrap: wrap;
  margin-top: 6px;
}
.equiv-domain-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  text-decoration: none;
  color: var(--fg-1);
}
.equiv-domain-chip:hover {
  background: var(--bg-hover);
  color: var(--fg);
  border-color: var(--accent);
}
.equiv-domain-chip.is-self {
  background: var(--accent-bg);
  color: var(--accent-hi);
  border-color: var(--accent);
  font-weight: 600;
}
.equiv-domain-chip.cls-imposter_brand  { border-color: rgba(247,118,142,0.40); }
.equiv-domain-chip.cls-imposter_seller { border-color: rgba(255,158,100,0.40); }
.equiv-domain-chip.cls-suspect         { border-color: rgba(224,175,104,0.40); }
.equiv-domain-chip.cls-official        { border-color: rgba(94,194,255,0.40); color: var(--c-official); }

/* ============================================
   Tech-stack chip cloud
   ============================================ */
.tech-cat-row {
  display: grid; grid-template-columns: 90px 1fr; gap: 8px;
  align-items: start;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.tech-cat-row:first-of-type { border-top: 0; padding-top: 0; }
.tech-cat-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); padding-top: 4px;
}
.tech-chip-cloud { display: flex; gap: 5px; flex-wrap: wrap; }
.tech-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11.5px;
}
.tech-chip strong { color: var(--fg); font-weight: 600; }
.tech-chip .tech-count {
  background: var(--bg-3); padding: 0 4px; border-radius: 999px;
  font-size: 10px; color: var(--fg-2);
}
.tech-chip.tone-magenta { border-color: rgba(187,154,247,0.40); }
.tech-chip.tone-magenta strong { color: var(--magenta); }
.tech-chip.tone-accent  { border-color: rgba(122,162,247,0.40); }
.tech-chip.tone-accent  strong { color: var(--accent); }
.tech-chip.tone-teal    { border-color: rgba(125,207,255,0.40); }
.tech-chip.tone-teal    strong { color: var(--teal); }
.tech-chip.tone-gold    { border-color: rgba(224,175,104,0.40); }
.tech-chip.tone-gold    strong { color: var(--gold); }
.tech-chip.tone-green   { border-color: rgba(158,206,106,0.40); }
.tech-chip.tone-green   strong { color: var(--green); }
.tech-chip.tone-red     { border-color: rgba(247,118,142,0.40); }
.tech-chip.tone-red     strong { color: var(--red); }

/* ============================================
   Vuln severity bar
   ============================================ */
.sev-bar {
  display: flex; height: 14px;
  border-radius: 4px; overflow: hidden;
  background: var(--bg-3);
  margin-bottom: 8px;
}
.sev-seg {
  display: inline-flex; align-items: center; justify-content: center;
  color: white; font-size: 10px; font-weight: 600;
  min-width: 0;
}
.sev-seg.tone-red    { background: var(--red); }
.sev-seg.tone-orange { background: var(--orange); }
.sev-seg.tone-gold   { background: var(--gold); color: #1a1f2a; }
.sev-seg.tone-green  { background: var(--green); color: #1a1f2a; }
.sev-legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; }
.sev-legend-item { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.sev-legend-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); }
.sev-legend-item.tone-red    .dot { background: var(--red); }
.sev-legend-item.tone-orange .dot { background: var(--orange); }
.sev-legend-item.tone-gold   .dot { background: var(--gold); }
.sev-legend-item.tone-green  .dot { background: var(--green); }
.sev-legend-item strong { color: var(--fg); font-family: var(--mono); }

/* ============================================
   Contacts / OSINT summary card
   ============================================ */
.contact-row {
  display: grid;
  grid-template-columns: 80px 30px 1fr;
  gap: 6px 10px; align-items: center;
  padding: 5px 0;
  border-top: 1px dashed var(--border);
}
.contact-row:first-of-type { border-top: 0; }
.contact-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3);
}
.contact-count { color: var(--fg); text-align: right; }
.contact-samples { display: flex; gap: 4px; flex-wrap: wrap; }
.contact-chip {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px;
  font-size: 11px; color: var(--fg-1); text-decoration: none;
}
.contact-chip:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--accent); }

/* ============================================
   Sources list (compact)
   ============================================ */
.dossier-source-list {
  list-style: none; padding: 0; margin: 0;
}
.dossier-source-list li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
  font-size: 12px;
  border-top: 1px dashed var(--border);
}
.dossier-source-list li:first-of-type { border-top: 0; }
.dossier-source-list .pill { font-size: 10px; padding: 1px 6px; }

/* Tag cloud */
.tag-cloud { display: flex; gap: 4px; flex-wrap: wrap; }
.tag-cloud .pill { font-size: 11px; padding: 2px 8px; }

/* Time window card */
.time-window { display: grid; gap: 4px; }
.time-window-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }

/* Cluster siblings card */
.dossier-siblings-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ============================================
   Network — merged signal rows
   ============================================ */
.net-list { display: grid; gap: 8px; }
.net-row {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.net-row.tone-accent { border-left-color: var(--accent); }
.net-row.tone-teal   { border-left-color: var(--teal); }
.net-row.tone-gold   { border-left-color: var(--gold); }
.net-row-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.net-row-kind .icon { width: 13px; height: 13px; color: var(--fg-2); }
.net-row-val { font-size: 12.5px; font-weight: 500; }
.net-row-display { font-size: 11px; }
.net-row-window {
  font-size: 11px; color: var(--gold);
  margin-left: auto;
}
.net-row-domains { display: flex; gap: 4px; flex-wrap: wrap; }

/* ============================================
   Subdomains nested under apex
   ============================================ */
.sub-apex-list { display: grid; gap: 10px; }
.sub-apex-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.sub-apex-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 12.5px;
}
.sub-apex-head .icon { width: 12px; height: 12px; color: var(--teal); }
.sub-apex-head a { font-weight: 600; color: var(--fg); }
.sub-apex-children { display: flex; gap: 4px; flex-wrap: wrap; }
.sub-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 9px;
  font-size: 11px; text-decoration: none; color: var(--fg-1);
}
.sub-chip:hover { background: var(--bg-hover); color: var(--fg); border-color: var(--accent); }
.sub-chip.cls-imposter_brand  { border-color: rgba(247,118,142,0.35); }
.sub-chip.cls-imposter_seller { border-color: rgba(255,158,100,0.35); }
.sub-chip.cls-suspect         { border-color: rgba(224,175,104,0.35); }
.sub-chip.cls-official        { border-color: rgba(94,194,255,0.35); }

/* ============================================
   OSINT — rich row layout
   ============================================ */
.osint-list { display: grid; gap: 4px; }
.osint-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--fg);
  font-size: 12px;
}
.osint-row:hover { background: var(--bg-hover); border-color: var(--accent); }
.osint-row-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osint-row-name { display: block; font-size: 11px; color: var(--fg-2); }
.osint-row-meta { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================
   Paths grouped by status class
   ============================================ */
.path-group {
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.path-group:first-of-type { border-top: 0; padding-top: 0; }
.path-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-3); font-weight: 600;
  margin-bottom: 5px;
}
.path-group.tone-green  .path-group-lbl { color: var(--green); }
.path-group.tone-gold   .path-group-lbl { color: var(--gold); }
.path-group.tone-orange .path-group-lbl { color: var(--orange); }
.path-group.tone-red    .path-group-lbl { color: var(--red); }
.path-group-list { display: flex; flex-wrap: wrap; gap: 4px; }
.path-pill {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; font-size: 11px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================
   Timeline — intrinsic-dates visualisation
   ============================================ */
.timeline-bar {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 26px 12px 22px;
  margin: 8px 0 14px;
  min-height: 84px;
}
.timeline-axis {
  position: absolute; left: 12px; right: 12px;
  top: 50%; height: 2px;
  background: var(--border-strong);
}
.timeline-tick {
  position: absolute; top: -10px; bottom: -10px;
  width: 1px; background: var(--border);
}
.timeline-tick-lbl {
  position: absolute; top: -16px; left: 0;
  transform: translateX(-50%);
  font-size: 9.5px; color: var(--fg-3); font-family: var(--mono);
  white-space: nowrap;
}
.timeline-events {
  position: absolute; left: 12px; right: 12px;
  top: 50%; height: 0;
}
.timeline-event {
  position: absolute; top: -6px;
  width: 9px; height: 13px;
  border-radius: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: 80ms;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.4);
}
.timeline-event:hover {
  transform: translateX(-50%) scaleY(1.4);
  box-shadow: 0 0 8px currentColor;
  z-index: 2;
}
.timeline-event.tone-green   { background: var(--green); }
.timeline-event.tone-gold    { background: var(--gold); }
.timeline-event.tone-orange  { background: var(--orange); }
.timeline-event.tone-red     { background: var(--red); }
.timeline-event.tone-magenta { background: var(--magenta); }
.timeline-event.tone-accent  { background: var(--accent); }

.timeline-kindgroups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}
.timeline-kindgroup {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}
.timeline-kindgroup-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
  font-size: 11px; font-weight: 600;
}
.timeline-kindgroup-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.timeline-kindgroup-dot.tone-green   { background: var(--green); }
.timeline-kindgroup-dot.tone-gold    { background: var(--gold); }
.timeline-kindgroup-dot.tone-orange  { background: var(--orange); }
.timeline-kindgroup-dot.tone-red     { background: var(--red); }
.timeline-kindgroup-dot.tone-magenta { background: var(--magenta); }
.timeline-kindgroup-name {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fg-1);
}
.timeline-kindgroup-items { display: grid; gap: 2px; }
.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 6px;
  padding: 2px 4px;
  font-size: 11px;
  text-decoration: none;
  border-radius: 3px;
}
.timeline-item:hover { background: var(--bg-hover); }
.timeline-item-when { color: var(--fg-2); }
.timeline-item-ent  { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================
   FAB safe-area — keep the fixed status-fab from overlapping
   Tabulator pagination + other right-edge controls.
   The FAB grows when more segments (routes, tor, err counter)
   are visible, so leave a generous gutter at the right edge.
   Vertical clearance is provided by main#syn-app's padding-bottom.
   ============================================ */
.tabulator .tabulator-footer { padding-right: 280px; padding-bottom: 14px; }
.ent-selection-bar,
#ent-selection-bar .selection-bar { margin-right: 280px; }
@media (max-width: 1100px) {
  .tabulator .tabulator-footer { padding-right: 220px; }
  .ent-selection-bar,
  #ent-selection-bar .selection-bar { margin-right: 220px; }
}

/* ============================================
   ROLE pills (target/infrastructure/reference/synth)
   Coloured to be quiet compared to classification.
   ============================================ */
.pill.role-target         { background: rgba(122,162,247,0.10); color: var(--accent);  border-color: rgba(122,162,247,0.30); }
.pill.role-infrastructure { background: rgba(139,148,163,0.16); color: var(--fg-2);    border-color: rgba(139,148,163,0.35); }
.pill.role-reference      { background: rgba(187,154,247,0.10); color: var(--magenta); border-color: rgba(187,154,247,0.30); }
.pill.role-synth          { background: rgba(247,118,142,0.10); color: var(--red);     border-color: rgba(247,118,142,0.28); font-style: italic; }
.pill.role-locked::after  { content: "🔒"; margin-left: 4px; font-size: 9px; opacity: 0.7; }
.pill.role-pill           { cursor: pointer; user-select: none; }
.pill.role-pill:hover     { filter: brightness(1.2); }

/* Inline editable pill cell (entities / globe data tables). Wrapped around
   any .pill to add a hover affordance + a small ▾ that hints "clickable
   dropdown" so analysts know they can change role/class without opening
   the full editor drawer. */
.inline-pill-edit {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; border-radius: 999px;
  position: relative;
}
.inline-pill-edit::after {
  content: "▾";
  font-size: 9px;
  color: var(--fg-3);
  margin-left: 1px;
  opacity: 0.55;
  transition: opacity 120ms;
}
.inline-pill-edit:hover::after { opacity: 1; color: var(--accent); }
.inline-pill-edit:hover .pill  { filter: brightness(1.15); }

/* Classification popover — narrower than role popover since options are
   simple pills with no description. */
.role-popover.cls-popover { min-width: 180px; padding: 6px; }
.role-popover.cls-popover .opt { padding: 4px 6px; }

/* Role popover (anchored to the pill) */
.role-popover {
  position: absolute; z-index: 60;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 8px; min-width: 220px;
  box-shadow: var(--shadow-2);
}
.role-popover .opt {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 6px 8px; border-radius: 6px;
  background: transparent; border: 0; color: var(--fg);
  cursor: pointer; text-align: left;
}
.role-popover .opt:hover  { background: var(--bg-hover); }
.role-popover .opt.active { background: var(--accent-bg); }
.role-popover .opt-desc   { color: var(--fg-3); font-size: 11px; }
.role-popover .lock-row   { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-size: 12px; color: var(--fg-2); border-top: 1px solid var(--border); margin-top: 4px; }

/* Generic type/subtype picker — searchable grouped colour-pill list.
   Reused on entities table (Type + Subtype cells) and in the editor
   drawer. Wider than the class/role popovers because the catalogue is
   large and grouped. */
.role-popover.type-picker {
  min-width: 360px; max-width: 460px; padding: 0;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.type-picker-search {
  padding: 8px 10px; border-bottom: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.type-picker-input {
  width: 100%; padding: 5px 8px; font-size: 12px;
  background: var(--bg, #0e1116);
  border: 1px solid var(--border-strong, #333);
  border-radius: 4px; color: inherit; font-family: inherit;
}
.type-picker-input:focus { border-color: var(--accent, #7fc8ff); outline: none; }
.type-picker-body {
  overflow-y: auto; padding: 8px; flex: 1 1 auto; min-height: 0;
}
.type-picker-group {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted, #888);
  margin: 4px 4px 6px;
}
.type-picker-group:not(:first-child) { margin-top: 10px; }
.type-picker-chips {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
}
.type-picker-chip {
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 12px; font-size: 11px;
  cursor: pointer; transition: filter 0.1s;
  text-align: left;
}
.type-picker-chip:hover { filter: brightness(1.25); }
.type-picker-chip.is-selected {
  box-shadow: 0 0 0 2px var(--accent, #7fc8ff);
}
.type-picker-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.type-picker-empty {
  padding: 12px; color: var(--muted, #888);
  text-align: center; font-style: italic; font-size: 12px;
}
.type-picker-clear {
  font-family: inherit;
  padding: 6px 10px; margin: 0; width: 100%;
  background: transparent; border: 0; border-top: 1px solid var(--border-strong);
  color: var(--muted, #aaa); cursor: pointer; font-size: 11px;
  flex-shrink: 0;
}
.type-picker-clear:hover { color: #e08a8a; background: rgba(220,90,90,0.06); }

/* Drawer pill triggers — buttons that open the type-picker popover.
   Styled to read as a pill but be obviously interactive (caret + hover). */
.ee-type-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 12px;
  background: transparent;
  border: 1px solid var(--border-strong, #444);
  color: inherit; cursor: pointer; font-family: inherit;
  font-size: 12px; text-align: left;
  transition: background 0.1s, border-color 0.1s;
}
.ee-type-trigger:hover {
  background: var(--bg-hover);
  border-color: var(--accent, #7fc8ff);
}
.ee-type-caret { color: var(--muted, #888); font-size: 10px; margin-left: auto; }

/* Archive / cluster preview modal — reuse generic .syn-modal */
.syn-modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 90;
  display: flex; align-items: flex-start; justify-content: center; padding: 50px 20px;
}
.syn-modal {
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 12px; max-width: 920px; width: 100%;
  max-height: calc(100vh - 100px); overflow: auto; padding: 18px;
}
.syn-modal h2 { margin: 0 0 4px; }
.syn-modal .modal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.syn-modal table.simple td .ext-warn { color: var(--orange); font-size: 11px; }

/* ============================================
   Phase-8 — readiness pills, pipeline menu, queue controller.
   ============================================ */

/* Readiness dot — drawn next to tool names + pipeline-menu items. Green is
   ready, gold is needs-credentials, blue is needs-meta (GitHub sync hasn't
   landed yet), red is broken, grey is planned, slate is disabled. */
.tool-readiness-dot,
.rd-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  flex: 0 0 8px;
}
.tool-readiness-dot.green, .rd-dot.rd-ready             { background: var(--green);   box-shadow: 0 0 4px rgba(158,206,106,0.55); }
.tool-readiness-dot.gold,  .rd-dot.rd-needs_credentials { background: var(--gold);    box-shadow: 0 0 4px rgba(224,175,104,0.55); }
.tool-readiness-dot.blue,  .rd-dot.rd-needs_meta        { background: #5ec2ff;        box-shadow: 0 0 4px rgba(94,194,255,0.55); }
.tool-readiness-dot.red,   .rd-dot.rd-broken            { background: var(--red);     box-shadow: 0 0 4px rgba(247,118,142,0.55); }
.tool-readiness-dot.grey,  .rd-dot.rd-planned           { background: var(--fg-3); }
.tool-readiness-dot.slate, .rd-dot.rd-disabled          { background: rgba(127,140,156,0.5); }

/* Readiness pills — filter bar above the Tools nav and the summary header
   inside the pipeline dropdown. */
.tools-readiness-bar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.tools-readiness-bar .chip { font-size: 11px; padding: 3px 7px; }
.readiness-chip.rd-ready.active             { background: rgba(158,206,106,0.18); border-color: rgba(158,206,106,0.45); color: var(--green); }
.readiness-chip.rd-needs_credentials.active { background: rgba(224,175,104,0.18); border-color: rgba(224,175,104,0.45); color: var(--gold); }
.readiness-chip.rd-needs_meta.active        { background: rgba(94,194,255,0.18);  border-color: rgba(94,194,255,0.45);  color: #5ec2ff; }
.readiness-chip.rd-broken.active            { background: rgba(247,118,142,0.18); border-color: rgba(247,118,142,0.45); color: var(--red); }
.readiness-chip.rd-planned.active           { background: rgba(127,140,156,0.18); border-color: rgba(127,140,156,0.40); color: var(--fg-2); }
.readiness-chip.rd-disabled.active          { background: rgba(127,140,156,0.12); border-color: rgba(127,140,156,0.30); color: var(--fg-3); }
.readiness-chip.rd-all.active               { background: rgba(122,162,247,0.18); border-color: rgba(122,162,247,0.45); color: var(--accent); }

/* Pill variants used in the pipeline dropdown summary + queue controller. */
.pill.rd-ready             { background: rgba(158,206,106,0.14); color: var(--green);   border-color: rgba(158,206,106,0.40); }
.pill.rd-needs_credentials { background: rgba(224,175,104,0.16); color: var(--gold);    border-color: rgba(224,175,104,0.45); }
.pill.rd-needs_meta        { background: rgba(94,194,255,0.16);  color: #5ec2ff;        border-color: rgba(94,194,255,0.40); }
.pill.rd-broken            { background: rgba(247,118,142,0.18); color: var(--red);     border-color: rgba(247,118,142,0.45); }
.pill.rd-planned           { background: rgba(127,140,156,0.14); color: var(--fg-2);    border-color: rgba(127,140,156,0.35); }
.pill.rd-disabled          { background: rgba(127,140,156,0.08); color: var(--fg-3);    border-color: rgba(127,140,156,0.25); }

/* Pipeline dropdown items use the .pipeline-menu / .pipeline-item classes —
   group label rows + per-tool buttons. */
.pipeline-menu .pipeline-item {
  border-radius: 4px;
  padding: 6px 8px;
}
.pipeline-menu .pipeline-item:hover { background: var(--bg-2); }
.pipeline-menu .pipeline-item[disabled] { cursor: not-allowed; }

/* Tools nav — pipeline-input-count badge ("↦5" = accepts 5 input types). */
.tools-nav-item .tool-inputs {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-2);
}

/* Reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================
 * Universal importer v2 — clickable dropzones + tree-based key picker
 * ============================================================ */
.imp-dropzone {
  outline: none;
}
.imp-dropzone:hover,
.imp-dropzone:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--accent, #7fc8ff);
}
.imp-dropzone.imp-dragover {
  background: rgba(127, 200, 255, 0.06) !important;
  border-color: var(--accent, #7fc8ff) !important;
}

.imp-tree {
  padding: 4px 0;
}
.imp-tree-row {
  user-select: none;
}
.imp-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  transition: transform 0.12s ease;
}
.imp-tree-leaf {
  transition: background 0.1s;
}
.imp-tree-leaf:hover {
  background: rgba(255, 255, 255, 0.04);
}
.imp-tree-leaf.is-selected {
  background: rgba(80, 180, 255, 0.08) !important;
}

/* Compact pill-styled <select> used as the entity-type indicator on each
   tree leaf. Removes the default OS chrome so it reads as a chip. */
.imp-type-pill {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--border-strong, #444);
  background: transparent;
  color: inherit;
  padding-right: 16px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.imp-type-pill:disabled {
  cursor: default;
}

/* Single-column fallback for narrow viewports */
@media (max-width: 1100px) {
  .imp-structure-grid {
    grid-template-columns: 1fr !important;
  }
  .imp-preview-col {
    position: static !important;
  }
}

/* Sticky preview side-panel. The tree on the left can grow to thousands of
   leaves (webtech corpus); the preview pane stays in sight rather than
   scrolling away.

   `align-self: start` is required: CSS grid stretches items to fill the
   row by default, which defeats sticky. By collapsing the grid cell to
   the column's intrinsic height, sticky has a finite track to slide
   inside (the grid row itself, set tall by the sibling tree column). */
.imp-preview-col {
  position: sticky;
  top: 12px;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

/* Wrapping link around a structure summary card — full-card click target
   for "open the tree mapper". Inner buttons stop propagation so they
   stay clickable as their own actions. */
.imp-structure-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.imp-structure-card-link:hover .imp-structure-card,
.imp-structure-card-link:focus-visible .imp-structure-card {
  background: rgba(127, 200, 255, 0.05);
  border-color: var(--accent, #7fc8ff);
  outline: none;
}
.imp-structure-card-link:hover .imp-open-mapper {
  background: var(--accent, #7fc8ff);
  color: #0b1015;
  border-color: var(--accent, #7fc8ff);
}

/* The "Open mapper" / "Edit mapping" entry-point chip — sits on the right
   of each structure card. Made deliberately prominent (was an invisible
   ghost arrow before). */
.imp-open-mapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent, #7fc8ff);
  color: var(--accent, #7fc8ff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.imp-open-mapper svg {
  width: 14px;
  height: 14px;
}

/* ------------------------------------------------------------
 * Importer — entity-type / subtype pill buttons + grouped picker popover
 * ------------------------------------------------------------ */
.imp-type-pill,
.imp-subtype-pill {
  font-family: inherit;
  outline: none;
  transition: filter 0.1s;
}
.imp-type-pill:hover:not(:disabled),
.imp-subtype-pill:hover {
  filter: brightness(1.2);
}
.imp-type-pill:focus-visible,
.imp-subtype-pill:focus-visible {
  outline: 2px solid var(--accent, #7fc8ff);
  outline-offset: 1px;
}
.imp-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Slice E — branch-level fan-out pill on tree branches.
   Off-state is a dashed muted chip ("+ Fan out"); on-state lights up
   purple and the branch's children get a tinted left border so the
   analyst can see at a glance which branches will fan out at commit. */
.imp-fanout-pill {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: transparent;
  color: #888;
  border: 1px dashed #555;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s;
}
.imp-fanout-pill:hover {
  color: #c5b8e0;
  border-color: #c5b8e0;
}
.imp-fanout-pill.is-on {
  background: rgba(197, 184, 224, 0.15);
  color: #c5b8e0;
  border: 1px solid rgba(197, 184, 224, 0.5);
  border-style: solid;
  font-weight: 600;
}
.imp-fanout-picker .imp-picker-body label input[type="radio"] {
  margin-right: 4px;
}

/* The picker popover ---------------------------------------- */
.imp-picker {
  background: var(--bg-2, #1a1d22);
  border: 1px solid var(--border-strong, #444);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  font-size: 12px;
  /* max-height is set inline by positionPicker() to fit the available
     viewport room — both when dropping below and when flipping above. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.imp-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong, #333);
  background: rgba(255, 255, 255, 0.02);
}
.imp-picker-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-strong, #ddd);
}
.imp-picker-close {
  background: transparent;
  border: none;
  color: var(--muted, #888);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
}
.imp-picker-close:hover { color: var(--text-strong, #eee); }
.imp-picker-close svg { width: 14px; height: 14px; }

.imp-picker-search-wrap {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-strong, #333);
}
.imp-picker-search {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--bg, #0e1116);
  border: 1px solid var(--border-strong, #333);
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
}
.imp-picker-search:focus { border-color: var(--accent, #7fc8ff); outline: none; }
.imp-picker-clear {
  padding: 4px 8px;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--border-strong, #444);
  color: var(--muted, #aaa);
  border-radius: 4px;
  cursor: pointer;
}
.imp-picker-clear:hover { color: #e08a8a; border-color: rgba(220, 90, 90, 0.5); }

.imp-picker-body {
  overflow-y: auto;
  padding: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.imp-picker-empty {
  padding: 12px;
  color: var(--muted, #888);
  text-align: center;
  font-style: italic;
}
.imp-picker-section { margin-bottom: 10px; }
.imp-picker-section:last-child { margin-bottom: 0; }
.imp-picker-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #888);
  margin: 4px 4px 6px;
}
/* Two-column grid keeps long catalogs scannable without horizontal hunt.
   Chips that don't fit a column wrap to the next row naturally. */
.imp-picker-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.imp-picker-chip {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: filter 0.1s;
}
.imp-picker-chip:hover  { filter: brightness(1.25); }
.imp-picker-chip.is-selected {
  box-shadow: 0 0 0 2px var(--accent, #7fc8ff);
}
.imp-picker-chip-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.6;
  font-size: 10px;
}
.imp-picker-chip-check svg { width: 11px; height: 11px; }

/* Footer stays planted at the bottom of the popover so the
   "+ New entity type…" button is always reachable, no matter how many
   chips the body scrolls through. */
.imp-picker-footer {
  border-top: 1px solid var(--border-strong, #333);
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}
.imp-picker-header,
.imp-picker-search-wrap {
  flex-shrink: 0;
}
.imp-picker-add {
  width: 100%;
  padding: 6px;
  background: transparent;
  border: 1px dashed var(--border-strong, #555);
  color: var(--accent, #7fc8ff);
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.imp-picker-add:hover {
  background: rgba(127, 200, 255, 0.06);
  border-color: var(--accent, #7fc8ff);
}

/* Inline "create new type/subtype" form ---------------------- */
.imp-picker-newform {
  padding: 10px 12px;
  border-top: 1px solid var(--border-strong, #333);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.imp-picker-newform label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11px;
  color: var(--muted, #aaa);
}
.imp-picker-newform input[type="text"],
.imp-picker-newform input:not([type]) {
  padding: 5px 8px;
  font-size: 12px;
  background: var(--bg, #0e1116);
  border: 1px solid var(--border-strong, #333);
  border-radius: 4px;
  color: inherit;
  font-family: inherit;
}
.imp-picker-newform input:focus { border-color: var(--accent, #7fc8ff); outline: none; }

.imp-picker-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.imp-picker-color-swatches button {
  font-family: inherit;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 10px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.imp-picker-color-swatches button.is-selected {
  box-shadow: 0 0 0 2px var(--accent, #7fc8ff);
}

.imp-picker-newform-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}
.imp-picker-newform-actions button {
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.imp-picker-newform-cancel {
  background: transparent;
  border: 1px solid var(--border-strong, #444);
  color: var(--muted, #aaa);
}
.imp-picker-newform-submit {
  background: var(--accent, #7fc8ff);
  border: 1px solid var(--accent, #7fc8ff);
  color: #0b1015;
  font-weight: 600;
}
.imp-picker-newform-submit:hover { filter: brightness(1.1); }

/* ============================================
   D9 — row action triplet (star / shield / target / hide)
   ============================================ */

/* Borderless icon buttons. D11.F — compact 24×22 with 14px icons; the column
   itself is fixed-width + non-resizable so all four cells always fit. */
.row-act {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 22px; padding: 0; margin: 0;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 4px;
  transition: background 120ms, color 120ms, transform 80ms;
  vertical-align: middle;
}

/* D11.G — row-action cell hardening.
   Tabulator's default text-overflow: ellipsis was clipping the last icon
   with "...". Override on the action cell so all icons stay visible.
   Frozen action columns also need a solid opaque background so horizontal
   scroll past them doesn't bleed adjacent cells through. */
.tabulator .tabulator-cell.cell-row-acts {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
  padding-left: 4px !important;
  padding-right: 4px !important;
  background: var(--bg-1);
}
.tabulator .tabulator-cell.cell-row-acts .row-act { margin: 0 1px; }
/* Frozen columns: Tabulator adds .tabulator-frozen — keep the solid bg
   when frozen so scrolled cells slide under, not over. */
.tabulator .tabulator-cell.tabulator-frozen.cell-row-acts { background: var(--bg-1); }
.tabulator .tabulator-row.tabulator-row-odd  .tabulator-cell.cell-row-acts { background: var(--bg-1); }
.tabulator .tabulator-row.tabulator-row-even .tabulator-cell.cell-row-acts { background: var(--bg-0); }
.tabulator .tabulator-row.tabulator-row-odd  .tabulator-cell.tabulator-frozen.cell-row-acts { background: var(--bg-1); }
.tabulator .tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen.cell-row-acts { background: var(--bg-0); }
/* Header cell for the action column also needs the same opaque bg + clip. */
.tabulator .tabulator-col.cell-row-acts,
.tabulator .tabulator-col.tabulator-frozen.cell-row-acts {
  background: var(--bg-2);
}
.row-act .icon { width: 14px; height: 14px; }
button.row-act:hover { background: var(--bg-hover); transform: scale(1.1); }
span.row-act { cursor: default; }
span.row-act:hover { background: transparent; transform: none; }

/* Star — faded when inactive, gold when active. */
.row-act-star          { color: var(--fg-3); opacity: 0.4; }
.row-act-star:hover    { color: #f5b301; opacity: 1; }
.row-act-star.is-active{ color: #f5b301; opacity: 1; }
.row-act-star.is-active .icon { fill: #f5b301; }

/* Shield — display-only (mirrors classification=official); active = green. */
.row-act-shield          { color: var(--fg-3); opacity: 0.25; cursor: default; }
.row-act-shield.is-active{ color: #27ae60; opacity: 1; cursor: default; }
.row-act-shield.is-active .icon { fill: rgba(39,174,96,0.18); }

/* Target — present means "this entity is a target"; clicking it removes
   the target role and demotes to reference. D11 — uses the Reports group
   magenta to match the targets nav menu accent. */
.row-act-target          { color: var(--fg-3); opacity: 0.3; }
.row-act-target.is-active{ color: var(--magenta, #c879c2); opacity: 1; }
.row-act-target.is-active .icon { fill: rgba(200,121,194,0.18); }
.row-act-target.is-active:hover { color: var(--fg); transform: scale(1.12); }

/* Hide (eye) — always available; click moves to #/archive. */
.row-act-hide          { color: var(--fg-3); opacity: 0.5; }
.row-act-hide:hover    { color: var(--accent, #7fc8ff); opacity: 1; }
.row-act-hide.is-active{ color: var(--accent, #7fc8ff); opacity: 1; }

/* Unresolved — D11.C / F informational icon (not clickable). Red badge when
   the entity carries the host-unresolved tag; faded otherwise. Always shown
   in the action column so analysts can read every row's resolve-status at a
   glance without toggling a filter. */
.row-act-unresolved          { color: var(--fg-3); opacity: 0.18; }
.row-act-unresolved.is-active{ color: #e74c3c; opacity: 1; }
.row-act-unresolved.is-active .icon { fill: rgba(231,76,60,0.18); }

/* D11.C — unresolved rows are visually demoted but still selectable / clickable. */
.tabulator-row.row-unresolved { opacity: 0.55; }
.tabulator-row.row-unresolved:hover { opacity: 1; }
.tabulator-row.row-unresolved .tabulator-cell:first-of-type {
  box-shadow: inset 3px 0 0 #e74c3c;
}

/* D11.G — archived rows are surfaced when include_archived is on (e.g. the
   Unresolved filter on entities). Render dimmed with a strikethrough-ish
   tint so the analyst sees "this is archived" instead of being confused
   that their hide click didn't take. */
.tabulator-row.row-archived { opacity: 0.5; }
.tabulator-row.row-archived:hover { opacity: 0.8; }
.tabulator-row.row-archived .tabulator-cell:first-of-type {
  box-shadow: inset 3px 0 0 var(--fg-3);
}
.tabulator-row.row-archived .tabulator-cell {
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,0.15);
}
.tabulator-row.row-archived .row-act,
.tabulator-row.row-archived .inline-pill-edit { text-decoration: none; }

/* Row tints — D11.F refinement. Use CSS variables so the same tint also
   surfaces on hover (analyst sees their click intent). Pulled back to ~6%
   (was 10%) so it's a subtle differentiator, not a yellow wash. The tint
   applies directly to the row's bg, but Tabulator paints cell backgrounds
   on top, so we also tint those at the same alpha to keep the row uniform. */
.tabulator-row.row-starred {
  --row-tint: rgba(245,179,1,0.06);
}
.tabulator-row.row-shield {
  --row-tint: rgba(39,174,96,0.06);
}
.tabulator-row.row-starred.row-shield {
  /* Starred wins when both apply. */
  --row-tint: rgba(245,179,1,0.06);
}
.tabulator-row.row-starred,
.tabulator-row.row-shield {
  background: var(--row-tint) !important;
}
.tabulator-row.row-starred .tabulator-cell,
.tabulator-row.row-shield  .tabulator-cell {
  background: var(--row-tint);
}
/* Hover intent: bump the same tint, not a brightness filter. */
.tabulator-row.row-starred:hover,
.tabulator-row.row-shield:hover {
  --row-tint: rgba(245,179,1,0.14);
}
.tabulator-row.row-shield:hover {
  --row-tint: rgba(39,174,96,0.14);
}
.tabulator-row.row-starred.row-shield:hover {
  --row-tint: rgba(245,179,1,0.14);
}

/* Toast action button — D11 enables "Undo" + similar inline affordances. */
.toast-action {
  margin-left: 12px; padding: 3px 10px;
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: 4px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; opacity: 0.85;
  transition: opacity 120ms, background 120ms;
}
.toast-action:hover { opacity: 1; background: rgba(255,255,255,0.08); }

/* Starred filter pill in the page-head. */
.starred-filter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px;
  font-size: 12px; cursor: pointer; color: var(--fg-2);
}
.starred-filter-pill .icon { width: 12px; height: 12px; }
.starred-filter-pill.is-active {
  background: rgba(245,179,1,0.15); border-color: #f5b301; color: #f5b301;
}
.starred-filter-pill.is-active .icon { fill: #f5b301; }

/* D2c — jumpable summary stat cards. */
.summary-stat.is-jumpable { cursor: pointer; transition: transform 80ms, box-shadow 120ms; }
.summary-stat.is-jumpable:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-accent, 0 2px 12px rgba(127,200,255,0.18));
}

/* ============================================
   D10.3 — HARD / SOFT / NONE tier framing.
   Three labelled sections per linked-entity list, each with a coloured rail
   + count badge so analysts see the breakdown at a glance instead of one
   60-item blob. Helper lives in lib.js (renderTieredList).
   ============================================ */
.tiered-list { display: flex; flex-direction: column; gap: 10px; }

.tiered-list-headstrip {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 2px;
  font-size: 11px; letter-spacing: 0.05em;
}
.tiered-list-headstrip .tier-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg-2);
}
.tiered-list-headstrip .tier-chip strong {
  font-feature-settings: "tnum";
  font-weight: 700;
  color: var(--fg);
}
.tiered-list-headstrip .tier-chip.tier-hard { border-color: rgba(247,118,142,0.45); color: var(--red); }
.tiered-list-headstrip .tier-chip.tier-soft { border-color: rgba(224,175,104,0.45); color: var(--gold); }
.tiered-list-headstrip .tier-chip.tier-none { border-color: var(--border);          color: var(--fg-3); }

.tiered-list-section {
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 10px;
  background: var(--bg-1);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tiered-list-section.tier-hard { border-left-color: var(--red); }
.tiered-list-section.tier-soft { border-left-color: var(--gold); }
.tiered-list-section.tier-none { border-left-color: var(--border); opacity: 0.85; }

.tiered-list-head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-size: 11px; letter-spacing: 0.06em;
  cursor: pointer;
  user-select: none;
  color: var(--fg-2);
}
.tiered-list-head:hover { color: var(--fg); }
.tiered-list-section.tier-hard .tiered-list-head .tiered-list-tier-label { color: var(--red); }
.tiered-list-section.tier-soft .tiered-list-head .tiered-list-tier-label { color: var(--gold); }
.tiered-list-section.tier-none .tiered-list-head .tiered-list-tier-label { color: var(--fg-3); }
.tiered-list-tier-label { font-weight: 700; }
.tiered-list-count {
  background: var(--bg-3); color: var(--fg-2);
  padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600;
  font-feature-settings: "tnum";
}
.tiered-list-spacer { flex: 1; }
.tiered-list-chevron { font-size: 11px; color: var(--fg-3); }

.tiered-list-body {
  padding: 4px 0 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.tiered-list-section.is-collapsed .tiered-list-body { display: none; }

/* D10.4 — shared per-list filter strip sitting inside the dossier sticky
   chrome. Hidden by default; shown when the active top tier is filterable
   (Web/Security/OSINT/Sources). State persists across sub switches. */
.dossier-filter-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin-top: 4px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}
.dossier-filter-strip[hidden] { display: none; }
.dossier-filter-strip .chip { font-size: 10.5px; padding: 2px 8px; }
.dossier-filter-strip .dossier-filter-q {
  flex: 1; min-width: 140px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}
.dossier-filter-strip .ghost.small { padding: 2px 6px; }

/* D10.6 — Visuals shell head: view-switcher pill + shared filter chips. */
.visuals-shell-head { padding: 8px 12px; }
.visuals-shell-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.visuals-shell-spacer { flex: 1; }
.visuals-switcher .chip { padding: 4px 10px; }
.visuals-class-chips .chip { font-size: 11px; padding: 2px 8px; }
.visuals-only-target {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}

/* D10.7 — Files/Records row layout shared between dossier + entity detail. */
.files-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}
.files-row:last-child { border-bottom: 0; }
.files-row .files-row-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-row .files-row-entity { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-row .ghost.small { padding: 2px 6px; }