/* ============================================================================
   ThreatMind shared design layer
   ----------------------------------------------------------------------------
   The component vocabulary the whole console is being aligned to. Every class
   here is `tm-` prefixed on purpose: .panel, .badge, .chip, .card and
   .stat-card are already defined by several page stylesheets (dashboard.css,
   soar.css, logs.css, seals.css, reports.css...) which stay loaded in <head>
   once their page has been visited, so an unprefixed name here would silently
   restyle pages it was never applied to.

   Loaded globally from index.html so any page can use it without waiting for a
   per-page <link> to resolve.
   ========================================================================= */

:root {
    /* Surfaces. Deliberately a hair lighter than --bg so panels read as raised
       against the app background rather than as holes cut out of it. */
    --tm-panel: #0a101c;
    --tm-panel-2: rgba(14, 22, 42, 0.55);
    --tm-panel-3: rgba(10, 16, 28, 0.62);
    --tm-head: #0c1424;
    --tm-line: rgba(148, 163, 184, 0.10);
    --tm-line-2: rgba(148, 163, 184, 0.20);
    --tm-dim: #64748b;

    /* Severity is a semantic ramp, separate from the --accent brand hue.
       These are the values the live threat map already renders with, so the
       map and the tables finally agree on what "high" looks like. */
    --tm-crit: #ff3b52;
    --tm-high: #ff8a1e;
    --tm-med: #ffd23f;
    --tm-low: #3ee6b0;
    --tm-ok: #22c55e;

    /* The app named Inter for years but never shipped or linked it, so every
       endpoint silently fell back to whatever system-ui resolved to. This makes
       that deterministic. Deployments are on-prem and may have no egress, so the
       stack is limited to faces that ship with the host OS; a distinctive face
       would need self-hosted woff2 in ui/web/assets. */
    --tm-sans: 'Segoe UI Variable Text', 'Segoe UI', system-ui, Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --tm-mono: ui-monospace, 'JetBrains Mono', 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
    --tm-r: 10px;
}

/* ── page furniture ─────────────────────────────────────────────────────── */

.tm-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--tm-line);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(11, 18, 32, 0.9), rgba(6, 11, 22, 0.85));
    box-shadow: 0 14px 36px -26px rgba(56, 189, 248, 0.28);
}

.tm-page-title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.tm-page-sub {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.tm-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tm-eyebrow {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* ── panels ─────────────────────────────────────────────────────────────── */

.tm-panel {
    background: var(--tm-panel);
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-r);
    padding: 15px 16px;
    min-width: 0;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.04);
}

.tm-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tm-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
    /* the inv-* layer sets uppercase muted h3s; a panel title inside one of
       those cards should still read as a title, not as a field label */
    text-transform: none;
}

.tm-panel-sub {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 11.5px;
}

.tm-grid { display: grid; gap: 14px; min-width: 0; }
.tm-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tm-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tm-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tm-g-2-1 { grid-template-columns: 2fr 1fr; }
.tm-g-1-2 { grid-template-columns: 1fr 2fr; }

@media (max-width: 1280px) {
    .tm-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tm-g3, .tm-g-2-1, .tm-g-1-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .tm-g2, .tm-g4 { grid-template-columns: 1fr; }
}

