/* ---------- Design tokens ---------- */
:root {
  --bg: #eef1f6; --panel: #ffffff; --panel-2: #f5f7fb; --line: #d9dfea; --line-strong: #c3ccdc;
  --text: #182033; --text-muted: #5b6478; --text-faint: #8791a3;
  --accent: #1e8fa6; --accent-strong: #146e80; --accent-wash: rgba(30, 143, 166, 0.10);
  --good: #0ca30c; --good-wash: rgba(12, 163, 12, 0.10);
  --warn: #b9791f; --warn-wash: rgba(250, 178, 25, 0.16);
  --critical: #c9402c; --critical-wash: rgba(208, 59, 59, 0.10);
  --shadow: 0 1px 2px rgba(24, 32, 51, 0.06), 0 8px 24px rgba(24, 32, 51, 0.06);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220; --panel: #121b2e; --panel-2: #17233a; --line: #263049; --line-strong: #34405e;
    --text: #e7ecf5; --text-muted: #8a94ad; --text-faint: #57617c;
    --accent: #5fc3d6; --accent-strong: #8fdcea; --accent-wash: rgba(95, 195, 214, 0.14);
    --good: #22c55e; --good-wash: rgba(34, 197, 94, 0.12);
    --warn: #fab219; --warn-wash: rgba(250, 178, 25, 0.14);
    --critical: #ff6b52; --critical-wash: rgba(255, 107, 82, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1220; --panel: #121b2e; --panel-2: #17233a; --line: #263049; --line-strong: #34405e;
  --text: #e7ecf5; --text-muted: #8a94ad; --text-faint: #57617c;
  --accent: #5fc3d6; --accent-strong: #8fdcea; --accent-wash: rgba(95, 195, 214, 0.14);
  --good: #22c55e; --good-wash: rgba(34, 197, 94, 0.12);
  --warn: #fab219; --warn-wash: rgba(250, 178, 25, 0.14);
  --critical: #ff6b52; --critical-wash: rgba(255, 107, 82, 0.12);
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
:root[data-theme="light"] {
  --bg: #eef1f6; --panel: #ffffff; --panel-2: #f5f7fb; --line: #d9dfea; --line-strong: #c3ccdc;
  --text: #182033; --text-muted: #5b6478; --text-faint: #8791a3;
  --accent: #1e8fa6; --accent-strong: #146e80; --accent-wash: rgba(30, 143, 166, 0.10);
  --good: #0ca30c; --good-wash: rgba(12, 163, 12, 0.10);
  --warn: #b9791f; --warn-wash: rgba(250, 178, 25, 0.16);
  --critical: #c9402c; --critical-wash: rgba(208, 59, 59, 0.10);
  --shadow: 0 1px 2px rgba(24,32,51,0.06), 0 8px 24px rgba(24,32,51,0.06);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100%; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; }

/* ---------- Top bar ---------- */
/* Above Leaflet's own panes/controls (z-index up to 1000 — see the
   modal-overlay comment below) so the sticky topbar stays on top of a
   live map while scrolling, instead of the map rendering over it. Still
   under modal-overlay's 2000, so a modal opened over the topbar area
   (there isn't one today, but just in case) would still win. */
.topbar { display: flex; align-items: center; gap: 14px; padding: 11px 20px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 1500; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand-word { font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.brand-grad { background: linear-gradient(135deg, #4f7cff, #9b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.brand-word-light { color: var(--text-muted); font-weight: 600; }
.brand-div { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }
.primary-nav { display: flex; gap: 2px; }
.primary-nav a { padding: 6px 12px; border-radius: 7px; font-size: 12.6px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.primary-nav a:hover { background: var(--panel-2); color: var(--text); }
.primary-nav a.active { background: var(--accent-wash); color: var(--accent-strong); }
.reviewing-label { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.example-switch { display: flex; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.example-tab { padding: 4px 10px; border-radius: 6px; font-size: 11.3px; color: var(--text-muted); text-decoration: none; }
.example-tab.active { background: var(--panel); color: var(--text); font-weight: 650; box-shadow: var(--shadow); }
.example-tab:hover:not(.active) { color: var(--text); }
.topbar .spacer { margin-left: auto; }
.recent-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-muted); border-radius: 8px; padding: 6px 11px; font-size: 12.3px; cursor: pointer; }
.avatar { width: 27px; height: 27px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-size: 10.8px; font-weight: 700; margin-left: 12px; cursor: pointer; background-size: cover; background-position: center; }
/* Anchored off .topbar's own position:sticky (a positioned element, so it's
   a valid containing block for this) rather than a wrapper around .avatar
   — keeps .avatar's parent unchanged so changelog.js's unrelated
   avatar.parentElement.insertBefore(changelogBtn, avatar) still lands in
   the right place. */
.user-menu-card { display: none; position: absolute; top: calc(100% + 8px); right: 20px; width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 1600; }
.user-menu-card.open { display: block; }
.user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; background-size: cover; background-position: center; }
.user-menu-id { min-width: 0; }
.user-menu-email { font-size: 12.5px; font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-role { font-size: 11px; color: var(--text-faint); }
.user-menu-item { display: block; width: 100%; text-align: left; border: none; background: none; color: var(--text); font-family: var(--sans); font-size: 12.6px; font-weight: 600; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.user-menu-item:hover { background: var(--panel-2); }
.user-menu-item.danger { color: var(--critical); }
.user-menu-divider { height: 1px; background: var(--line); margin: 6px 2px; }
.ticket-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.ticket-pill a { color: var(--accent-strong); text-decoration: none; }
.ticket-pill a:hover { text-decoration: underline; }
.ticket-edit-btn { border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 11px; padding: 0 0 0 2px; line-height: 1; }
.ticket-edit-btn:hover { color: var(--accent-strong); }
.ticket-add-btn { border: 1px dashed var(--line-strong); background: none; color: var(--text-faint); cursor: pointer; font-size: 11px; font-family: var(--mono); border-radius: 6px; padding: 2px 8px; }
.ticket-add-btn:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
.ticket-edit-row { display: inline-flex; align-items: center; gap: 6px; }
.ticket-edit-row input { font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); width: 140px; }
.ticket-edit-row .btn.small { padding: 3px 8px; font-size: 11px; }

/* ---------- Sub-header: loaded item ---------- */
.subheader { padding: 18px 24px 16px; border-bottom: 1px solid var(--line); background: var(--panel); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.item-subject { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
.item-parties { font-size: 12.6px; color: var(--text-muted); }
.item-parties .lbl { color: var(--text-faint); margin-right: 4px; }
.item-meta { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.risk-badge { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 8px 14px; white-space: nowrap; }
.risk-badge.malicious, .risk-badge.critical { background: var(--critical-wash); border: 1px solid var(--critical); }
.risk-badge.suspicious { background: var(--warn-wash); border: 1px solid var(--warn); }
.risk-badge.safe { background: var(--good-wash); border: 1px solid var(--good); }
.risk-badge .rb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.risk-badge.malicious .rb-dot, .risk-badge.critical .rb-dot { background: var(--critical); }
.risk-badge.suspicious .rb-dot { background: var(--warn); }
.risk-badge.safe .rb-dot { background: var(--good); }
.risk-badge .rb-text { font-size: 13px; font-weight: 700; }
.risk-badge.malicious .rb-text, .risk-badge.critical .rb-text { color: var(--critical); }
.risk-badge.suspicious .rb-text { color: var(--warn); }
.risk-badge.safe .rb-text { color: var(--good); }
.risk-badge .rb-sub { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }

/* ---------- Workbench layout ---------- */
.workbench { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; padding: 18px 24px 60px; max-width: 1400px; margin: 0 auto; }
.evidence-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.section { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 76px; transition: box-shadow .3s ease, border-color .3s ease; }
.section.flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.section-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.section-head svg { color: var(--text-faint); flex-shrink: 0; }
.section-title { font-size: 13px; font-weight: 700; }
.section-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-faint); }
.section-body { padding: 15px 16px 17px; }

.kv { display: grid; grid-template-columns: 148px 1fr; gap: 9px 14px; font-size: 12.7px; }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.divider-label { font-size: 10.3px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 15px 0 8px; }

.hop-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.2px; }
.hop { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.hop-arrow { color: var(--text-faint); }

.sandbox-note { display: flex; gap: 9px; background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 13px; }
.body-preview { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 15px; font-size: 13px; line-height: 1.7; color: var(--text-muted); white-space: pre-wrap; }
.body-preview b { color: var(--text); }

.content-warning { display: flex; gap: 9px; background: var(--critical-wash); border: 1px solid var(--critical); border-radius: 8px; padding: 11px 13px; font-size: 12.3px; color: var(--text); margin-bottom: 13px; }
.content-warning svg { color: var(--critical); }
.content-warning > div { display: flex; flex-direction: column; gap: 6px; }
.content-warning b { color: var(--critical); }

.body-view-toggle { display: flex; gap: 3px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px; margin-left: auto; }
.bv-tab { padding: 4px 10px; border-radius: 5px; border: none; background: none; font-size: 11.3px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.bv-tab.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.body-frame { width: 100%; min-height: 120px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }

.link-screenshot { display: block; width: 84px; height: auto; border-radius: 5px; border: 1px solid var(--line); margin-top: 6px; cursor: zoom-in; }
.link-screenshot:hover { border-color: var(--accent); }
/* The standalone Link check's own result panel — one single screenshot,
   not a dense table of many rows — shown at real size by default instead
   of the Links table's 84px thumbnail, so it's readable without a click.
   Still clickable for a full-size view (wireScreenshotClicks() matches
   any .link-screenshot regardless of this second class). */
.link-screenshot-large { width: 100%; max-width: 560px; }

table { width: 100%; border-collapse: collapse; font-size: 12.4px; }
thead th { text-align: left; font-size: 10.3px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 600; padding: 0 10px 8px 0; white-space: nowrap; }
tbody td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }

/* Fixed proportional columns so a long URL/redirect target wraps within
   its own cell instead of forcing the whole table (and a horizontal
   scrollbar) wider than the panel — the point is seeing every column's
   status without scrolling. */
.links-table { table-layout: fixed; }
.links-table th:nth-child(1), .links-table td:nth-child(1) { width: 32%; overflow-wrap: anywhere; }
/* Category's content (e.g. "Email tracking redirect") is longer than this
   fixed 12%-wide column in a table-layout: fixed table — with nothing to
   let it wrap, it overflowed straight through the column boundary and
   visually overlapped the Domain age text next to it. overflow-wrap makes
   it wrap onto multiple lines within its own column instead, same
   treatment column 1/4 already get for the same reason. */
.links-table th:nth-child(2), .links-table td:nth-child(2) { width: 12%; overflow-wrap: anywhere; }
.links-table th:nth-child(3), .links-table td:nth-child(3) { width: 12%; }
.links-table th:nth-child(4), .links-table td:nth-child(4) { width: 28%; overflow-wrap: anywhere; }
.links-table th:nth-child(5), .links-table td:nth-child(5) { width: 16%; }
.mono { font-family: var(--mono); font-size: 11.7px; color: var(--text-muted); }
.table-scroll { overflow-x: auto; }
.screenshot-box { width: 100%; height: 84px; border-radius: 7px; background: repeating-linear-gradient(135deg, var(--panel-2), var(--panel-2) 8px, var(--line) 8px, var(--line) 9px); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 10.3px; margin-top: 8px; }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.chip.malicious, .chip.critical { background: var(--critical-wash); color: var(--critical); }
.chip.malicious::before, .chip.critical::before { background: var(--critical); }
.chip.suspicious { background: var(--warn-wash); color: var(--warn); }
.chip.suspicious::before { background: var(--warn); }
.chip.safe, .chip.good-action { background: var(--good-wash); color: var(--good); }
.chip.safe::before, .chip.good-action::before { background: var(--good); }
.chip.neutral { background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--line); }
.chip.neutral::before { display: none; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 10.4px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text-muted); font-family: var(--mono); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* Feeds page's vulnerability-feed vendor chips — a read-only, at-a-glance
   summary of which vendors are currently monitored (see Settings ->
   Vulnerabilities for the actual toggle); disabled ones stay visible but
   struck through rather than disappearing, so it's obvious a vendor is
   being deliberately skipped rather than just absent. */
.vendor-chip { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--text); cursor: pointer; }
.vendor-chip.selected { background: var(--accent); border-color: var(--accent); color: #06222a; }

.vuln-list-head { display: flex; align-items: center; gap: 14px; padding: 0 0 8px; }
.vuln-sort-btn { background: none; border: none; padding: 0; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-faint); cursor: pointer; }
.vuln-sort-btn:hover { color: var(--text-muted); }
.vuln-sort-btn.active { color: var(--accent); }
.vuln-col-severity { flex: 0 0 150px; }
.vuln-col-published { flex: 0 0 110px; text-align: right; }

/* CVE details popup's vendor-logo row — a white card behind each logo so a
   dark-text/transparent-background logo still reads clearly in dark mode. */
.vendor-logo-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.vendor-logo-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; }
.vendor-logo { height: 28px; max-width: 140px; object-fit: contain; display: block; }

.mini-select { border: 1px solid var(--line-strong); background: var(--panel-2); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); font-family: var(--sans); cursor: pointer; outline: none; }
.mini-select:focus { border-color: var(--accent); }

.btn { border-radius: 8px; padding: 8px 14px; font-size: 12.8px; font-weight: 650; cursor: pointer; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); transition: transform .05s ease; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06222a; }
.btn.danger { background: var(--critical); border-color: var(--critical); color: #2a0704; }
.btn.ghost { background: none; }
.btn.small { padding: 5px 9px; font-size: 11.5px; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- Process tree (SentinelOne) ---------- */
.proc-tree { display: flex; flex-direction: column; gap: 3px; }
.proc-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--line); }
.proc-item.flagged { border-color: var(--critical); background: var(--critical-wash); }
.proc-indent { font-family: var(--mono); color: var(--text-faint); white-space: pre; }
.proc-name { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.proc-item.flagged .proc-name { color: var(--critical); }
.proc-detail { font-size: 11.3px; color: var(--text-muted); margin-top: 2px; }
.proc-cmdline { font-family: var(--mono); font-size: 10.8px; color: var(--text-faint); margin-top: 3px; word-break: break-all; }
.proc-time { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); white-space: nowrap; align-self: flex-start; padding-top: 1px; }

.correlation-note { display: flex; gap: 9px; background: var(--accent-wash); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.correlation-note b { color: var(--text); }
.correlation-note a { color: var(--accent-strong); font-weight: 650; text-decoration: none; }
.correlation-note a:hover { text-decoration: underline; }

/* ---------- AI guidance panel ---------- */
/* Used to be position: sticky, pinning this column at the top while the
   (usually longer) evidence column scrolled past it. That's a fine idea
   when this column is short, but once a Sender IP reputation box (with a
   full VirusTotal/AbuseIPDB/map card) made it routinely taller than the
   viewport, sticky positioning had no good outcome: either it silently
   clipped whatever didn't fit (the max-height/overflow-y attempt after
   that), or clipped even more once flexbox started shrinking children to
   fit the constrained height instead of letting the column scroll (the
   flex-shrink attempt after that). Both were reported as "still have to
   scroll to reach the IP info, and now there's a weird nested scrollbar."
   Simplest fix that actually resolves it: this column just scrolls with
   the page like the evidence column already does — no pinning, no nested
   scroll, one predictable scroll motion reaches everything. */
.ai-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ai-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.ai-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ai-head-title { font-size: 12.6px; font-weight: 700; }
.ai-head-sub { margin-left: auto; font-size: 10.6px; color: var(--text-faint); font-family: var(--mono); }

.reco { padding: 15px 16px; border-bottom: 1px solid var(--line); }
.reco-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.reco-verb { font-size: 15.5px; font-weight: 700; }
.reco-verb.malicious, .reco-verb.critical { color: var(--critical); }
.reco-verb.suspicious { color: var(--warn); }
.reco-verb.safe { color: var(--good); }
.reco-verb.neutral { color: var(--text-muted); }
.reco-conf { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.reco-why { font-size: 12.4px; color: var(--text-muted); margin-top: 6px; overflow-wrap: anywhere; }
.reco-why-list { font-size: 12.4px; color: var(--text-muted); margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; }
.reco-why-list li { line-height: 1.45; }
.reco-why-list li::marker { color: var(--text-faint); }
.meter-track { height: 6px; border-radius: 4px; overflow: hidden; margin-top: 10px; background: var(--critical-wash); }
.meter-track.suspicious { background: var(--warn-wash); }
.meter-track.safe { background: var(--good-wash); }
.meter-track.neutral { background: var(--line); }
.meter-fill { height: 100%; border-radius: 4px; background: var(--critical); }
.meter-fill.suspicious { background: var(--warn); }
.meter-fill.safe { background: var(--good); }
.meter-fill.neutral { background: var(--text-muted); }

.trend-block { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.trend-block h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.trend-stat { font-size: 12.3px; color: var(--text-muted); margin-bottom: 8px; }
.trend-stat b { color: var(--text); }
.trend-chart-wrap { position: relative; margin-bottom: 9px; }
.trend-tooltip { position: absolute; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 8px; font-size: 10.8px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, -112%); transition: opacity 0.1s ease; white-space: nowrap; z-index: 4; }
.trend-tooltip .tt-date { color: var(--text-faint); font-family: var(--mono); font-size: 9.8px; }
.trend-tooltip .tt-val { font-weight: 700; }
.outcome-row { display: flex; gap: 6px; flex-wrap: wrap; }

.indicators { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.indicators h4 { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.ind-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; background: none; border: none; padding: 8px 8px; border-radius: 8px; cursor: pointer; font-size: 12.2px; color: var(--text); }
.ind-item:hover { background: var(--accent-wash); }
.ind-item .ind-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--critical); margin-top: 6px; flex-shrink: 0; }
.ind-item .ind-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ind-item .ind-jump { color: var(--text-faint); font-size: 10.5px; white-space: nowrap; margin-top: 1px; }
.ind-item:hover .ind-jump { color: var(--accent-strong); }

.ask { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ask h4 { margin: 0 0 9px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.transcript { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; max-height: 220px; overflow-y: auto; }
.msg { font-size: 12.2px; padding: 8px 10px; border-radius: 8px; line-height: 1.45; }
.msg.q { background: var(--panel-2); color: var(--text); align-self: flex-end; max-width: 88%; }
.msg.a { background: var(--accent-wash); color: var(--text); max-width: 92%; }
.msg.a b { color: var(--accent-strong); }
.suggest-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.suggest-chip { font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-muted); cursor: pointer; }
.suggest-chip:hover { border-color: var(--accent); color: var(--accent-strong); }
.ask-input-row { display: flex; gap: 7px; }
.ask-input-row input { flex: 1; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 8px 11px; font-size: 12.4px; color: var(--text); outline: none; }
.ask-input-row input:focus { border-color: var(--accent); }
.ask-input-row input::placeholder { color: var(--text-faint); }

.decision { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.decision .row { display: flex; gap: 8px; }
.decision .btn { flex: 1; }
.confirm-msg { font-size: 11.6px; color: var(--good); display: none; align-items: center; gap: 6px; padding-top: 2px; }
.confirm-msg.show { display: flex; }

/* ---------- Generic page shell (New Review / Dashboard) ---------- */
.page { width: 100%; box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 40px 24px 70px; }
.page.wide { max-width: 1180px; padding-top: 26px; }
.page.roomy { max-width: 920px; }

.page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.page-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 26px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-pad { padding: 22px 24px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 18px 0; }
.panel-title { font-size: 13.5px; font-weight: 700; }
.panel-sub { font-size: 11.5px; color: var(--text-faint); }
.panel-body { padding: 14px 18px 18px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.field .optional { font-weight: 500; color: var(--text-faint); margin-left: 4px; }
.field input[type="text"], .field input[type="number"] { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; font-family: var(--mono); }
.field input[type="text"]:focus, .field input[type="number"]:focus { border-color: var(--accent); }
.field input::placeholder { color: var(--text-faint); font-family: var(--sans); }
.field-hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }

/* Top-level categories (Email / EDR / Quick Checks) — a plain underline-tab
   row, visually distinct from the segmented-control sub-tabs below it so
   the two levels of the hierarchy don't read as the same kind of control. */
.category-picker { display: flex; flex-wrap: wrap; gap: 6px 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.category-opt { padding: 0 2px 11px; border: none; background: none; border-bottom: 2px solid transparent; font-size: 13.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.category-opt.active { color: var(--text); border-bottom-color: var(--accent); }
.category-opt svg { opacity: 0.8; }

.source-picker { display: flex; gap: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 4px; margin-bottom: 22px; }
.source-opt { flex: 1; padding: 9px; border-radius: 6px; border: none; background: none; font-size: 13px; font-weight: 650; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.source-opt.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
.source-opt svg { opacity: 0.8; }

.intake-panel { display: none; }
.intake-panel.active { display: block; }

.dropzone { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 34px 20px; text-align: center; background: var(--panel-2); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: var(--accent-wash); }
.dropzone svg { color: var(--text-faint); margin-bottom: 10px; }
.dropzone .dz-title { font-size: 13.5px; font-weight: 650; }
.dropzone .dz-sub { font-size: 11.8px; color: var(--text-faint); margin-top: 4px; }

.or-divider { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin: 16px 0; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.forward-note { display: flex; gap: 9px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font-size: 12.3px; color: var(--text-muted); }
.forward-note b { color: var(--text); }

.s1-search { display: flex; gap: 8px; margin-bottom: 16px; }
.s1-search input { flex: 1; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; }
.s1-search input:focus { border-color: var(--accent); }

.alert-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.alert-row:first-of-type { border-top: none; }
.alert-name { font-size: 12.8px; font-weight: 650; }
.alert-meta { font-size: 11.3px; color: var(--text-faint); margin-top: 2px; font-family: var(--mono); }

.btn.primary.full { width: 100%; margin-top: 4px; }

.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 30px 0 12px; }

.pipeline-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.pipeline-row:first-of-type { border-top: none; }
.pr-name { flex: 0 0 190px; font-size: 12.6px; font-weight: 650; }
.pr-subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pr-name .sub { display: block; font-weight: 500; color: var(--text-faint); font-size: 11px; margin-top: 2px; }
.steps { display: flex; align-items: center; flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.step { display: flex; align-items: center; gap: 6px; }
.step-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.step-dot.done { background: var(--good); }
.step-dot.current { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.step-label { font-size: 10.8px; color: var(--text-faint); white-space: nowrap; }
.step-label.done, .step-label.current { color: var(--text-muted); }
.step-line { width: 26px; height: 1px; background: var(--line-strong); margin: 0 6px; }
.step-line.done { background: var(--good); }
.pr-action { flex: 0 0 auto; margin-left: 12px; }

/* ---------- Dashboard ---------- */
.lookup-row { display: flex; gap: 10px; }
.lookup-row input { flex: 1; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 10px 13px; font-size: 13.5px; font-family: var(--mono); color: var(--text); outline: none; }
.lookup-row input:focus { border-color: var(--accent); }
.lookup-result { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.lr-ticket { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; }
.lr-row { display: flex; align-items: center; gap: 12px; }
.lr-row + .lr-row { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.lr-info { flex: 1; }
.lr-subject { font-size: 13px; font-weight: 650; }
.lr-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; font-family: var(--mono); }

.pattern-link { background: none; border: none; padding: 0; font-family: var(--mono); font-size: inherit; color: var(--accent-strong); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pattern-link:hover { color: var(--accent); }

/* Leaflet's own controls/popups use z-index up to 1000 (see its
   leaflet.css) — this has to clear that or a map on the same page
   renders on top of the modal instead of behind it. */
.modal-overlay { position: fixed; inset: 0; background: rgba(4, 10, 20, 0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 24px; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 78vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: 14px; font-weight: 700; }
.modal-close { background: none; border: none; color: var(--text-faint); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 16px 20px 20px; overflow-y: auto; }

.changelog-btn { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-muted); border-radius: 8px; padding: 6px 11px; font-size: 12.3px; font-weight: 600; cursor: pointer; margin-left: 12px; }
.changelog-btn:hover { color: var(--text); border-color: var(--line-strong); }
.changelog-entry { padding: 14px 0; border-top: 1px solid var(--line); }
.changelog-entry:first-child { padding-top: 0; border-top: none; }
.changelog-entry-head { display: flex; align-items: baseline; gap: 10px; }
.changelog-version { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--accent-strong); }
.changelog-date { font-size: 11px; color: var(--text-faint); }
.changelog-entry-title { font-size: 13px; font-weight: 650; margin-top: 3px; }
.changelog-notes { margin: 6px 0 0; padding-left: 18px; font-size: 12.3px; color: var(--text-muted); }
.changelog-notes li { margin-top: 3px; }

.app-footer { text-align: center; padding: 18px 24px 26px; font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.tile-label { font-size: 11.5px; color: var(--text-muted); }
.tile-value { font-size: 24px; font-weight: 650; margin-top: 6px; letter-spacing: -0.01em; }
.tile-delta { font-size: 11.5px; margin-top: 4px; }
.tile-delta.good { color: var(--good); }
.tile-delta.warn { color: var(--warn); }
.tile-delta.flat { color: var(--text-faint); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.pattern-name { font-weight: 650; font-size: 12.6px; }
.override-bar { display: flex; align-items: center; gap: 8px; }
.override-track { width: 68px; height: 7px; border-radius: 4px; background: var(--panel-2); overflow: hidden; flex-shrink: 0; }
.override-fill { height: 100%; border-radius: 4px; background: var(--accent); }
.override-pct { font-family: var(--mono); font-size: 11.3px; color: var(--text-muted); white-space: nowrap; }
.trend-dir { display: flex; align-items: center; gap: 4px; font-size: 11px; }

@media (max-width: 1180px) {
  .workbench { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .subheader { flex-direction: column; }
  .kv { grid-template-columns: 120px 1fr; }
  .pr-name { flex-basis: 130px; }
  .step-label { display: none; }
}

/* ---------- Auth / admin ---------- */
.admin-only { display: none; }
.super-admin-only { display: none; }
.multi-tenant-only { display: none; }
.company-switcher { margin-left: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 12.3px; font-weight: 600; cursor: pointer; }
.company-switcher:hover { border-color: var(--line-strong); }
.avatar[title] { cursor: pointer; }

.field input[type="password"] { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; font-family: var(--mono); }
.field input[type="password"]:focus { border-color: var(--accent); }
.field select { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--text); outline: none; font-family: var(--sans); }
.field select:focus { border-color: var(--accent); }
.btn.full { width: 100%; }

/* Autofilled inputs keep the app's own background instead of the browser's
   default light fill, in both themes. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
input:autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--panel-2) inset;
  box-shadow: 0 0 0 1000px var(--panel-2) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.login-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, var(--accent-wash), transparent 42%),
    radial-gradient(circle at 82% 78%, var(--accent-wash), transparent 46%),
    var(--bg);
}
.login-wrap::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 85%);
}
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 300px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 22px 20px; box-shadow: var(--shadow);
}
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; text-align: center; }
.login-wordmark { display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15; }
.login-word-main { font-size: 19px; letter-spacing: -0.01em; }
.login-word-sub { font-size: 13px; letter-spacing: 0.02em; }
.login-tagline { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.login-footnote { font-size: 11px; color: var(--text-faint); text-align: center; margin-top: 12px; }

.login-card .field { margin-bottom: 12px; }
.login-card .field label { font-size: 11.5px; margin-bottom: 4px; }
.login-card .btn.full { padding: 8px 14px; }

.input-icon { position: relative; }
.input-icon > svg { position: absolute; left: 11px; top: 30px; color: var(--text-faint); pointer-events: none; }
.input-icon input[type="text"] { padding-left: 32px; }
.input-icon input[type="password"] { padding-left: 32px; padding-right: 32px; }
.pw-toggle { position: absolute; right: 5px; top: 19px; background: none; border: none; padding: 7px; cursor: pointer; color: var(--text-faint); display: flex; border-radius: 6px; }
.pw-toggle:hover { color: var(--text); background: var(--panel-2); }
.pw-toggle.active { color: var(--accent); }

#usersTable td, #usersTable th { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); }
#usersTable td:last-child { display: flex; gap: 6px; flex-wrap: wrap; }

/* Shift Log */
.sl-compose { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel-2); }
.sl-compose textarea { width: 100%; min-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: var(--sans); color: var(--text); background: var(--panel); resize: vertical; outline: none; }
.sl-compose textarea:focus { border-color: var(--accent); }
.sl-compose-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sl-tag-select { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.sl-case-input { border: 1px solid var(--line-strong); background: var(--panel); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text); width: 160px; outline: none; }
.sl-case-input:focus { border-color: var(--accent); }
.sl-case-input::placeholder { color: var(--text-faint); }
.sl-pin-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }

.sl-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 10.8px; font-weight: 650; letter-spacing: 0.02em; white-space: nowrap; }
.sl-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.sl-tag.handoff { background: var(--accent-wash); color: var(--accent-strong); }
.sl-tag.handoff::before { background: var(--accent); }
.sl-tag.watch { background: var(--warn-wash); color: var(--warn); }
.sl-tag.watch::before { background: var(--warn); }
.sl-tag.heads_up { background: var(--critical-wash); color: var(--critical); }
.sl-tag.heads_up::before { background: var(--critical); }
.sl-tag.fyi { background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--line); }
.sl-tag.fyi::before { display: none; }
.sl-tag.resolved { background: var(--good-wash); color: var(--good); }
.sl-tag.resolved::before { background: var(--good); }

.sl-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 4px; }
.sl-filter-chip { display: inline-flex; align-items: center; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--text-muted); cursor: pointer; }
.sl-filter-chip.active { background: var(--accent); border-color: var(--accent); color: #06222a; }

.sl-pinned-card { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); margin-bottom: 10px; }
.sl-pinned-card:last-child { margin-bottom: 0; }
.sl-pin-icon { color: var(--text-faint); flex-shrink: 0; margin-top: 2px; }
.sl-resolve-btn { margin-left: auto; flex-shrink: 0; }

.sl-entry { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.sl-entry:first-child { border-top: none; }
.sl-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.sl-entry-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; }
.sl-author { font-weight: 650; font-size: 13px; }
.sl-time { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.sl-body { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sl-case-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; font-family: var(--mono); color: var(--accent-strong); text-decoration: none; }