/* =====================================================================
   VG Sample EBS Assessment — styles
   Palette & type aligned to the live valueglobal.net site:
     primary blue #1e5bff · lighter #4a7bff/#6fa8ff · deep-navy gradients
     #0a1733→#1e3a75 · light tints #f7fafd/#eef3fa · Inter typeface.
   Data-semantic (cholesterol) colors kept: green/purple/orange.
   ===================================================================== */
:root{
  --blue:#1E5BFF; --blue-d:#1746CC; --blue-l:#4A7BFF; --blue-xl:#6FA8FF;
  --ink:#0A1733; --navy:#0F2046; --navy2:#162C5C; --navy3:#1E3A75;
  --text:#2B3A55; --muted:#6B7A95;
  --bg:#F7FAFD; --tint:#EEF3FA; --tint2:#E2EAF5; --edge:#CFDBEB; --white:#fff;
  --eligible:#00B388; --retain:#614767; --ineligible:#FF8D6D;
  --shadow:0 1px 2px rgba(10,23,51,.06),0 8px 24px rgba(10,23,51,.07);
  --radius:12px;
  --font:'Inter',ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.55; font-size:15px;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font); color:var(--ink); margin:0 0 .4em; line-height:1.2; letter-spacing:-.01em}
h1{font-size:31px; font-weight:800} h2{font-size:24px; font-weight:700}
h3{font-size:18px; font-weight:700} h4{font-size:15px; font-weight:700}
a{color:var(--blue); text-decoration:none} a:hover{text-decoration:underline}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace,"Consolas",Menlo,monospace}

/* ---- brand bar (mirrors valueglobal.net) ---- */
.brandbar{background:#fff; border-bottom:1px solid var(--edge); padding:0 22px; display:flex;
  align-items:center; gap:16px; height:64px}
.brandbar .bb-logo{display:flex; align-items:center}
.brandbar .bb-logo img{height:34px; width:auto; display:block}
.brandbar .bb-spacer{flex:1}
.brandbar .bb-back{color:var(--muted); font-size:13.5px; font-weight:600; white-space:nowrap}
.brandbar .bb-back:hover{color:var(--blue); text-decoration:none}
.brandbar .bb-cta{background:var(--blue); color:#fff; font-weight:700; font-size:13.5px;
  padding:9px 18px; border-radius:8px; box-shadow:0 4px 12px rgba(30,91,255,.28); white-space:nowrap}