.tm-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-flex { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tm-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tm-hr { height: 1px; background: var(--tm-line); border: 0; margin: 2px 0; }
.tm-muted { color: var(--muted); }
.tm-dim { color: var(--tm-dim); }
.tm-small { font-size: 11.5px; }
.tm-nowrap { white-space: nowrap; }

/* Ellipsis truncation needs a different escape hatch per formatting context:
   a grid or flex item has to be allowed to shrink (min-width:0), while a table
   cell only truncates against a max-width. Using the table trick inside a grid
   collapses the label to nothing. */
.tm-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
td.tm-trunc, th.tm-trunc { max-width: 1px; }

.tm-mono {
    font-family: var(--tm-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.tm-num {
    font-family: var(--tm-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ── stat cards ─────────────────────────────────────────────────────────── */

.tm-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1100px) { .tm-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tm-stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    background: var(--tm-panel);
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-r);
}

/* The stripe is what makes a wall of counters scannable: colour encodes what
   needs attention before you have read a single number. */
.tm-stat::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0.55;
}
.tm-stat[data-tone="crit"]::after { background: var(--tm-crit); }
.tm-stat[data-tone="high"]::after { background: var(--tm-high); }
.tm-stat[data-tone="med"]::after  { background: var(--tm-med); }
.tm-stat[data-tone="ok"]::after   { background: var(--tm-ok); }

.tm-stat h4,
.tm-stat .tm-stat-label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.tm-stat-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.tm-stat-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
}

.tm-compact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.tm-compact {
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--tm-line);
    border-radius: 8px;
    background: var(--tm-panel-3);
}
.tm-compact span { display: block; color: var(--muted); font-size: 11px; line-height: 1.25; }
.tm-compact strong {
    display: block;
    margin-top: 3px;
    font-family: var(--tm-mono);
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── badges, dots, tags ─────────────────────────────────────────────────── */

.tm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.55;
    text-transform: uppercase;
    white-space: nowrap;
}
.tm-badge.critical { color: #ffd6dc; background: rgba(255, 59, 82, 0.16); border-color: rgba(255, 59, 82, 0.45); }
.tm-badge.high     { color: #ffddb8; background: rgba(255, 138, 30, 0.14); border-color: rgba(255, 138, 30, 0.42); }
.tm-badge.medium   { color: #fdf0bd; background: rgba(255, 210, 63, 0.13); border-color: rgba(255, 210, 63, 0.38); }
.tm-badge.low      { color: #c3f3e2; background: rgba(62, 230, 176, 0.12); border-color: rgba(62, 230, 176, 0.34); }
.tm-badge.info     { color: #c8e9fb; background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.34); }
.tm-badge.ok       { color: #c2f0d3; background: rgba(34, 197, 94, 0.13); border-color: rgba(34, 197, 94, 0.36); }
.tm-badge.neutral  { color: var(--muted); background: rgba(148, 163, 184, 0.09); border-color: var(--tm-line-2); }

.tm-dot {
    display: inline-block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--tm-dim);
}
.tm-dot.online  { background: var(--tm-ok); box-shadow: 0 0 7px rgba(34, 197, 94, 0.8); }
.tm-dot.warn    { background: var(--tm-high); box-shadow: 0 0 7px rgba(255, 138, 30, 0.7); }
.tm-dot.crit    { background: var(--tm-crit); box-shadow: 0 0 7px rgba(255, 59, 82, 0.7); }
.tm-dot.offline { background: var(--tm-dim); }

/* A live indicator has to actually look live, or it is just a green circle. */
.tm-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: var(--tm-ok);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.9);
    animation: tm-pulse 1.8s ease-in-out infinite;
}
.tm-live-dot.stale { background: var(--tm-high); box-shadow: 0 0 8px rgba(255, 138, 30, 0.85); }
.tm-live-dot.down  { background: var(--tm-crit); box-shadow: 0 0 8px rgba(255, 59, 82, 0.85); animation: none; }

@keyframes tm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.tm-tag {
    padding: 1px 6px;
    border: 1px solid var(--tm-line-2);
    border-radius: 5px;
    font-family: var(--tm-mono);
    font-size: 10.5px;
    color: var(--muted);
    white-space: nowrap;
}
.tm-tag.att {
    color: var(--accent);
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
}

/* ── tables ─────────────────────────────────────────────────────────────── */

.tm-tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--tm-line);
    border-radius: var(--tm-r);
    background: var(--tm-panel);
}

table.tm-tbl {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-size: 12.5px;
}

table.tm-tbl thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 9px 12px;
    background: var(--tm-head);
    border-bottom: 1px solid var(--tm-line-2);
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

table.tm-tbl tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--tm-line);
    vertical-align: middle;
}
table.tm-tbl tbody tr:last-child td { border-bottom: 0; }
table.tm-tbl tbody tr { transition: background 0.12s; }
table.tm-tbl tbody tr:hover { background: rgba(56, 189, 248, 0.05); }
table.tm-tbl tbody tr.sel { background: rgba(56, 189, 248, 0.10); }
table.tm-tbl tbody tr[data-click] { cursor: pointer; }

