/* =====================================================================
   signals.html — the Signals workbench.
   Port of trayoai's apps/web Signals page + @trayo/shared signals components.
   Built on the shared vocabulary (tokens.css → signal.css → next2.css):
   .cta buttons, .opt-switch, and the --bg-* / --fg-* / --line / --accent-*
   / --dot-* tokens. Loaded last so it layers on top.

   Tailwind → token map used throughout:
     bg-popover / --color-app-card → var(--bg-card)
     border-border                 → var(--line)
     text-foreground               → var(--fg-1)
     text-muted-foreground         → var(--fg-2)
     text-text-muted               → var(--fg-3)
     bg-accent (hover)             → var(--bg-well)
     border-accent-brand           → var(--accent)
     bg-accent-soft / text-accent-text → var(--accent-soft) / var(--accent-text)
     bg-surface-well               → var(--bg-well)
   ===================================================================== */

/* ── Fonts (same faces as index.html / table.html) ── */
@font-face {
  font-family: "Polymath";
  src: url("../assets/fonts/polymath-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal;
}
@font-face {
  font-family: "Polymath";
  src: url("../assets/fonts/polymath-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal;
}
@font-face {
  font-family: "Polymath";
  src: url("../assets/fonts/polymath-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Page frame ───────────────────────────────────────────────────────
   Unlike table.html this page is a fixed-height master/detail: the list and
   the events table own their own scroll, so the page itself must NOT grow.
   Keep the app shell at viewport height and let the workbench flex into it.
   Sidebar column + content column, exactly like MainLayout's flex h-svh. */
html, body, #root { height: 100%; }
.sg-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
}
.sg-app.collapsed { grid-template-columns: 64px minmax(0, 1fr); }

:root[data-theme="dark"] .app {
  background: linear-gradient(160deg, #232837 0%, #141820 100%);
}
:root[data-theme="dark"] .app::before {
  opacity: 1;
  background-image:
    radial-gradient(120% 80% at 85% 0%, rgba(255, 161, 130, 0.14) 0%, rgba(255, 161, 130, 0) 42%),
    radial-gradient(90% 70% at 0% 100%, rgba(132, 92, 255, 0.12) 0%, rgba(132, 92, 255, 0) 46%);
}

.sg-main { min-width: 0; min-height: 0; display: flex; overflow-y: auto; }
.sg-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) var(--sp-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (max-width: 720px) { .sg-wrap { padding: var(--sp-4); } }

.sw-lbl { display: inline-flex; align-items: center; gap: 6px; }
.sw-lbl svg { opacity: .8; }

/* ── Sidebar ──────────────────────────────────────────────────────────
   232px (--sidebar-w) expanded · 64px icons-only collapsed · off-canvas
   drawer below 900px. Right-hand hairline, sidebar surface. */
.sg-sidebar {
  display: flex; flex-direction: column;
  height: 100vh;
  min-height: 0;
  padding: 14px 12px;
  border-right: 1px solid var(--line);
  background: var(--bg-sidebar);
  position: relative;
  z-index: 10;
}

/* Brand row — wordmark + inline collapse toggle.
   The logo is inline SVG painted with `currentColor`, so it theme-flips off
   --fg-1 (dark on the cream light shell, light on the dark shell) with no
   invert() filter or asset swap. */
.sg-brand {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px;
  margin: 10px 0 12px 9px;
  flex-shrink: 0;
}
.sg-brand .lg { display: inline-flex; align-items: center; color: var(--fg-1); }
.sg-brand .lg svg { height: 24px; width: auto; display: block; }
.sg-sidebar.collapsed .sg-brand { margin-left: 0; justify-content: center; }

.sg-toggle-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  color: var(--fg-2);
  transition: background-color .12s ease, color .12s ease;
}
.sg-toggle-btn:hover { background: var(--bg-well); color: var(--fg-1); }
.sg-toggle-btn.ctr { margin: 0 auto 8px; }

.sg-sep { height: 1px; margin-bottom: 8px; background: var(--line); flex-shrink: 0; }

/* Tenant identity row. */
.sg-tenant {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  margin-bottom: 10px;
  border-radius: 8px;
  color: var(--fg-1);
  flex-shrink: 0;
}
.sg-tenant.act:hover { background: var(--bg-well); }
.sg-tenant .nm {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 600;
}
.sg-tenant .sw { flex-shrink: 0; color: var(--fg-3); }
.sg-tenant .sg-ev-logo, .sg-tenant .sg-ev-logo-fb {
  width: 24px; height: 24px; border-radius: 3px; border: 1px solid var(--line);
}
.sg-sidebar.collapsed .sg-tenant { justify-content: center; padding-left: 0; padding-right: 0; }

/* Nav */
.sg-nav {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.sg-nav::-webkit-scrollbar { display: none; }
.sg-nav-sec { display: flex; flex-direction: column; gap: 1px; }
.sg-nav-sec + .sg-nav-sec { margin-top: 14px; }

.sg-nav-lbl {
  display: flex; align-items: center; width: 100%;
  padding: 6px 9px;
  margin-bottom: 4px;
  border: 0; background: transparent;
  font-family: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
}
.sg-nav-lbl:hover { color: var(--fg-1); }
.sg-nav-lbl.static { cursor: default; }
.sg-nav-lbl span { flex: 1; min-width: 0; }
.sg-nav-lbl .cv { flex-shrink: 0; color: var(--fg-3); transition: transform .15s ease; }
.sg-nav-lbl .cv.up { transform: rotate(180deg); }

.sg-nav-items { display: flex; flex-direction: column; gap: 1px; }

/* Nav pill — rounded-full, icon + label + optional badge. */
.sg-nav-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  padding: 7px 9px 7px 14px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.sg-nav-item:hover { background: var(--bg-well); color: var(--fg-1); }
.sg-nav-item .ic { display: inline-flex; flex-shrink: 0; }
.sg-nav-item .lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sg-nav-item.on {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
}
.sg-nav-item.on:hover { background: var(--accent-soft); color: var(--accent-text); }

/* Collapsed: pills become centered icon circles. */
.sg-sidebar.collapsed .sg-nav-item {
  width: 32px; height: 32px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
}

.sg-beta, .sg-pro {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.sg-beta { background: var(--accent-soft); color: var(--accent-text); }
.sg-pro { border: 1px solid currentColor; opacity: .75; }

/* ── User menu (foot of the sidebar) ──────────────────────────────── */
.sg-user {
  position: relative;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.sg-user-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0; background: transparent;
  border-radius: 8px;
  text-align: left;
  transition: background-color .12s ease;
}
.sg-user-btn:hover { background: var(--bg-well); }
.sg-user-btn .av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}
.sg-user-btn .id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sg-user-btn .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--fg-1);
}
.sg-user-btn .rl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--fg-3);
}
.sg-user-btn .cv { flex-shrink: 0; color: var(--fg-3); transition: transform .15s ease; }
.sg-user-btn .cv.open { transform: rotate(180deg); }
.sg-sidebar.collapsed .sg-user-btn { justify-content: center; padding-left: 0; padding-right: 0; }

