/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   The Brief — FX layer styles (Threat Radar canvas,
   progress bar, card glow). Companion to brief-fx.js.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#fx-radar{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
#fx-radar.on{opacity:1}

.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:900;
  pointer-events:none;
  background:linear-gradient(90deg,#00D4FF 0%,#00AEEF 35%,#00897B 65%,#005F87 100%);
  transform-origin:0 50%;transform:scaleX(0);
}

.fx-glow{position:relative}
.fx-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    rgba(0,212,255,.055), rgba(0,174,239,.022) 40%, transparent 65%);
  z-index:1;
}
.fx-glow:hover::after{opacity:1}

@media (prefers-reduced-motion: reduce){
  #fx-radar,.fx-progress{display:none!important}
}

/* ── foyl loading "o" — shared platform loader ── */
.lso{position:relative;width:80px;height:80px;animation:lso-spin 3s linear infinite}
.lso span{position:absolute;width:7px;height:7px;border-radius:50%;
  animation:lso-pulse 1.6s ease-in-out infinite}
.lso-brand{font-family:var(--jakarta,'Plus Jakarta Sans',sans-serif);font-size:17px;font-weight:700;
  letter-spacing:-.02em;color:var(--tx);display:flex;align-items:baseline;gap:9px}
.lso-brand span{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tx3)}
@keyframes lso-spin{to{transform:rotate(360deg)}}
@keyframes lso-pulse{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.lso{animation:none}.lso span{animation:none;opacity:.8}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI overhaul — glassmorphism over the Threat Radar.
   Loaded after each page's inline styles, so these
   same-specificity rules win the cascade.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.page-title{font-family:'Plus Jakarta Sans',var(--font),sans-serif;font-weight:700;
  letter-spacing:-.03em;font-size:34px}

/* Accessible text hierarchy. Decorative and fill colors keep their original
   tokens; text uses dedicated foreground tokens with AA contrast. */
:root{
  --tx1:var(--tx);
  --tx3:#A19B94;
  --tx4:#9A948D;
  --danger-fg:#DF796F;
  --ok-fg:#4DB6AC;
  --on-accent:#020403;
}

body{font-size:15px}

.card{position:relative;background:rgba(10,13,12,.58);
  backdrop-filter:blur(16px) saturate(1.15);-webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(100,168,255,.1);border-radius:14px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease}
.card::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.32),rgba(0,137,123,.22),transparent)}
.card:hover{border-color:rgba(100,168,255,.18);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.card,.card-header,.card-header>*,.card-actions,.exec-body,.detail-inner,
.main-col,.content,.actor-card,.history-row,.history-row-left{min-width:0}
.page-header-inner{flex-wrap:wrap}
.page-header-inner>*,.modal-head-left,.news-content,.kev-entry-body{min-width:0}
.page-header-inner>div:last-child{max-width:100%;flex-wrap:wrap}
.card-header{border-bottom:1px solid rgba(100,168,255,.08);padding:16px 20px;
  flex-wrap:wrap;align-items:flex-start}
.card-title{font-size:15px;line-height:1.35;white-space:normal;flex-shrink:1}
.card-sub{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.card-actions{flex-wrap:wrap}
.exec-para,.detail-para{font-size:14px;line-height:1.75}
.news-summary,.kev-desc{font-size:13px;line-height:1.65}
.news-headline,.news-headline-link,.td-title,.ref-title{font-size:14px}
.kpi-label,.sb-product,.sb-group-label,.tb-section,.page-eyebrow,
.threat-table thead th,.ioc-table thead th,.actor-section-title{font-size:11px}
.kpi-sub,.page-domain,.card-sub,.td-actor,.td-status,.tab-btn,
.actor-drawer-meta,.ioc-group-header,.loading-hint{font-size:12px}
.copy-btn,.status-chip,.query-tool-label,.ref-url,.sector-chip,.ceo-toggle-btn,
.actor-ioc-row,.modal-head-tool,.history-meta,.history-dl{font-size:12px}
.sev-badge,.ioc-copy-btn,.threat-sector-chip,.trend-badge,.history-pill,
.mobile-nav-btn{font-size:11px}
.query-preview,.ioc-table tbody td,pre.modal-code{font-size:12px}
.query-preview,pre.modal-code{color:var(--cyan)}
.loading-hint{opacity:1}

/* Wide data remains contained without changing the browser's table layout. */
.card>table,.detail-inner>table,.ioc-group>table{width:100%;max-width:100%}
.query-preview,pre.modal-code{max-width:100%;overflow-x:auto}
.td-title,.news-headline,.news-headline-link,.news-summary,.kev-desc,
.actor-drawer-name,.actor-card,.history-meta,.history-date,.modal-head-title,
.week-theme-card{overflow-wrap:anywhere}
.actor-drawer{height:100dvh}
.actor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:12px;padding:16px 20px 20px}

.kv-danger,.sev-C{color:var(--danger-fg)}
.kv-teal,.kv-ok,.sev-M,.badge-ok{color:var(--ok-fg)}
.copy-btn.done,.ioc-copy-btn.done,.history-dl.done{color:var(--ok-fg)}
.sector-chip.active,.ceo-toggle-btn.active{color:var(--on-accent)}

.kpi-strip{background:rgba(8,10,9,.5);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.kpi-cell{transition:background .2s ease}
.kpi-cell:hover{background:rgba(100,168,255,.045)}

.sidebar,aside.sidebar{background:rgba(6,8,7,.72);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

.btn-ghost{transition:color .18s,border-color .18s,background .18s,transform .18s}
.btn-ghost:hover{color:var(--tx);border-color:var(--border3);
  background:rgba(100,168,255,.05);transform:translateY(-1px)}

@media(max-width:800px){
  body{font-size:15px}
  .page-title{font-size:26px!important}
  .card-header{padding:14px;gap:10px}
  .card-title{font-size:14px}
  .card-sub{font-size:12px}
  .kpi-label{font-size:11px}
  .kpi-sub{font-size:12px}
  .exec-para,.detail-para{font-size:14px;line-height:1.7}
  .news-summary,.kev-desc{font-size:13px}
  .threat-table,.threat-table .td-title{font-size:13px}
  .threat-table .td-num,.tab-btn,.query-preview,.ioc-table tbody td,
  pre.modal-code,.btn-history{font-size:12px}
  .card-actions{width:100%;margin-left:0}
  .history-drawer{width:min(100%,420px);max-width:100%;height:100dvh}
}