/* Shared navy header box ("nhero") for the tool pages: ETF lookup, theme ETFs, fund compare.
   Values match the Compare stocks header (layout B on the compare branch: .scmp-hero) so both boxes read the same.
   Merge note: the compare branch can switch .scmp-hero/.scmp-chip/.scmp-add/.scmp-go/.scmp-hero-foot to these classes. */
.nhero{position:relative;background:linear-gradient(135deg,#1A2D58 0%,#15203F 100%);color:#fff;border-radius:0;padding:16px 20px;margin:8px 0 14px;box-shadow:0 10px 28px rgba(10,17,36,.20)}
html[data-theme=dark] .nhero{box-shadow:0 10px 28px rgba(0,0,0,.45)}
.nhero::after{content:"";position:absolute;left:20px;right:20px;top:0;height:2px;background:linear-gradient(90deg,#3EC8C9,rgba(62,200,201,0));opacity:.9;border-radius:2px}
html[data-theme] body.ct .nhero h1{color:#fff!important;font:600 20px/30px var(--f-head,"General Sans",Inter,system-ui,sans-serif)!important;letter-spacing:-.01em!important;margin:0 0 12px!important;text-transform:none!important}
html[data-theme] body.ct .nhero.nhero-solo h1{margin:0!important}
.nhero form{margin:0}
.nhero-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nhero-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 14px;border-radius:999px;background:#fff;color:#15203F;font:600 15px/1 var(--f-body,Inter,system-ui,sans-serif);letter-spacing:.01em}
html[data-theme] body.ct .nhero a.nhero-chip{color:#15203F!important;text-decoration:none!important;border:0!important;padding:0 14px}
html[data-theme] body.ct .nhero a.nhero-chip:hover{background:#EEF2F7}
.nhero-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
html[data-theme] body.ct .nhero .nhero-chip a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:#5B6680!important;text-decoration:none!important;border:0!important;font-size:18px;line-height:1}
.nhero-chip a:hover{background:#EEF2F7}
.nhero-add{position:relative;display:inline-flex;align-items:center;gap:6px;flex:1 1 220px;max-width:340px;min-width:0}
.nhero-add input{flex:1;min-width:0}
.nhero-go{height:40px;cursor:pointer}   /* look = tools.css .tl-btn.pri (cyan fade, 4px) */
.nhero-ac{position:absolute;left:0;right:0;top:46px;z-index:30;background:var(--surface,#fff);border:1px solid var(--line,#E3E7EC);border-radius:12px;box-shadow:0 12px 32px rgba(10,17,36,.18);overflow:hidden;display:none}
html[data-theme] body.ct .nhero-ac a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:11px 14px;color:var(--ink)!important;text-decoration:none!important;border:0!important;font:400 14px/1.3 var(--f-body,Inter,sans-serif)}
.nhero-ac a b{min-width:52px;font-weight:600}.nhero-ac a span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nhero-ac a.on,.nhero-ac a:hover{background:var(--surface-2,#F3F5F8)}
.nhero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);font:400 13px/18px var(--f-body,Inter,system-ui,sans-serif);color:#B9C6DA}
.nhero-foot .lk{display:inline-flex;flex-wrap:wrap;gap:6px 16px}
html[data-theme] body.ct .nhero .nhero-foot a{color:#fff!important;font-weight:600;text-decoration:none!important;border:0!important;white-space:nowrap;background:none!important}
html[data-theme] body.ct .nhero .nhero-foot a:hover{text-decoration:underline!important;text-underline-offset:3px}
@media (max-width:700px){
 .nhero{padding:16px 16px 14px;border-radius:0}
 .nhero-add{flex-basis:100%;max-width:none}
 .nhero-chip{height:36px;padding:0 2px 0 11px;gap:6px;font-size:14px}
 html[data-theme] body.ct .nhero a.nhero-chip{padding:0 11px}
 html[data-theme] body.ct .nhero .nhero-chip a{width:26px;height:26px;font-size:17px}
 .nhero-chips{gap:6px}
 .nhero-go{height:38px}
}
/* a site-wide link colour rule carries an id; the :not(#…) bumps these to the same weight (same trick as .scmp) */
html[data-theme] body.ct .nhero .nhero-foot a:not(#nhero-x){color:#FFFFFF!important;text-decoration:none!important;border:0!important}
html[data-theme] body.ct .nhero .nhero-chip a:not(#nhero-x){color:#5B6680!important;text-decoration:none!important}
html[data-theme] body.ct .nhero a.nhero-chip:not(#nhero-x){color:#15203F!important;text-decoration:none!important}
html[data-theme] body.ct .nhero-ac a:not(#nhero-x){color:var(--ink)!important}