/* Severity stripe on the leading cell. Put class="tm-sev" on the first <td>
   and data-sev on the <tr>. */
td.tm-sev { border-left: 3px solid transparent; }
tr[data-sev="critical"] td.tm-sev { border-left-color: var(--tm-crit); }
tr[data-sev="high"]     td.tm-sev { border-left-color: var(--tm-high); }
tr[data-sev="medium"]   td.tm-sev { border-left-color: var(--tm-med); }
tr[data-sev="low"]      td.tm-sev { border-left-color: var(--tm-low); }
tr[data-sev="info"]     td.tm-sev { border-left-color: var(--accent); }

.tm-empty {
    padding: 26px;
    text-align: center;
    color: var(--tm-dim);
    font-size: 12.5px;
}

/* New rows in a streaming table announce themselves once, then settle. */
@keyframes tm-row-in {
    from { opacity: 0; transform: translateX(-8px); background: rgba(56, 189, 248, 0.16); }
    to   { opacity: 1; transform: none; }
}
.tm-row-new { animation: tm-row-in 0.5s ease both; }

/* ── lists, meters, bar rows ────────────────────────────────────────────── */

.tm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--tm-line);
    border-radius: 8px;
    background: var(--tm-panel-2);
}
.tm-li-main { flex: 1 1 auto; min-width: 0; }
.tm-li-title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-li-sub { margin-top: 1px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tm-meter {
    height: 6px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.14);
    overflow: hidden;
}
.tm-meter > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--accent);
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.tm-meter > i[data-tone="crit"] { background: var(--tm-crit); }
.tm-meter > i[data-tone="high"] { background: var(--tm-high); }
.tm-meter > i[data-tone="med"]  { background: var(--tm-med); }
.tm-meter > i[data-tone="ok"]   { background: var(--tm-ok); }

.tm-bar-row {
    display: grid;
    grid-template-columns: 150px 1fr 48px;
    align-items: center;
    gap: 11px;
    font-size: 12px;
}
.tm-bar-row .tm-num { font-size: 11.5px; }
@media (max-width: 640px) { .tm-bar-row { grid-template-columns: 110px 1fr 40px; } }

/* ── cards / board ──────────────────────────────────────────────────────── */

.tm-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}
@media (max-width: 1200px) { .tm-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tm-board { grid-template-columns: 1fr; } }

.tm-col-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; padding: 0 2px; }
.tm-col-head h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
}
.tm-col-head .n { font-family: var(--tm-mono); font-size: 11px; color: var(--tm-dim); }

.tm-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 9px;
    padding: 11px 12px;
    border: 1px solid var(--tm-line);
    border-left: 3px solid var(--tm-line-2);
    border-radius: 9px;
    background: var(--tm-panel-2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.tm-card:hover { background: rgba(56, 189, 248, 0.06); }
.tm-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tm-card.sel { box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.5); }
.tm-card[data-sev="critical"] { border-left-color: var(--tm-crit); }
.tm-card[data-sev="high"]     { border-left-color: var(--tm-high); }
.tm-card[data-sev="medium"]   { border-left-color: var(--tm-med); }
.tm-card[data-sev="low"]      { border-left-color: var(--tm-low); }

.tm-card-id { font-family: var(--tm-mono); font-size: 10.5px; color: var(--tm-dim); }
.tm-card-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tm-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }

.tm-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 99px;
    background: rgba(56, 189, 248, 0.16);
    color: var(--accent);
    font-family: var(--tm-mono);
    font-size: 9px;
    font-weight: 700;
}

/* ── timeline ───────────────────────────────────────────────────────────── */

.tm-tl {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    border-left: 1px solid var(--tm-line-2);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tm-tl li { position: relative; }
.tm-tl li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 99px;
    background: var(--tm-panel);
    border: 2px solid var(--accent);
}
.tm-tl li[data-state="done"]::before { background: var(--tm-ok); border-color: var(--tm-ok); }
.tm-tl li[data-state="run"]::before  { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18); }
.tm-tl li[data-state="fail"]::before { background: var(--tm-crit); border-color: var(--tm-crit); }
.tm-tl-t { font-size: 12.5px; font-weight: 600; }
.tm-tl-s { margin-top: 2px; font-size: 11px; color: var(--muted); }

