/* =================================================================
   ARKLIGHT — Visual Brief layout (Workforce Intelligence)
   Multi-panel research dashboard with Chart.js panels.
   Used by: research/*-shortage.html (electrician, metal-fab, machinist)
   ================================================================= */

body{
  background:#05080E;
  background-image:
    linear-gradient(rgba(200,217,228,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,217,228,0.04) 1px, transparent 1px);
  background-size:44px 44px;
}

/* ============== HEADER ============== */
.vb-head{position:relative;padding:140px 72px 36px;border-bottom:2px solid var(--amber-400);overflow:hidden;}
.vb-head::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 0% 0%, rgba(245,161,74,.08) 0%, transparent 60%);pointer-events:none;z-index:0;}
.vb-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(200,217,228,.55);text-decoration:none;margin-bottom:28px;transition:color .2s;position:relative;z-index:1;}
.vb-back:hover{color:var(--amber-400);}
.vb-head-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px;position:relative;z-index:1;}
.vb-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber-400);margin-bottom:14px;}
.vb-title{font-family:var(--font-display);font-size:clamp(34px,4.6vw,52px);font-weight:500;line-height:1;letter-spacing:-.035em;color:#F4F8FB;margin:0;}
.vb-title span{color:rgba(200,217,228,.55);font-weight:300;font-size:.55em;font-family:var(--font-mono);letter-spacing:.04em;display:inline-block;margin-left:8px;text-transform:none;}
.vb-meta{font-family:var(--font-mono);font-size:11px;color:rgba(200,217,228,.5);text-align:right;letter-spacing:.06em;line-height:1.8;text-transform:uppercase;}
.vb-meta b{color:var(--amber-400);}
@media (max-width:900px){.vb-head{padding:120px 32px 28px;}.vb-meta{text-align:left;}}

/* ============== LEAD ============== */
.vb-lead-wrap{padding:32px 72px 0;}
.vb-lead{font-size:15px;line-height:1.6;color:rgba(232,241,246,.78);max-width:880px;border-left:2px solid rgba(200,217,228,.12);padding-left:18px;margin:0;}
.vb-lead b{color:#F4F8FB;font-weight:500;}
@media (max-width:900px){.vb-lead-wrap{padding:24px 32px 0;}}

/* ============== PANEL GRID ============== */
.vb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding:56px 72px;}
.vb-panel{background:rgba(14,28,48,.5);border:1px solid rgba(200,217,228,.14);border-radius:4px;padding:28px 28px 22px;position:relative;overflow:hidden;backdrop-filter:blur(20px);}
.vb-panel.wide{grid-column:1/-1;}
.vb-panel::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--amber-400),transparent 60%);opacity:.6;}
.vb-panel::after{content:'';position:absolute;top:0;right:0;width:12px;height:12px;border-top:1px solid rgba(200,217,228,.32);border-right:1px solid rgba(200,217,228,.32);}

.vb-panel-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;}
.vb-panel-num{font-family:var(--font-mono);font-size:11px;color:var(--amber-400);border:1px solid rgba(245,161,74,.32);background:rgba(245,161,74,.08);padding:2px 8px;border-radius:2px;font-weight:500;letter-spacing:.06em;}
.vb-panel-title{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.015em;color:#F4F8FB;margin:0;}
.vb-panel-sub{font-size:12px;color:rgba(200,217,228,.5);margin:0 0 20px;font-family:var(--font-mono);letter-spacing:.04em;}

.vb-chart{position:relative;height:300px;}
.vb-chart.tall{height:340px;}

.vb-callout{position:absolute;font-family:var(--font-mono);background:var(--ember-400);color:#fff;font-weight:500;font-size:11px;padding:5px 10px;border-radius:2px;letter-spacing:.06em;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.5);text-transform:uppercase;}

.vb-keyfig{display:flex;gap:28px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(200,217,228,.08);flex-wrap:wrap;}
.vb-keyfig>div{font-family:var(--font-mono);}
.vb-keyfig .k{font-size:10px;color:rgba(200,217,228,.5);letter-spacing:.18em;text-transform:uppercase;}
.vb-keyfig .v{font-family:var(--font-display);font-size:24px;font-weight:500;color:#F4F8FB;margin-top:4px;letter-spacing:-.02em;}
.vb-keyfig .v.amber{color:var(--amber-400);}
.vb-keyfig .v.blue{color:#6E8EA8;}
.vb-keyfig .v.ember{color:var(--ember-400);}

.vb-flag{font-family:var(--font-mono);font-size:10.5px;color:rgba(200,217,228,.5);margin-top:16px;padding-left:18px;position:relative;line-height:1.55;letter-spacing:.02em;}
.vb-flag::before{content:'▲';position:absolute;left:0;top:0;color:var(--amber-400);font-size:9px;}

/* ============== SOURCES FOOTER ============== */
.vb-sources{padding:36px 72px 80px;border-top:1px solid rgba(200,217,228,.1);background:#06090F;}
.vb-sources-inner{max-width:1080px;font-family:var(--font-mono);font-size:11px;color:rgba(200,217,228,.5);line-height:1.75;letter-spacing:.02em;}
.vb-sources-inner b{color:rgba(232,241,246,.78);font-weight:500;}

@media (max-width:900px){
  .vb-grid{grid-template-columns:1fr;padding:40px 24px;gap:18px;}
  .vb-sources{padding:32px 24px 64px;}
  .vb-panel{padding:24px 22px 20px;}
}