/* ============================================================================
   LiveThreat intelligence brief — ported VERBATIM to the Verisq site (CP229).

   Same markup, same stylesheet, same typefaces (Inter / JetBrains Mono / Bebas
   Neue). The ONLY difference from livethreat.ai is the accent colour, held in
   --vq-accent below. Everything else is byte-for-byte the LiveThreat rule.

   Do not restyle this file with the Verisq design system. The instruction is a
   pixel-perfect copy of the LiveThreat detail pages, colour scheme excepted.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&family=Bebas+Neue&display=swap');

:root {
    /* LiveThreat theme variables the brief page depends on, verbatim */
    --navy: #1a1a2e; --green: #16a34a; --green-bg: #dcfce7; --yellow: #d97706; --yellow-bg: #fef3c7;
    --red: #dc2626; --red-bg: #fee2e2; --blue: #2563eb; --blue-bg: #dbeafe;
    --txt: #1a1a1a; --txs: #4b5563; --txm: #9ca3af;
    --bg: #f5f5f5; --wh: #fff; --brd: #e5e7eb; --brl: #f3f4f6;
    --rad: 12px;
    --sh: 0 1px 3px rgba(0,0,0,.06); --shm: 0 4px 16px rgba(0,0,0,.08); --shl: 0 12px 40px rgba(0,0,0,.12);
    --font: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace;

    /* THE colour change. LiveThreat: #E8600A orange. Verisq: the brand gold.
       Two tones, because LiveThreat uses its orange both as a FILL (button, badge,
       rule) and as TEXT (links, breadcrumb, back link). Brand gold #FED33C is fine
       as a fill on white; as 14px text on white it is ~1.4:1 and unreadable. So
       fills take the brand gold and text takes the warm gold, which is the same
       split the Verisq site itself makes. Everything else on the page is
       LiveThreat's colour, untouched. */
    --vq-accent: #B8860B;                    /* text gold (dark goldenrod) — 3.6:1 on white, LiveThreat's orange sits at 3.4:1 */
    --vq-accent-fill: #FED33C;               /* brand gold: button and badge fills */
    --vq-accent-lt: #E8B62E;
    --vq-accent-dim: rgba(254,211,60,.14);
    --vq-accent-brd: rgba(254,211,60,.45);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body.lt-port { font-family: var(--font); background: var(--bg); color: var(--txt); -webkit-font-smoothing: antialiased; }
.bi { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; }

/* Nav — LiveThreat's nav rules, Verisq brand inside them */
.nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 0 48px; height: 68px; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--brd); }
.nav-logo img { height: 38px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--txs); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--vq-accent); }
.nav-cta { background: var(--vq-accent-fill); color: #0A0A0B; padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; }
.nav-spacer { height: 68px; }
.lt-footer { border-top: 1px solid var(--brd); padding: 28px 48px; font-size: 13px; color: var(--txm); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--wh); }
.lt-footer a { color: var(--txs); text-decoration: none; }
@media (max-width: 720px) { .nav { padding: 0 20px; } .nav-links { display: none; } .lt-footer { padding: 20px; } }