.sg-user-pop {
  position: absolute;
  left: 0; right: 0; bottom: calc(100% + 6px);
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-popover);
  box-shadow: var(--shadow-menu, 0 16px 48px rgba(0,0,0,.28));
  overflow: hidden;
}
.sg-sidebar.collapsed .sg-user-pop { left: 0; right: auto; width: 232px; }
.sg-user-pop .hd { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sg-user-pop .hd .e {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--fg-1);
}
.sg-user-pop .hd .r { font-size: 12px; color: var(--fg-3); }
.sg-user-pop .th { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sg-user-pop .th .eyebrow {
  margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--fg-3);
}
.sg-user-pop .th .opt-switch { width: 100%; }
.sg-user-pop .th .opt-switch button { flex: 1; justify-content: center; }
.sg-user-pop .it {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 0; background: transparent;
  font-family: inherit; font-size: 14px;
  color: var(--fg-1);
  text-align: left;
}
.sg-user-pop .it:hover { background: var(--bg-well); }
.sg-user-pop .it svg { flex-shrink: 0; opacity: .8; }
.sg-user-pop .it.sep { border-top: 1px solid var(--line); }

/* ── Mobile drawer ────────────────────────────────────────────────── */
.sg-scrim { display: none; }
.sg-burger { display: none; }