.brandbar .bb-cta:hover{background:var(--blue-l); text-decoration:none; color:#fff}

/* ---- app nav (secondary, de-emphasized) ---- */
.appnav{background:var(--tint); border-bottom:1px solid var(--edge); padding:0 22px; display:flex;
  align-items:center; gap:18px; height:46px; position:sticky; top:0; z-index:20; box-shadow:var(--shadow)}
.appnav .appnav-title{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap}
.appnav-links{display:flex; gap:16px; flex-wrap:wrap}
.appnav a.navlink{color:var(--text); font-size:13.5px; padding:12px 2px; border-bottom:2px solid transparent}
.appnav a.navlink:hover{color:var(--blue); text-decoration:none}
.appnav a.navlink.active{color:var(--blue); border-bottom-color:var(--blue); font-weight:600}

/* ---- breadcrumb ---- */
.crumb{background:#fff; border-bottom:1px solid var(--edge); padding:9px 22px; font-size:12.5px; color:var(--muted)}
.crumb a{color:var(--blue)} .crumb .sep{margin:0 8px; color:var(--edge)}

/* ---- layout ---- */
.wrap{max-width:1180px; margin:0 auto; padding:26px 22px 60px}
.row{display:flex; gap:18px; flex-wrap:wrap}
.col{flex:1; min-width:260px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.disclaimer{background:var(--tint); border:1px solid var(--tint2); color:#2c4a8c;
  border-radius:10px; padding:10px 14px; font-size:12.5px; margin:0 0 20px}
.disclaimer b{color:var(--ink)}

/* ---- cards & tiles ---- */
.card{background:#fff; border:1px solid var(--edge); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); margin-bottom:18px}
.card h3{margin-top:0}
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px}
.tile{background:#fff; border:1px solid var(--edge); border-left:4px solid var(--blue);
  border-radius:10px; padding:14px 16px; box-shadow:var(--shadow)}
.tile .k{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.tile .v{font-size:27px; font-weight:800; color:var(--ink); margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile .s{font-size:12px; color:var(--muted); margin-top:2px}
.tile.alert{border-left-color:var(--ineligible)}
.tile.good{border-left-color:var(--eligible)}
.tile.clickable{cursor:pointer; transition:.12s} .tile.clickable:hover{background:var(--tint); border-color:var(--blue-l)}

/* ---- hero ---- */
.hero{background:linear-gradient(135deg,var(--ink) 0%,var(--navy2) 55%,var(--navy3) 100%);
  color:#fff; border-radius:16px; padding:36px; margin-bottom:22px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,255,.45),transparent 70%)}
.hero>*{position:relative; z-index:1}
.hero .eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#9fb6ff; font-weight:600}
.hero h1{color:#fff; font-size:34px; margin:10px 0 8px; max-width:780px}
.hero p{color:#d4def5; max-width:740px; margin:6px 0}
.hero .co{font-size:14px; color:#fff; margin-top:14px}
.btn{display:inline-block; background:var(--blue); color:#fff; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:9px; margin:16px 10px 0 0; border:none; cursor:pointer; box-shadow:0 6px 16px rgba(30,91,255,.35)}
.btn:hover{background:var(--blue-l); text-decoration:none; color:#fff}
.btn.ghost{background:transparent; border:1.5px solid #ffffff55; color:#fff; box-shadow:none}
.btn.navy{background:var(--blue)}

/* ---- tables ---- */
.toolbar{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.search{padding:9px 12px; border:1px solid var(--edge); border-radius:8px; font-size:13px; min-width:240px; font-family:var(--font)}
.search:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,91,255,.15)}
table.grid{width:100%; border-collapse:collapse; font-size:13.5px; background:#fff}
table.grid th{background:var(--navy); color:#fff; text-align:left; padding:9px 11px; font-weight:600;
  font-size:12.5px; cursor:pointer; white-space:nowrap; position:sticky; top:46px}
table.grid th.num,table.grid td.num{text-align:right; font-variant-numeric:tabular-nums}
table.grid th:hover{background:var(--navy3)}
table.grid th .arr{opacity:.6; font-size:10px; margin-left:4px}
table.grid td{padding:8px 11px; border-bottom:1px solid #eef2f8}
table.grid tbody tr:nth-child(even){background:#f9fbfe}
table.grid tbody tr:hover{background:var(--tint)}
table.grid td .tname{font-family:ui-monospace,"Consolas",monospace; font-size:12.5px; color:var(--blue-d); font-weight:600}
.rowlink{cursor:pointer}
.rollup td{color:var(--muted); font-style:italic; background:#f4f7fc!important}
.bar-cell{position:relative}
.bar-cell .bar{position:absolute; left:0; top:0; bottom:0; background:rgba(30,91,255,.10); z-index:0}
.bar-cell span{position:relative; z-index:1}

/* badges */
.badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; color:#fff; white-space:nowrap}
.b-eligible{background:var(--eligible)} .b-retain{background:var(--retain)} .b-ineligible{background:var(--ineligible)}
.tag{display:inline-block; font-size:11px; padding:2px 7px; border-radius:5px; background:var(--tint); border:1px solid var(--edge); color:var(--text)}
.pill-online{color:#0a7d54; font-weight:600; font-size:12px}

/* ---- charts ---- */
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; margin-top:10px}
.legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.hbars{display:flex; flex-direction:column; gap:9px}
.hbar{display:grid; grid-template-columns:140px 1fr 92px; align-items:center; gap:10px; font-size:13px}
.hbar .lab{color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hbar .track{background:var(--tint); border-radius:6px; height:18px; overflow:hidden}
.hbar .fill{height:100%; background:linear-gradient(90deg,var(--blue),var(--blue-xl)); border-radius:6px}
.hbar .val{text-align:right; color:var(--text); font-variant-numeric:tabular-nums}
.hbar.clickable{cursor:pointer} .hbar.clickable:hover .lab{text-decoration:underline; color:var(--blue)}

/* growth-driver list (fills the "problem compounds" card under the chart) */
.kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted)}
.growth-why{list-style:none; padding:0; margin:9px 0 0; display:flex; flex-direction:column; gap:7px}
.growth-why li{font-size:12.5px; color:var(--text); padding-left:17px; position:relative; line-height:1.45}
.growth-why li::before{content:"+"; position:absolute; left:0; top:-1px; color:var(--ineligible); font-weight:800}
.growth-why b{color:var(--ink)}

/* highlight band (working-set reduction) */
.savings{background:linear-gradient(135deg,var(--ink),var(--navy3)); color:#fff; border-radius:14px;
  padding:22px 24px; text-align:center; box-shadow:var(--shadow); margin-bottom:18px}
.savings .n{font-size:40px; font-weight:800; color:#fff; letter-spacing:-.02em}
.savings .n b{color:var(--blue-xl)}

/* roadmap */
.roadmap{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px}
.phase{background:#fff; border:1px solid var(--edge); border-top:4px solid var(--blue); border-radius:10px; padding:14px}
.phase .ph{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.phase h4{margin:5px 0 6px}
.phase p{font-size:12.5px; margin:0; color:var(--text)}

/* motions */
.motions{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.motion{padding:16px; border-radius:12px; color:#fff}
.motion.arch{background:linear-gradient(135deg,var(--eligible),#0a8f70)}
.motion.ret{background:linear-gradient(135deg,var(--retain),#4a3550)}
.motion.acc{background:linear-gradient(135deg,var(--blue),var(--navy3))}
.motion h4{color:#fff} .motion p{font-size:12.5px; margin:6px 0 0; color:#eef2ff}

footer{border-top:1px solid var(--edge); background:#fff; color:var(--muted); font-size:12px;
  padding:20px 22px; text-align:center}
@media(max-width:720px){
  .brandbar{height:auto; flex-wrap:wrap; padding:10px 22px; gap:10px}
  .appnav{height:auto; flex-wrap:wrap; padding:6px 22px} .appnav .appnav-title{display:none}
  table.grid th{top:0}
}