/* ── The brief page — LiveThreat's rules, verbatim ── */

    /* ── Loading / Not Found ── */
    .ia-loading { max-width:800px;margin:0 auto;padding:80px 20px;text-align:center;color:#6b7280; }
    .ia-spinner { width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:var(--vq-accent);border-radius:50%;animation:ia-spin 1s linear infinite;margin:0 auto 1rem; }
    @keyframes ia-spin { to { transform:rotate(360deg); } }
    .ia-notfound { max-width:600px;margin:0 auto;padding:80px 20px;text-align:center; }
    .ia-nf-icon { font-size:4rem;margin-bottom:1rem;line-height:0;display:flex;justify-content:center; }
    .ia-nf-icon > svg { width:64px;height:64px;stroke:#9ca3af;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round; }
    .ia-notfound h2 { font-size:1.5rem;font-weight:800;color:#1a1a2e;margin-bottom:.5rem; }
    .ia-notfound p { color:#6b7280;margin-bottom:1.5rem; }
    .ia-back { color:var(--vq-accent);font-weight:600;text-decoration:none; }
    .ia-back:hover { text-decoration:underline; }

    /* ── Hero Banner ── */
    .ia-hero { padding:0;margin-top:-1px; }
    .ia-hero-inner { max-width:860px;margin:0 auto;padding:48px 24px 40px; }
    .ia-breadcrumb { font-size:12px;margin-bottom:1.25rem;opacity:.7; }
    .ia-breadcrumb a { color:inherit;text-decoration:none; }
    .ia-breadcrumb a:hover { text-decoration:underline; }
    .ia-breadcrumb span { color:var(--vq-accent);font-weight:600; }

    .ia-badges { display:flex;align-items:center;gap:8px;margin-bottom:1rem;flex-wrap:wrap; }
    .ia-badge { font-size:11px;padding:4px 12px;border-radius:6px;font-weight:700;letter-spacing:.03em;display:inline-flex;align-items:center;gap:4px; }
    .ia-badge-type { background:var(--vq-accent-dim);color:var(--vq-accent);border:1px solid var(--vq-accent-brd); }
    .ia-badge-cat { background:rgba(59,130,246,.1);color:#3b82f6;border:1px solid rgba(59,130,246,.2); }

    .ia-title { font-size:2rem;font-weight:900;line-height:1.25;color:#0f172a;margin:0 0 1rem;letter-spacing:-.02em; }
    .ia-abstract { font-size:1.05rem;line-height:1.7;color:#334155;margin:0 0 1.25rem;max-width:720px; }
    .ia-meta-bar { display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b;flex-wrap:wrap; }

    /* ── Key Indicators ── */
    .ia-indicators { background:#fff;border-bottom:1px solid #e5e7eb; }
    .ia-indicators-inner { max-width:860px;margin:0 auto;padding:16px 24px;display:flex;gap:24px;overflow-x:auto;flex-wrap:wrap; }
    .ia-indicator { display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;min-width:fit-content; }
    .ia-ind-icon { font-size:1.25rem; }
    .ia-ind-label { font-size:11px;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
    .ia-ind-value { font-size:13px;font-weight:700;color:#0f172a; }

    /* ── Article Body ── */
    .ia-body-section { background:#fff; }
    .ia-body-inner { max-width:860px;margin:0 auto;padding:40px 24px 60px; }

    .ia-article-content { font-size:15px;line-height:1.85;color:#334155; }
    .ia-article-content h1 { font-size:1.5rem;font-weight:800;color:#0f172a;margin:2rem 0 .75rem;padding-bottom:.5rem;border-bottom:2px solid var(--vq-accent); }
    .ia-article-content h2 { font-size:1.25rem;font-weight:800;color:#0f172a;margin:2rem 0 .5rem;padding-left:12px;border-left:4px solid var(--vq-accent); }
    .ia-article-content h3 { font-size:1.1rem;font-weight:700;color:#1e293b;margin:1.5rem 0 .4rem; }
    .ia-article-content p { margin-bottom:.75rem; }
    .ia-article-content strong { color:#0f172a;font-weight:700; }
    .ia-article-content ul, .ia-article-content ol { padding-left:1.5rem;margin:.5rem 0 1rem; }
    .ia-article-content li { margin-bottom:.35rem; }
    .ia-article-content a { color:var(--vq-accent);text-decoration:none;font-weight:500; }
    .ia-article-content a:hover { text-decoration:underline; }
    .ia-article-content code { background:#f1f5f9;padding:2px 6px;border-radius:4px;font-size:.9em;color:#475569; }
    .ia-article-content blockquote { border-left:4px solid var(--vq-accent);padding:12px 16px;margin:1rem 0;background:#fff7ed;border-radius:0 8px 8px 0;color:#92400e;font-style:italic; }
    .ia-article-content hr { border:none;border-top:1px solid #e5e7eb;margin:2rem 0; }

    /* ── Source Attribution ── */
    .ia-source-box { margin-top:2rem;padding:20px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px; }
    .ia-source-label { font-size:13px;font-weight:700;color:#0369a1;margin-bottom:.5rem; }
    .ia-source-link { color:#0284c7;font-size:13px;word-break:break-all;text-decoration:none;display:block;margin-bottom:.5rem; }
    .ia-source-link:hover { text-decoration:underline; }
    .ia-ext { font-size:11px;margin-left:4px;opacity:.6; }
    .ia-source-note { font-size:12px;color:#6b7280;margin:0;line-height:1.5; }

    /* ── CTA Box ── */
    .ia-verisq-cta { margin-top:2.5rem;padding:1.25rem 1.5rem;background:#fbfbfd;border:1px solid #e9eaee;border-radius:10px; }
    .ia-vcta-eyebrow { display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;margin-bottom:.5rem; }
    .ia-vcta-eyebrow > svg { width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round; }
    .ia-vcta-head { font-size:1.05rem;font-weight:700;color:#0f172a;margin:0 0 .4rem;line-height:1.35; }
    .ia-vcta-body { font-size:14px;color:#475569;margin:0 0 .85rem;line-height:1.6;max-width:640px; }
    .ia-vcta-link { font-size:13.5px;font-weight:600;text-decoration:none; }
    .ia-vcta-link:hover { text-decoration:underline; }

    /* ── Navigation ── */
    .ia-nav-bar { margin-top:2rem;display:flex;justify-content:space-between;padding-top:1.5rem;border-top:1px solid #e5e7eb; }
    .ia-nav-bar a { color:var(--vq-accent);font-size:14px;font-weight:600;text-decoration:none; }
    .ia-nav-bar a:hover { text-decoration:underline; }

    @media (max-width: 768px) {
        .ia-title { font-size:1.5rem; }
        .ia-hero-inner { padding:32px 16px; }
        .ia-body-inner { padding:24px 16px 40px; }
        .ia-indicators-inner { flex-wrap:nowrap; }
    }


@code {
    [Parameter] public string Slug { get; set; } = "";

    private IntelligenceArticleDto? _article;
    private bool _loading = true;
    private List<IndicatorModel> _indicators = new();
    private VerisqCtaSelector.VerisqCta? _cta;

    private record IndicatorModel(string Icon, string Label, string Value, string Color);

    protected override async Task OnInitializedAsync()
    {
        try
        {
            _article = await BreachFeed.GetIntelligenceArticleAsync(Slug);
            if (_article != null)
            {
                BuildIndicators();
                _cta = VerisqCtaSelector.Select(
                    capabilityFocus: null,
                    category: _article.Category,
                    articleJson: _article.Json,
                    seed: _article.Id);
            }
        }
        catch { }
        _loading = false;
    }

    private void BuildIndicators()
    {
        if (_article == null) return;
        _indicators.Clear();

        // Severity
        if (!string.IsNullOrEmpty(_article.Severity))
            _indicators.Add(new(GetSeverityIcon(_article.Severity), "Severity", _article.Severity, GetSeverityColor(_article.Severity)));

        // Category

/* ── LiveThreat theme rules the listing pages depend on, verbatim ── */
@keyframes fu { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.sec-l { font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--vq-accent); margin-bottom: 14px; font-weight: 600; }
.btn-gh { color: var(--txs); text-decoration: none; font-size: 14px; font-weight: 600; padding: 9px 20px; border-radius: 8px; border: 1px solid var(--brd); transition: all .2s; display: inline-flex; align-items: center; gap: 8px; background: none; cursor: pointer; font-family: inherit; }
.btn-gh:hover { border-color: var(--vq-accent); color: var(--vq-accent); }
.btn-or { display: inline-flex; align-items: center; gap: 8px; background: var(--vq-accent-fill); color: #0A0A0B; font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 8px; text-decoration: none; transition: all .25s; box-shadow: 0 4px 20px rgba(254,211,60,.3); }
.btn-or:hover { background: var(--vq-accent-lt); transform: translateY(-1px); }
.btn-ol { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--vq-accent); font-size: 14px; font-weight: 700; padding: 10px 22px; border-radius: 8px; text-decoration: none; border: 1px solid var(--vq-accent); }
.btn-or > svg.bi, .btn-ol > svg.bi, .btn-gh > svg.bi { width: 14px; height: 14px; flex-shrink: 0; }
.ph { padding: 140px 48px 60px; background: var(--wh); position: relative; overflow: hidden; text-align: center; }
.ph::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(254,211,60,.06) 1px, transparent 0); background-size: 40px 40px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black, transparent); }
.ph-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; animation: fu .7s ease-out; }
.ph h1 { font-family: 'Bebas Neue'; font-size: clamp(42px, 5vw, 64px); line-height: .95; color: var(--navy); margin-bottom: 16px; }
.ph h1 .o, .ph h1 .hl { color: var(--vq-accent); } .ph h1 .g { color: var(--green); }
.ph p { font-size: 17px; color: var(--txs); line-height: 1.7; max-width: 560px; margin: 0 auto 28px; }
body.lt-port .nav-spacer { height: 0; }   /* .ph carries its own 140px top padding, as on LiveThreat */
body.lt-port.has-hero .nav-spacer { height: 0; }

/* ── Breach Watch — LiveThreat's page stylesheet, verbatim ── */

    .bw-stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--txm,#9ca3af)}
    .bw-tab{display:flex;align-items:center;gap:6px;padding:14px 18px;background:none;border:none;border-bottom:3px solid transparent;color:rgba(255,255,255,.45);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s}
    .bw-tab:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.03)}
    .bw-tab-active{color:var(--vq-accent)!important;border-bottom-color:var(--vq-accent)!important}
    .bw-tab-icon{font-size:16px}
    .bw-tab-count{font-size:10px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);padding:1px 6px;border-radius:8px;font-weight:700}
    .bw-tab-active .bw-tab-count{background:rgba(254,211,60,.2);color:var(--vq-accent)}
    .bw-sev-pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.5);padding:4px 10px;border-radius:12px;font-size:11px;cursor:pointer;transition:all .2s;font-weight:600}
    .bw-sev-pill:hover{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
    .bw-sp-on{font-weight:700}
    .bw-sp-critical.bw-sp-on{background:rgba(239,68,68,.15);border-color:#ef4444;color:#ef4444}
    .bw-sp-high.bw-sp-on{background:rgba(245,158,11,.15);border-color:#f59e0b;color:#f59e0b}
    .bw-sp-medium.bw-sp-on{background:rgba(59,130,246,.15);border-color:#3b82f6;color:#3b82f6}
    .bw-sp-low.bw-sp-on{background:rgba(34,197,94,.15);border-color:#22c55e;color:#22c55e}
    .bw-adv-toggle{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;transition:all .2s}
    .bw-adv-toggle:hover{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
    .bw-adv-on{background:rgba(254,211,60,.1);border-color:var(--vq-accent);color:var(--vq-accent)}
    .bw-clear-btn{background:none;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:4px 10px;border-radius:6px;font-size:10px;cursor:pointer;font-weight:600}
    .bw-clear-btn:hover{background:rgba(239,68,68,.1)}
    .bw-adv-panel{margin-top:12px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px}
    .bw-adv-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
    .bw-adv-row:last-child{margin-bottom:0}
    .bw-adv-group{flex:1;min-width:280px}
    .bw-adv-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.4);margin-bottom:6px}
    .bw-adv-chips{display:flex;flex-wrap:wrap;gap:4px}
    .bw-chip{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55);padding:3px 10px;border-radius:4px;font-size:11px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px}
    .bw-chip:hover{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
    .bw-chip-on{background:rgba(254,211,60,.15)!important;border-color:var(--vq-accent)!important;color:var(--vq-accent)!important}
    .bw-chip-ct{font-size:9px;opacity:.6;font-weight:700}
    .bw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    @media(max-width:1100px){.bw-grid{grid-template-columns:repeat(2,1fr)}}
    @media(max-width:700px){.bw-grid{grid-template-columns:1fr}}
    .bw-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;border:1px solid #e5e7eb}
    .bw-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
    .bw-card-header{display:block;position:relative;padding:18px 18px 36px;min-height:90px;text-decoration:none;cursor:pointer}
    .bw-cat-badge{display:inline-block;width:fit-content;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 14px;border-radius:5px;border:1px solid;line-height:1.4}
    .bw-lt-tag{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;background:rgba(254,211,60,.25);color:#fff;padding:3px 8px;border-radius:4px;letter-spacing:.03em}
    .bw-vendor-alert{position:absolute;top:12px;right:12px;font-size:10px;font-weight:700;color:#dc2626;background:rgba(254,242,242,.9);border:1px solid rgba(220,38,38,.25);padding:2px 8px;border-radius:4px;animation:bwpulse 2s infinite}
    @keyframes bwpulse{0%,100%{opacity:1}50%{opacity:.6}}
    .bw-card-icon{position:absolute;right:18px;bottom:-4px;font-size:48px;opacity:.45;line-height:1;pointer-events:none;filter:grayscale(15%)}
    .bw-card-body{padding:14px 18px 10px;flex:1;display:flex;flex-direction:column}
    .bw-card-title{color:#0f172a;font-size:15px;font-weight:700;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;margin-bottom:6px}
    .bw-card-title:hover{color:var(--vq-accent)}
    .bw-brief-label{display:block;font-size:10px;font-weight:700;color:var(--vq-accent);letter-spacing:.04em;margin-bottom:3px}
    .bw-card-summary{color:#64748b;font-size:13px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 8px;flex:1}
    .bw-facts{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:auto;padding-top:6px}
    .bw-fact{font-size:11px;color:#64748b;display:inline-flex;align-items:center;gap:3px;background:#f8fafc;padding:2px 8px;border-radius:4px}
    .bw-fact-hot{background:#fef2f2;color:#dc2626;font-weight:600}
    .bw-cve-pill{font-size:10px;background:#eff6ff;color:#2563eb;padding:2px 8px;border-radius:4px;text-decoration:none;font-weight:600;border:1px solid #bfdbfe}
    .bw-cve-pill:hover{background:#dbeafe}
    .bw-tax-row{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0;border-bottom:1px solid #f3f4f6;margin-bottom:4px}
    .bw-tax{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
    .bw-tax-ind{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
    .bw-tax-inc{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
    .bw-tax-atk{background:#fce7f3;color:#9d174d;border:1px solid #fbcfe8}
    .bw-tax-dat{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
    .bw-card-foot{display:flex;align-items:center;gap:6px;padding:10px 18px;border-top:1px solid #f1f5f9;font-size:11px;color:#94a3b8}
    .bw-sev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
    .bw-sev-label{font-weight:600;font-size:10px;text-transform:uppercase}
    .bw-ext-link{margin-left:auto;color:#94a3b8;text-decoration:none;font-size:14px;padding:2px 6px;border-radius:4px}
    .bw-ext-link:hover{background:#f3f4f6;color:var(--vq-accent)}
    .bw-brief-footer{display:block;padding:8px 18px;background:rgba(254,211,60,.06);border-top:1px solid rgba(254,211,60,.12);font-size:12px;font-weight:600;color:var(--vq-accent);text-decoration:none;text-align:center;transition:background .15s}
    .bw-brief-footer:hover{background:rgba(254,211,60,.12)}
    .bw-spin{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--orange,var(--vq-accent));border-radius:50%;animation:bwsp 1s linear infinite;margin:0 auto}
    @keyframes bwsp{to{transform:rotate(360deg)}}