@media (max-width: 900px) {
  .sg-app, .sg-app.collapsed { grid-template-columns: minmax(0, 1fr); }
  .sg-sidebar {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: var(--sidebar-w);
    box-shadow: 0 12px 48px rgba(0,0,0,.32);
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sg-sidebar.open { transform: translateX(0); }
  /* The collapse toggle is desktop-only — the drawer is always full width. */
  .sg-sidebar .sg-toggle-btn { display: none; }

  .sg-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 65;
    background: rgba(0,0,0,.40);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .sg-scrim.on { opacity: 1; pointer-events: auto; }

  .sg-burger {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: center;
    width: 34px; height: 34px; margin: -2px 0;
    flex-shrink: 0;
    border: 1px solid var(--line);
    background: transparent;
    border-radius: 8px;
    color: var(--fg-2);
  }
  .sg-burger:hover { background: var(--bg-well); color: var(--fg-1); }
}

/* ── PageHeader ───────────────────────────────────────────────────────
   Title and subtitle share ONE baseline row (shared PageHeader is
   `flex flex-wrap items-baseline gap-3`), actions pinned right. */
.sg-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin: 28px 0 24px;
}
.sg-header-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; min-width: 0; }
.sg-header-t h1 {
  margin: 0;
  font-family: "Polymath", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
.sg-header-t p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* ── Workbench ────────────────────────────────────────────────────────
   Fills the remaining page height; the two columns scroll internally. */
.sg-wb { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }

/* Master/detail: two separate cards with a gap (280px | 1fr). */
.sg-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  flex: 1; min-height: 0;
}
/* Below 900px the master/detail stacks and the page flows (the sidebar becomes
   an overlay drawer), so the shell must not stay pinned to the viewport. */
@media (max-width: 900px) {
  .sg-grid { grid-template-columns: 1fr; }
  html, body, #root { height: auto; min-height: 100%; }
  .sg-app { height: auto; min-height: 100vh; }
  .sg-main { overflow-y: visible; }
  .sg-grid, .sg-wb { min-height: 0; }
  .sg-detail { max-height: none; }
}

/* ── Sync banner ──────────────────────────────────────────────────────
   Same surface as the workbench cards with a tinted accent, so it reads as
   part of the editor chrome rather than a faint wash on the page. */
.sg-banner {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 12px;
  background: var(--bg-card);
}
.sg-banner-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
}
.sg-banner-ico svg { width: 16px; height: 16px; }
.sg-banner-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sg-banner-copy .t { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.sg-banner-copy .s { font-size: 12px; line-height: 1.45; color: var(--fg-2); }

/* stale = brand accent (pending changes call to action) */
.sg-banner.stale { border-color: var(--accent-line); }
.sg-banner.stale .sg-banner-ico { background: var(--accent-soft); color: var(--accent-text); }
/* finalizing = warning / in-progress */
.sg-banner.finalizing { border-color: rgba(245, 158, 11, 0.30); }
.sg-banner.finalizing .sg-banner-ico { background: rgba(245, 158, 11, 0.10); color: var(--accent-amber-500); }
/* saved = success */
.sg-banner.saved { border-color: rgba(16, 185, 129, 0.30); }
.sg-banner.saved .sg-banner-ico { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald-500); }
:root[data-theme="dark"] .sg-banner.finalizing .sg-banner-ico { color: var(--accent-amber-400); }
:root[data-theme="dark"] .sg-banner.saved .sg-banner-ico { color: var(--accent-emerald-400); }

.sg-finalize { flex-shrink: 0; padding: 0 12px; }
.sg-finalize:hover { filter: brightness(1.10); }

@keyframes sg-spin { to { transform: rotate(360deg); } }
.spin { animation: sg-spin 1s linear infinite; }

/* ── Signal list (left column) ────────────────────────────────────── */
.sg-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; }

/* Filter bar — wrapped card with equal-width tabs and a uniform brand active state. */
.sg-filters {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-card);
  flex-shrink: 0;
}
.sg-filt {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px;
  border: 0; background: transparent;
  border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  transition: background-color .12s ease, color .12s ease;
}
.sg-filt:hover { color: var(--fg-1); }
.sg-filt .n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.sg-filt.on { background: var(--accent-soft); color: var(--accent-text); }
.sg-filt.on .n { color: var(--accent-text); }