/* ── feed ───────────────────────────────────────────────────────────────── */

.tm-feed { display: flex; flex-direction: column; gap: 6px; }

.tm-feed-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 7px 11px;
    border: 1px solid var(--tm-line);
    border-left-width: 3px;
    border-radius: 7px;
    background: var(--tm-panel-2);
}
.tm-feed-item[data-sev="critical"] { border-left-color: var(--tm-crit); }
.tm-feed-item[data-sev="high"]     { border-left-color: var(--tm-high); }
.tm-feed-item[data-sev="medium"]   { border-left-color: var(--tm-med); }
.tm-feed-item[data-sev="low"]      { border-left-color: var(--tm-low); }
.tm-feed-time { font-family: var(--tm-mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tm-feed-rule { font-family: var(--tm-mono); font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-feed-ctx { margin-top: 1px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── key/value ──────────────────────────────────────────────────────────── */

.tm-kv {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 14px;
    align-items: baseline;
    font-size: 12px;
}
.tm-kv dt { color: var(--muted); white-space: nowrap; }
.tm-kv dd { margin: 0; font-family: var(--tm-mono); font-size: 11.5px; overflow-wrap: anywhere; }

/* ── severity text helpers ──────────────────────────────────────────────── */

.tm-sev-critical { color: var(--tm-crit); }
.tm-sev-high     { color: var(--tm-high); }
.tm-sev-medium   { color: var(--tm-med); }
.tm-sev-low      { color: var(--tm-low); }

@media (prefers-reduced-motion: reduce) {
    .tm-live-dot, .tm-row-new { animation: none; }
    .tm-meter > i { transition: none; }
}

/* ── busy / loading states (js/busy.js) ─────────────────────────────────── */

.tm-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    opacity: 0.85;
    animation: tm-spin 0.7s linear infinite;
}
button.tm-busy { cursor: progress; opacity: 0.85; }
button.tm-busy .tm-spinner { margin-right: 7px; }
.tm-busy-label { white-space: nowrap; }
@keyframes tm-spin { to { transform: rotate(360deg); } }

.tm-skeleton {
    display: block;
    list-style: none;
    min-height: 14px;
    margin: 0 0 10px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(148,163,184,0.08) 0%, rgba(148,163,184,0.18) 40%, rgba(148,163,184,0.08) 80%);
    background-size: 240% 100%;
    animation: tm-shimmer 1.3s ease-in-out infinite;
}
.tm-skeleton-row { min-height: 52px; }
.tm-skeleton-value { display: inline-block; width: 64px; min-height: 26px; margin: 0; vertical-align: middle; }
@keyframes tm-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.tm-loading-row td { padding: 18px; color: var(--muted); text-align: center; }
.tm-loading-row .tm-spinner { margin-right: 8px; }

.toast-action {
    margin-left: 8px;
    padding: 3px 10px;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .tm-spinner { animation-duration: 2.4s; }
    .tm-skeleton { animation: none; }
}

/* ── Entity intel hover card (logs-view.js showIntelTooltip) ──────────────────────
   Global on purpose: the card is attached to <body> and appears on any route
   that renders entity pivots, so its styles cannot live in a page sheet the
   router switches off. Fixed positioning in viewport coordinates, clamped by
   the script, so it never widens the page. */
.intel-tooltip {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 260px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    padding: 11px 12px;
    background: rgba(11, 18, 32, 0.98);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.7);
    color: var(--text, #e2e8f0);
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.intel-tooltip[hidden] { display: none !important; }
.intel-tooltip.visible { opacity: 1; }
.intel-tooltip h4 {
    margin: 0 0 8px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent, #38bdf8);
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
.intel-tooltip .intel-stat { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: 11.5px; }
.intel-tooltip .intel-stat .label { color: var(--muted, #94a3b8); flex: 0 0 auto; }
.intel-tooltip .intel-stat .value { font-weight: 600; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.intel-tooltip .intel-verdict { display: block; line-height: 1.4; overflow-wrap: anywhere; }
.intel-tooltip .intel-loading { color: var(--muted, #94a3b8); }
.intel-tooltip .ecm-rep-malicious { color: #f87171; font-weight: 600; }
.intel-tooltip .ecm-rep-suspicious { color: #fbbf24; font-weight: 600; }
.intel-tooltip .ecm-rep-clean { color: #4ade80; }
.intel-tooltip .ecm-rep-benign { color: #86efac; }
.intel-tooltip .ecm-rep-unknown { color: var(--muted, #94a3b8); }

/* ── Shell top bar: global search (TM-11) ─────────────────────────────── */
.app-topbar {
    display: flex;
    justify-content: flex-end;
    margin: -14px 0 14px;
}
.app-topbar[hidden] { display: none; }
.global-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(460px, 100%);
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--tm-line-2);
    background: var(--tm-panel-2);
}
.global-search:focus-within { border-color: rgba(56, 189, 248, 0.6); }
.gs-icon { width: 16px; height: 16px; color: var(--tm-dim); flex: 0 0 auto; }
.global-search input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.gs-kbd {
    font-size: 10px;
    color: var(--tm-dim);
    border: 1px solid var(--tm-line-2);
    border-radius: 4px;
    padding: 1px 5px;
    font-family: inherit;
}
.gs-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 4600;
    display: grid;
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--tm-line-2);
    background: var(--tm-head);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    max-height: 60vh;
    overflow: auto;
}
.gs-results[hidden] { display: none; }
.gs-result {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "type label" "type detail";
    column-gap: 10px;
    text-align: left;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font: inherit;
}
.gs-result.is-active,
.gs-result:hover { background: rgba(56, 189, 248, 0.12); }
.gs-type {
    grid-area: type;
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
}
.gs-label { grid-area: label; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-detail { grid-area: detail; font-size: 11px; color: var(--tm-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .app-topbar { margin: 0 0 12px; }
    .gs-kbd { display: none; }
}

/* ── Playbook run view (TM-07) ────────────────────────────────────────── */
.pbr {
    border: 1px solid var(--tm-line-2);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--tm-panel-3);
}
.pbr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pbr-name { font-weight: 700; font-size: 13px; }
.pbr-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
}
.pbr-tone-ok { color: var(--tm-ok); }
.pbr-tone-warn { color: var(--tm-med); }
.pbr-tone-bad { color: var(--tm-crit); }
.pbr-tone-info { color: var(--accent); }
.pbr-tone-muted { color: var(--tm-dim); }
.pbr-timer {
    margin-left: auto;
    font-family: var(--tm-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--muted);
}
.pbr-meta { font-size: 11px; color: var(--tm-dim); margin: 4px 0 8px; }
.pbr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pbr-step { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; }
.pbr-dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    border: 2px solid var(--tm-dim);
}
.pbr-step-running .pbr-dot { border-color: var(--accent); background: var(--accent); animation: pbr-pulse 1s ease-in-out infinite; }
.pbr-step-done .pbr-dot { border-color: var(--tm-ok); background: var(--tm-ok); }
.pbr-step-failed .pbr-dot { border-color: var(--tm-crit); background: var(--tm-crit); }
.pbr-step-waiting_approval .pbr-dot { border-color: var(--tm-med); }
.pbr-step-excluded .pbr-dot,
.pbr-step-skipped .pbr-dot { border-style: dashed; }
.pbr-step-simulated .pbr-dot { border-color: var(--accent); }
.pbr-step-title { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.pbr-step-label { font-weight: 600; }
.pbr-step-target { color: var(--muted); font-family: var(--tm-mono, ui-monospace, monospace); font-size: 11px; }
.pbr-step-state { font-size: 11px; color: var(--tm-dim); }
.pbr-step-waiting_approval .pbr-step-state { color: var(--tm-med); }
.pbr-step-failed .pbr-step-state { color: var(--tm-crit); }
.pbr-missing { font-size: 12px; color: var(--tm-dim); }
@keyframes pbr-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    .pbr-step-running .pbr-dot { animation: none; }
}