/* Signal cards */
.sg-items { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; min-height: 0; padding-right: 2px; }
.sg-item {
  display: flex; flex-direction: column; gap: 6px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-card);
  transition: background-color .12s ease, border-color .12s ease;
}
.sg-item:hover { border-color: var(--line-strong); background: var(--bg-well); }
.sg-item.on { border-color: var(--accent); background: var(--bg-well); }
.sg-item-top { display: flex; align-items: center; gap: 8px; }
.sg-item-top .nm {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
  color: var(--fg-1);
}
.sg-item-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.sg-item-bot .dt {
  flex: 1; margin: 0;
  font-size: 12px; line-height: 1.45; color: var(--fg-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sg-item-bot .ct {
  flex-shrink: 0;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-well);
  font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.sg-item.on .ct { background: var(--bg-card); }
.sg-item-bot .ct-none { flex-shrink: 0; font-size: 10px; color: var(--fg-3); opacity: .65; }
.sg-empty { padding: 32px 0; text-align: center; font-size: 14px; color: var(--fg-3); }

/* ── Type badge (list + detail header share this) ─────────────────── */
.sg-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 10px; font-weight: 500; letter-spacing: 0.02em;
  text-transform: lowercase;
}
.sg-badge.news       { background: color-mix(in srgb, var(--dot-news) 15%, transparent);   color: var(--dot-news); }
.sg-badge.jobs       { background: color-mix(in srgb, var(--dot-job) 15%, transparent);    color: var(--dot-job); }
.sg-badge.job_change { background: color-mix(in srgb, var(--dot-career) 15%, transparent); color: var(--dot-career); }

/* ── Detail pane (right column) ───────────────────────────────────── */
.sg-detail {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
}
.sg-detail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  height: 100%; padding: 40px;
}
.sg-detail-empty p { margin: 0; font-size: 14px; color: var(--fg-3); }

.sg-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* Only scroll the whole pane when details are expanded (the includes/excludes
   grow its natural height). Collapsed, the events table owns the scroll. */
.sg-pane.expanded { overflow-y: auto; }

/* Header — title row, then the controls row (Weight left, Refine/Delete right). */
.sg-pane-hd {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sg-pane-hd .row1 { display: flex; align-items: center; gap: 10px; }
.sg-pane-hd h2 {
  margin: 0; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Polymath", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.012em;
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}
.sg-pane-hd .row2 { display: flex; align-items: center; gap: 12px; }
.sg-pane-hd .acts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Destructive secondary button (Delete) */
.cta.ghost.sm.danger {
  border-color: color-mix(in srgb, var(--destructive, #ef4444) 30%, transparent);
  background: transparent;
  color: var(--destructive, #ef4444);
}
.cta.ghost.sm.danger:hover {
  border-color: color-mix(in srgb, var(--destructive, #ef4444) 55%, transparent);
  background: color-mix(in srgb, var(--destructive, #ef4444) 10%, transparent);
}
.cta.ghost.sm.danger svg { opacity: 1; }

/* ── Weight select ────────────────────────────────────────────────── */
.sg-weight {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px;
  padding: 0 5px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-raised);
  flex-shrink: 0;
}
.sg-weight-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 62px; flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  color: var(--fg-2);
}
.sg-weight-lbl.ok { color: var(--accent-emerald-500); }
.sg-weight-lbl svg { width: 13px; height: 13px; opacity: .75; }
.sg-weight-lbl.ok svg { opacity: 1; }
.sg-weight-div { width: 1px; height: 16px; flex-shrink: 0; background: var(--line); }
.sg-weight-scale { display: inline-flex; align-items: center; gap: 6px; }
.sg-weight-scale .cap { font-size: 12px; font-weight: 500; color: var(--fg-3); opacity: .55; }
.sg-weight-radios { display: inline-flex; align-items: center; gap: 2px; }
.sg-weight-radios button {
  display: flex; align-items: center; justify-content: center;
  width: 23px; height: 23px;
  border: 0; background: transparent;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  transition: background-color .12s ease, color .12s ease;
}
.sg-weight-radios button:hover:not(:disabled) { color: var(--fg-1); }
.sg-weight-radios button:disabled { cursor: default; opacity: .6; }
.sg-weight-radios button.on {
  background: var(--bg-well);
  color: var(--fg-1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* ── Body: hero + boundaries ──────────────────────────────────────── */
.sg-pane-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
/* Hero description — solid brand left rail, soft accent fill. */
.sg-hero {
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  background: var(--accent-soft);
}
.sg-hero p {
  margin: 0;
  font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: -0.005em;
  color: var(--fg-1);
}
.sg-toggle { align-self: flex-start; }
.sg-toggle .cv { transition: transform .15s ease; width: 12px; height: 12px; }
.sg-toggle .cv.up { transform: rotate(180deg); }

.sg-bounds { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1280px) { .sg-bounds { grid-template-columns: 1fr 1fr; } }
.sg-bounds section { display: flex; flex-direction: column; gap: 8px; }
.sg-bounds .hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
}
.sg-bounds .hd .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 4px;
}
.sg-bounds .hd .ic svg { width: 10px; height: 10px; }
.sg-bounds .hd .n { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.sg-bounds .hd.inc { color: var(--accent-emerald-500); }
.sg-bounds .hd.inc .ic { background: color-mix(in srgb, var(--accent-emerald-500) 15%, transparent); }
.sg-bounds .hd.exc { color: var(--destructive, #ef4444); }
.sg-bounds .hd.exc .ic { background: color-mix(in srgb, var(--destructive, #ef4444) 10%, transparent); }
:root[data-theme="dark"] .sg-bounds .hd.inc { color: var(--accent-emerald-400); }

.sg-bounds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sg-bounds li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; line-height: 1.55;
  color: color-mix(in srgb, var(--fg-1) 85%, transparent);
}
.sg-bounds li .dot { width: 4px; height: 4px; margin-top: 6px; flex-shrink: 0; border-radius: var(--r-pill); }
.sg-bounds .hd.inc + ul li .dot { background: var(--accent-emerald-500); }
.sg-bounds .hd.exc + ul li .dot { background: var(--destructive, #ef4444); }

/* ── Matched events ───────────────────────────────────────────────── */
.sg-matched { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px; min-height: 0; }
.sg-pane:not(.expanded) .sg-matched { flex: 1; }
.sg-matched-hd {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.0833em; text-transform: uppercase;
  color: var(--fg-3);
  flex-shrink: 0;
}
.sg-matched-hd svg { width: 12px; height: 12px; }
.sg-matched-hd .sum {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none;
}
.sg-num { padding: 0 1px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-1); }

/* Rows sit on the card surface — the same band as the accounts table, so they
   read light rather than as a darker nested well. */
.sg-ev-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-raised);
}
.sg-ev-wrap.scroll { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sg-ev-wrap.scroll .sg-ev-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.sg-ev { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.sg-ev thead tr { background: var(--bg-well); }
.sg-ev th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 12px;
  text-align: left;
  background: var(--bg-well);
  border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--fg-3);
}
.sg-ev th.c { text-align: center; padding: 8px 4px; }
.sg-ev th.r { text-align: right; }
.sg-ev tbody tr { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sg-ev tbody tr:first-child { border-top: 0; }
.sg-ev tbody tr:hover { background: var(--bg-well); }
.sg-ev td { padding: 10px 12px; overflow: hidden; }
.sg-ev td.r { text-align: right; }
.sg-ev td.date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-2); }

.sg-ev-acct { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.sg-ev-acct .nm {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Polymath", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
}
.sg-ev-logo { width: 24px; height: 24px; flex-shrink: 0; border-radius: 4px; background: #fff; object-fit: cover; }
.sg-ev-logo-fb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 4px;
  background: var(--bg-well);
  font-size: 10px; font-weight: 700; color: var(--fg-2);
}
.sg-ev-title {
  display: block; width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0; border: 0; background: transparent;
  text-align: left; font-family: inherit; font-size: 13px;
  color: var(--fg-2);
  transition: color .12s ease;
}
.sg-ev-title:hover { color: var(--fg-1); }

/* Confidence — three bars, high/medium/low. */
.sg-conf { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 12px; }
.sg-conf .b { width: 3px; border-radius: 1px; background: color-mix(in srgb, var(--fg-1) 15%, transparent); }
.sg-conf .b1 { height: 5px; }
.sg-conf .b2 { height: 8px; }
.sg-conf .b3 { height: 11px; }
.sg-conf.high   .b.on { background: var(--accent-emerald-400); }
.sg-conf.medium .b.on { background: var(--accent-amber-400); }
.sg-conf.low    .b.on { background: var(--accent-red-400); }

.sg-ev-empty { padding: 32px 0; margin: 0; text-align: center; font-size: 13px; color: var(--fg-3); }

/* ── Dialogs ──────────────────────────────────────────────────────── */
.sg-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(10, 12, 18, 0.55);
  backdrop-filter: blur(2px);
}
.sg-modal {
  width: 100%; max-width: 420px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-popover);
  box-shadow: var(--shadow-menu, 0 16px 48px rgba(0,0,0,.28));
}
.sg-modal.wide { max-width: 620px; }
.sg-modal-t {
  margin: 0 0 8px;
  font-family: "Polymath", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px; font-weight: 600; color: var(--fg-1);
}
.sg-modal-d { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.sg-modal-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sg-destructive { background: var(--destructive, #ef4444); color: #fff; padding: 0 14px; }

.sg-evd-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sg-evd-hd .a { font-family: "Polymath", sans-serif; font-size: 14px; font-weight: 600; color: var(--fg-1); }
.sg-evd-hd .m { font-size: 12px; color: var(--fg-3); }
.sg-evd-t { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--fg-1); }