/* MYFGuide design system v9 — "Ledger"
   ---------------------------------------------------------------------------
   POINT OF VIEW: a precision instrument for Indian markets. Financial-print
   rigour (measured columns, hairlines, a real type scale) fused with terminal
   precision (mono numerals, dense tables). Light, quiet, and expensive —
   restraint carries the premium, not decoration.

   TYPE — a deliberate three-role stack, no Inter, no Roboto:
     Fraunces          display  — wordmark, H1, statement band ONLY (never on a
                                  data surface, so no screen reads "editorial")
     Schibsted Grotesk UI/body  — drawn for news media: institutional, legible
     IBM Plex Mono     data     — every numeral, the market-data signature

   COLOUR — five, and only five: ink, paper, one accent (sienna), plus green/red
   which are semantic (market direction), never decorative.

   Contract: every v5–v8 class name and CSS variable name is preserved, so all
   19 pages reskin from this one file with no HTML changes. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- surface + ink ---- */
  --paper:#F4F5F6;
  --card:#FFFFFF;
  --card2:#F0F2F4;
  --ink:#101418;
  --mut:#5C6672;
  --dim:#6E7784;                /* AA-compliant on white (4.6:1) — was #8D95A0 at 3.0:1 */
  --hair:#E9ECEF;
  --hair2:#D8DCE2;
  /* ---- the single accent (restraint = premium) ---- */
  --saffron:#B4491B;            /* deep sienna — the one brand colour */
  --saffron-bg:#F7EBE4;
  --navy:#1B4A6B;               /* interactive/links only */
  --navy2:#143850;
  /* ---- semantic market direction ---- */
  --green:#0A7A52;
  --red:#C0392F;
  --amber:#8F6104;
  --green-bg:#E6F2ED;
  --red-bg:#FAEAE8;
  --amber-bg:#F5EFE2;
  --green-line:#1FA173;
  --red-line:#D9564A;
  /* ---- elevation: barely there ---- */
  --shadow:0 1px 2px rgba(16,20,24,.035),0 2px 8px rgba(16,20,24,.04);
  --shadow-lift:0 2px 6px rgba(16,20,24,.05),0 12px 30px rgba(16,20,24,.07);
  --r-card:14px;
  --r-ctl:9px;
  --side:246px;
  --stick:0px;
  /* ---- fluid type scale: one system, phone → desktop (principle 7) ---- */
  --t-hero:clamp(2.4rem,1.4rem + 4.2vw,4.4rem);
  --t-1:clamp(1.7rem,1.25rem + 1.7vw,2.45rem);
  --t-2:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --t-3:1.0625rem;
  --t-body:.9375rem;
  --t-sm:.8125rem;
  --t-xs:.6875rem;
  /* ---- spacing scale ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:72px;
  /* ---- motion that whispers (principle 6) ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:180ms;
  --dur-slow:280ms;
  /* ---- families ---- */
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Schibsted Grotesk',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,'Cascadia Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.005em;}
.up{color:var(--green);}
.down{color:var(--red);}
/* Dense numerals in the mono face — the market-data signature. Big display
   values (index board, scores) stay in the UI face on purpose. */
td.num,.tape-item,.stat .v,.d-stat .v,.gauge .n,.breadth .seg b,.range .lbls,.range-meter .lbls,.field label .v,.count{font-family:var(--mono);font-variant-numeric:tabular-nums;}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px;}

/* ================= Sidebar (desktop) =================
   The masthead becomes a fixed left rail. Pure CSS — the markup is untouched. */
.mast{background:var(--card);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:50;}
.mast-in{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:58px;}
.logo{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:-0.7px;color:var(--ink);}
.logo em{font-style:normal;color:var(--saffron);}
.nav{display:flex;gap:1px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.nav::-webkit-scrollbar{display:none;}
.nav a{padding:17px 12px;font-size:13.5px;font-weight:500;color:var(--mut);letter-spacing:-0.01em;position:relative;transition:color .14s,background .14s;white-space:nowrap;}
.nav a:hover{color:var(--ink);}
.nav a.on{color:var(--ink);font-weight:700;}
.nav a.on::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--saffron);border-radius:2px;}
.tricolor{height:3px;display:flex;}
.tricolor span{flex:1;}
.tricolor span:nth-child(1){background:var(--saffron);}
.tricolor span:nth-child(2){background:#E7EAEE;}
.tricolor span:nth-child(3){background:var(--green);}



/* ---------- Ticker tape ---------- */
.tape{border-bottom:1px solid var(--hair);background:var(--card);overflow:hidden;white-space:nowrap;height:36px;display:flex;align-items:center;}
.tape-track{display:inline-flex;animation:tape 48s linear infinite;padding-left:100%;}
/* Hover-pause removed. The strip is the TOPMOST element on the page, so a
   pointer resting anywhere near the top of the screen - which is where it
   naturally sits - froze the tape indefinitely and made it look broken.

   The cost is that the ticker links are now a moving target. Accepted: the
   index cards in the fold below are the real click targets for the same
   instruments, and a strip that stops whenever the mouse drifts up is worse
   than one that is awkward to click. */
@keyframes tape{to{transform:translateX(-100%);}}
.tape-item{display:inline-flex;gap:7px;align-items:center;padding:0 22px;font-size:12.5px;color:var(--ink);}
.tape-item .sym{color:var(--dim);font-weight:700;letter-spacing:.01em;font-family:var(--body);}

/* ---------- Layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:30px 26px 72px;}
.wrap-narrow{max-width:860px;margin:0 auto;padding:30px 26px 72px;}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);margin-bottom:10px;}
.status-line{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mut);margin-bottom:18px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none;}
.dot.live{background:var(--green);box-shadow:0 0 0 3px rgba(10,138,92,.16);animation:blink 2.4s infinite;}
.dot.warn{background:var(--amber);}
@keyframes blink{50%{opacity:.4;}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid var(--hair2);}
.page-head h1{font-family:var(--disp);font-weight:700;font-size:var(--t-1);letter-spacing:-.02em;line-height:1.05;
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 0;}
.page-head .sub{font-size:14.5px;color:var(--mut);margin-top:8px;max-width:680px;line-height:1.5;}
.status{font-size:12.5px;color:var(--mut);}

h2.sec{font-family:var(--body);font-weight:800;font-size:20px;letter-spacing:-0.6px;margin-bottom:14px;padding-left:13px;position:relative;}
h2.sec::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;background:var(--saffron);border-radius:2px;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;}
.sec-head h2{font-family:var(--body);font-weight:800;font-size:19px;letter-spacing:-0.6px;padding-left:13px;position:relative;}
.sec-head h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;background:var(--saffron);border-radius:2px;}
.sec-head a{font-size:13px;color:var(--navy);font-weight:700;}
.sec-head a:hover{text-decoration:underline;text-underline-offset:2px;}

/* ---------- Card base ---------- */
.panel,.idx,.tbl-wrap,.calc,.detail,.guide,.notice,.breadth,.band{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--shadow);}

/* ---------- Index board ---------- */
.idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:30px;}
.idx{padding:17px 19px;transition:transform .16s,box-shadow .16s;}
.idx:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.idx .lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);}
.idx .val{font-variant-numeric:tabular-nums;font-size:28px;font-weight:800;letter-spacing:-1.3px;margin:7px 0 3px;line-height:1;}
.idx .chg{font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:700;}
/* Hero stat: the lead index card renders dark, echoing the reference's
   "headline number" block. Everything else stays light and quiet. */
.idx-grid .idx:first-child{background:var(--ink);border-color:var(--ink);color:#fff;}
.idx-grid .idx:first-child .lbl{color:rgba(255,255,255,.62);}
.idx-grid .idx:first-child .up{color:#4FD69C;}
.idx-grid .idx:first-child .down{color:#FF8A93;}

/* ---------- Breadth strip ---------- */
.breadth{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:15px 19px;margin-bottom:30px;font-size:13.5px;}
.breadth .seg{display:flex;align-items:center;gap:7px;}
.breadth .seg b{font-variant-numeric:tabular-nums;font-size:16px;}
.breadth-bar{flex:1;min-width:160px;height:10px;display:flex;overflow:hidden;border-radius:6px;}
.breadth-bar span{height:100%;}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;}
th{padding:11px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair2);text-align:left;white-space:nowrap;}
td{padding:12px 11px;font-size:14px;border-bottom:1px solid var(--hair);}
tr:last-child td{border-bottom:none;}
td.num,th.num{text-align:right;letter-spacing:-0.01em;}
tr.rowlink,tbody tr.click{cursor:pointer;transition:background .12s;}
tr.rowlink:hover,tbody tr.click:hover{background:var(--card2);}
tbody tr.sel{background:var(--saffron-bg);}
.co-name,.co{font-weight:700;letter-spacing:-0.01em;}
.co-sub{font-size:11.5px;color:var(--dim);font-weight:500;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:30px;}
@media(max-width:860px){.two-col{grid-template-columns:1fr;}}
.panel{overflow:hidden;}
.panel-h{padding:14px 19px;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.panel-h .t{font-family:var(--body);font-size:15px;font-weight:800;letter-spacing:-0.35px;color:var(--ink);}
.panel-b{padding:17px 19px;}
.panel table td:first-child,.panel table th:first-child{padding-left:19px;}
.panel table td:last-child,.panel table th:last-child{padding-right:19px;}
.panel-link{font-size:12.5px;color:var(--navy);font-weight:700;}
.panel-link:hover{text-decoration:underline;text-underline-offset:2px;}
.panel.boxed .panel-h{background:transparent;}
.panel.boxed .panel-h .t{font-family:var(--body);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);}
.panel.boxed .panel-b{padding:17px 19px;}

/* ---------- Buttons & inputs ---------- */
.btn,button{font-family:var(--body);font-size:13.5px;font-weight:700;padding:9px 17px;border:1px solid var(--hair2);background:var(--card);color:var(--ink);cursor:pointer;border-radius:999px;display:inline-block;transition:all .14s;letter-spacing:-0.01em;}
.btn:hover,button:hover{border-color:var(--dim);background:var(--card2);}
.btn.primary,button.primary{background:var(--ink);border-color:var(--ink);color:#fff;}
.btn.primary:hover,button.primary:hover{background:#000;border-color:#000;}
button:disabled{opacity:.5;cursor:default;}
select,input[type=text]{font-family:var(--body);font-size:13.5px;padding:9px 13px;border:1px solid var(--hair2);background:var(--card);color:var(--ink);border-radius:999px;transition:border-color .14s,box-shadow .14s;}
select{border-radius:var(--r-ctl);}
select:focus,input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,80,126,.13);}
input[type=text]::placeholder{color:var(--dim);}
input[type=range]{width:100%;accent-color:var(--saffron);}

/* ---------- Filters bar ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--hair);border-bottom:none;border-radius:var(--r-card) var(--r-card) 0 0;box-shadow:var(--shadow);padding:14px 17px;}
.filters input[type=text]{width:210px;}
.count{margin-left:auto;font-size:12.5px;color:var(--mut);font-weight:600;}
.tbl-wrap{border-radius:0 0 var(--r-card) var(--r-card);overflow-x:auto;}
.tbl-wrap table{min-width:880px;}
.tbl-wrap th{background:var(--card);position:sticky;top:var(--stick);cursor:pointer;user-select:none;z-index:2;box-shadow:inset 0 -1px 0 var(--hair2);}
@media(min-width:1080px){
  /* On desktop the widest table still fits the content column, so drop the
     horizontal scroller entirely. With no scroll-container ancestor the sticky
     header pins to the VIEWPORT as the page scrolls — no nested scrolling, and
     the first row is never hidden underneath it. */
  .tbl-wrap{overflow:visible;}
}
.tbl-wrap th:hover{color:var(--ink);}
.tbl-wrap td:first-child,.tbl-wrap th:first-child{padding-left:19px;}
.tbl-wrap tr:last-child td{border-bottom:none;}

/* ---------- Badges, risk, gauges ---------- */
.badge{display:inline-block;padding:4px 11px;font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;}
.b-buy{background:var(--green-bg);color:var(--green);}
.b-hold{background:var(--amber-bg);color:var(--amber);}
.b-avoid{background:var(--red-bg);color:var(--red);}
.risk-low{color:var(--green);font-weight:800;font-size:12px;}
.risk-med{color:var(--amber);font-weight:800;font-size:12px;}
.risk-high{color:var(--red);font-weight:800;font-size:12px;}
.warn-tag{font-size:11px;color:var(--amber);font-weight:600;}
.gauge{display:flex;align-items:center;gap:7px;}
.gauge .n{font-variant-numeric:tabular-nums;font-weight:700;font-size:13px;min-width:20px;}
.gauge .bar{flex:1;height:6px;background:var(--hair2);min-width:44px;border-radius:3px;overflow:hidden;}
.gauge .fill{height:100%;display:block;border-radius:3px;}
.tag{display:inline-block;padding:4px 11px;font-size:12px;font-weight:700;margin:2px;border-radius:999px;}
.t-pos{background:var(--green-bg);color:var(--green);}
.t-warn{background:var(--amber-bg);color:var(--amber);}

/* ---------- Screener detail ---------- */
.detail{padding:21px 23px;display:none;margin-top:16px;}
.detail.open{display:block;}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.d-head h2{font-family:var(--body);font-weight:800;font-size:21px;letter-spacing:-0.6px;}
.d-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px;}
.d-stat{border:1px solid var(--hair);border-radius:var(--r-ctl);padding:10px 13px;background:var(--card2);}
.d-stat .l{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);font-weight:700;}
.d-stat .v{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;margin-top:3px;}
.d-note{font-size:13px;color:var(--mut);background:var(--card2);border-left:3px solid var(--saffron);border-radius:var(--r-ctl);padding:12px 15px;margin-top:14px;line-height:1.6;}

/* ---------- Range meter ---------- */
.range,.range-meter{margin:6px 0 14px;}
.range-meter{margin:0;padding:17px 19px;}
.range .track,.range-meter .track{height:8px;background:var(--hair2);position:relative;margin:9px 0 5px;border-radius:5px;}
.range .prog,.range-meter .prog{position:absolute;inset:0;border-radius:5px;}
.range .marker,.range-meter .marker{position:absolute;top:-4px;width:3px;height:16px;background:var(--ink);border-radius:2px;}
.range .lbls,.range-meter .lbls{display:flex;justify-content:space-between;font-size:12px;color:var(--mut);margin-top:5px;}

/* ---------- Stat grids ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;}
.stat{padding:13px 19px;border-bottom:1px solid var(--hair);border-right:1px solid var(--hair);}
.stat:nth-child(2n){border-right:none;}
.stat:nth-last-child(-n+2){border-bottom:none;}
.stat .l{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700;}
.stat .v{font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;margin-top:3px;}
.score-block{padding:19px;}
.score-n{font-variant-numeric:tabular-nums;font-size:46px;font-weight:800;letter-spacing:-2.2px;line-height:1;}
.score-bar{height:8px;background:var(--hair2);margin:12px 0;border-radius:5px;overflow:hidden;}
.score-fill{height:100%;border-radius:5px;}
.note{font-size:12.5px;color:var(--mut);line-height:1.6;padding:14px 19px;border-top:1px solid var(--hair);}
/* Pill range selector with a solid-ink active state */
.ranges{display:flex;gap:5px;flex-wrap:wrap;}
.ranges button{font-size:12px;padding:5px 12px;font-variant-numeric:tabular-nums;border-radius:999px;font-weight:700;background:var(--card2);border-color:transparent;color:var(--mut);}
.ranges button:hover{background:var(--hair);color:var(--ink);}
.ranges button.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------- CTA band ---------- */
.band{padding:27px 29px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap;}
.band h3{font-family:var(--body);font-weight:800;font-size:20px;margin-bottom:5px;letter-spacing:-0.6px;}
.band p{font-size:14px;color:var(--mut);max-width:600px;line-height:1.5;}

/* ---------- Notices, boxes, guides ---------- */
.notice{border-left:4px solid var(--amber);padding:16px 19px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px;}
.notice .l strong{display:block;font-size:14px;margin-bottom:2px;}
.notice .l span{color:var(--mut);font-size:13px;}
.g-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 24px;margin-bottom:22px;}
@media(max-width:700px){.g-grid{grid-template-columns:1fr;}}
.g-ok{color:var(--green);font-size:14px;line-height:1.95;font-weight:600;}
.redbox{background:var(--red-bg);border-left:4px solid var(--red);border-radius:var(--r-ctl);padding:15px 18px;color:#8E2027;line-height:2;margin:0 0 26px;font-size:14px;}
.greenbox{background:var(--green-bg);border-left:4px solid var(--green);border-radius:var(--r-ctl);padding:15px 18px;color:#08633F;margin:0 0 26px;font-size:14px;line-height:1.7;}

.guide{border:1px solid var(--hair);border-top:none;background:var(--card);}
.guide:first-of-type{border-top:1px solid var(--hair);border-radius:var(--r-card) var(--r-card) 0 0;box-shadow:var(--shadow);}
.guide:last-of-type{border-radius:0 0 var(--r-card) var(--r-card);}
.guide summary{padding:16px 20px;cursor:pointer;font-weight:700;font-size:14.5px;list-style:none;display:flex;align-items:center;gap:11px;letter-spacing:-0.01em;}
.guide summary::-webkit-details-marker{display:none;}
.guide summary::before{content:'+';font-variant-numeric:tabular-nums;font-weight:700;width:14px;color:var(--saffron);font-size:16px;}
.guide[open] summary::before{content:'\2212';}
.guide summary .n{color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums;font-weight:700;}
.guide-body{padding:19px 21px;font-size:14px;line-height:1.8;color:#3C434C;border-top:1px solid var(--hair);}
.guide-body p{margin-bottom:11px;}
.guide-body p:last-child{margin-bottom:0;}
.guide-body ul{margin:9px 0 13px 20px;}
.guide-body li{margin-bottom:6px;}
.guide-body h4{font-family:var(--body);font-size:14.5px;font-weight:800;margin:15px 0 7px;color:var(--ink);}
.guide-body h4:first-child{margin-top:0;}
.guide-body code{background:var(--card2);border:1px solid var(--hair);padding:1px 7px;border-radius:6px;font-size:13px;color:var(--ink);font-family:var(--mono);font-weight:500;}
.guide-body a{color:var(--navy);font-weight:700;}
.guide-body a:hover{text-decoration:underline;text-underline-offset:2px;}
.term{display:grid;grid-template-columns:150px 1fr;gap:2px 16px;padding:9px 0;border-bottom:1px solid var(--hair);}
.term:last-child{border-bottom:none;}
.term .k{font-weight:700;font-size:13px;color:var(--ink);}
.term .d{color:#3C434C;}

/* ---------- Comparison tables ---------- */
table.cmp,table.cats{margin-bottom:30px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--shadow);border-collapse:separate;border-spacing:0;overflow:hidden;}
table.cmp th,table.cats th{background:var(--card2);}
table.cmp td:first-child{font-weight:700;color:var(--mut);width:190px;}
table.cats td:first-child{font-weight:700;width:160px;}
table.cmp td,table.cmp th,table.cats td,table.cats th{padding:12px 16px;vertical-align:top;}
table.cmp tr:last-child td,table.cats tr:last-child td{border-bottom:none;}

/* ---------- Calculator ---------- */
.calc{overflow:hidden;margin-bottom:30px;}
.calc-in{display:grid;grid-template-columns:1fr 1fr;}
@media(max-width:760px){.calc-in{grid-template-columns:1fr;}}
.calc-form{padding:23px 25px;border-right:1px solid var(--hair);}
@media(max-width:760px){.calc-form{border-right:none;border-bottom:1px solid var(--hair);}}
.field{margin-bottom:20px;}
.field:last-child{margin-bottom:0;}
.field label{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--mut);margin-bottom:8px;letter-spacing:.05em;text-transform:uppercase;}
.field label .v{color:var(--ink);font-weight:700;font-size:14px;text-transform:none;letter-spacing:0;}
.calc-out{padding:23px 25px;background:var(--card2);}
.out-stat{margin-bottom:17px;}
.out-stat .l{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:700;}
.out-stat .v{font-variant-numeric:tabular-nums;font-size:23px;font-weight:800;letter-spacing:-.7px;margin-top:3px;}
.out-diff{border:1px solid var(--hair);border-left:4px solid var(--saffron);border-radius:var(--r-ctl);background:var(--card);padding:14px 16px;margin-top:4px;}
.out-diff .l{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:700;}
.out-diff .v{font-variant-numeric:tabular-nums;font-size:25px;font-weight:800;color:var(--saffron);letter-spacing:-.7px;}
.out-diff p{font-size:13px;color:var(--mut);margin-top:7px;line-height:1.6;}

/* ---------- Misc ---------- */
.crumb{font-size:13px;color:var(--mut);margin-bottom:16px;}
.crumb a{color:var(--navy);font-weight:700;}
.crumb a:hover{text-decoration:underline;text-underline-offset:2px;}
.err{padding:64px 20px;text-align:center;color:var(--red);font-size:15px;}
.skel{background:linear-gradient(90deg,#EDEFF2 25%,#E3E6EB 50%,#EDEFF2 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:6px;color:transparent!important;}
@keyframes sk{to{background-position:-200% 0;}}
.disclaimer{margin-top:18px;font-size:12px;color:var(--dim);line-height:1.65;padding-top:16px;}
footer{border-top:1px solid var(--hair2);padding:24px 26px;max-width:1240px;margin:36px auto 0;font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- Global search ---------- */
.gsearch{position:relative;flex:1;max-width:360px;margin:0 20px;}
.gsearch input{width:100%;font-size:13.5px;padding:10px 14px 10px 34px;border-radius:999px;background:var(--card2);border-color:transparent;}
.gsearch input:focus{background:var(--card);}
/* magnifier glyph inside the pill */
.gsearch::before{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:var(--dim);pointer-events:none;z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") center/contain no-repeat;}
.gsearch-dd{position:absolute;top:calc(100% + 7px);left:0;right:0;background:var(--card);border:1px solid var(--hair2);border-radius:14px;box-shadow:var(--shadow-lift);z-index:70;max-height:340px;overflow:auto;display:none;}
.gsearch-dd.open{display:block;}
.gsearch-it{padding:11px 14px;cursor:pointer;display:flex;align-items:baseline;gap:10px;font-size:13.5px;border-bottom:1px solid var(--hair);}
.gsearch-it:last-child{border-bottom:none;}
.gsearch-it:hover,.gsearch-it.act{background:var(--card2);}
.gsearch-it .sy{font-weight:800;flex:none;}
.gsearch-it .nm{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:12.5px;}
.gsearch-it .sc{color:var(--dim);font-size:11px;flex:none;font-weight:700;}
@media(min-width:1080px){
  /* search sits between the wordmark and the nav in the top bar */
  .gsearch{max-width:320px;margin:0;flex:1 1 220px;}
}

/* ---------- Per-instrument pin buttons (injected by pip.js) ---------- */
.myf-pin{float:right;margin:0 0 0 8px;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--hair2);background:var(--card);
  color:var(--dim);cursor:pointer;transition:background .14s,color .14s,border-color .14s;}
.myf-pin:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.myf-pin svg{flex:none;}
a.idx{position:relative;display:block;}
a.idx .myf-pin{position:absolute;top:12px;right:12px;float:none;margin:0;}
.idx-grid .idx:first-child .myf-pin{background:transparent;border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.8);}
.idx-grid .idx:first-child .myf-pin:hover{background:#fff;border-color:#fff;color:var(--ink);}
#myf-pip-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:10000;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;
  box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
#myf-pip-toast.on{opacity:1;transform:translate(-50%,0);}

/* ---------- Hover preview card (injected by watch.js) ----------
   Point at any instrument anywhere on the site to see its trend and numbers. */
#myf-hover{position:fixed;z-index:9998;width:302px;background:var(--card);border:1px solid var(--hair2);
  border-radius:16px;box-shadow:var(--shadow-lift);display:none;opacity:0;pointer-events:none;
  transition:opacity .13s ease;overflow:hidden;}
#myf-hover.on{opacity:1;}
.hv-hd{display:flex;gap:12px;align-items:flex-start;padding:13px 15px 9px;}
.hv-nm{font-weight:800;font-size:13.5px;line-height:1.25;letter-spacing:-.01em;}
.hv-sub{font-size:11px;color:var(--dim);margin-top:2px;}
.hv-px{margin-left:auto;text-align:right;flex:none;}
.hv-p{font-family:var(--mono);font-weight:600;font-size:14px;}
.hv-c{font-family:var(--mono);font-weight:600;font-size:11.5px;}
.hv-spark{padding:0 13px 8px;}
.hv-grid{border-top:1px solid var(--hair);}
.hv-s{padding:6px 15px;display:flex;justify-content:space-between;gap:10px;font-size:11.5px;border-bottom:1px solid var(--hair);}
.hv-s:last-child{border-bottom:none;}
.hv-s span{color:var(--mut);}
.hv-s b{font-family:var(--mono);font-weight:600;text-align:right;}
.hv-badges{padding:9px 15px 0;display:flex;gap:8px;align-items:center;}
.hv-risk{font-size:11px;color:var(--mut);font-weight:600;}
.hv-ft{padding:8px 15px 11px;font-size:10.5px;color:var(--dim);}
.hv-load{padding:24px 15px;text-align:center;color:var(--mut);font-size:12.5px;}
@media(hover:none){#myf-hover{display:none!important;}}
@media(max-width:1079px){
  .gsearch{max-width:300px;margin:0 14px;}
}
@media(max-width:820px){.gsearch{display:none;}}

/* Below the rail breakpoint the masthead behaves as a top bar again. */
@media(max-width:1079px){
  :root{--stick:59px;}
}
@media(max-width:640px){
  .mast-in{height:52px;padding:0 16px;}
  .logo{font-size:18px;}
  .nav a{padding:15px 8px;font-size:12.5px;}
  .nav a.on::after{left:8px;right:8px;}
  .wrap,.wrap-narrow{padding:22px 16px 56px;}
  .idx .val{font-size:24px;}
  .page-head h1{font-size:25px;}
  :root{--stick:53px;}
  table.cmp td:first-child,table.cats td:first-child{width:auto;}
  .term{grid-template-columns:110px 1fr;}
  footer{padding:24px 16px;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* ===========================================================================
   v9 "Ledger" — system layer
   Principle 4 (hierarchy that breathes), 6 (motion that whispers),
   7 (mobile designed, not shrunk), 8 (the invisible expensive stuff).
   =========================================================================== */

/* ---- 1. Wordmark: the one place the display face is allowed to perform ---- */
.logo{font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;font-weight:700;letter-spacing:-.03em;}
.logo em{font-style:italic;}

/* ---- 2. Section headers: grotesk, quieter, tighter to their content ---- */
h2.sec,.sec-head h2{font-size:var(--t-2);font-weight:700;letter-spacing:-.015em;}
h2.sec::before,.sec-head h2::before{width:3px;}
.eyebrow{font-size:var(--t-xs);letter-spacing:.16em;}

/* ---- 3. Hierarchy that breathes: give sections real air ---- */
.wrap{padding-top:var(--s-6);padding-bottom:var(--s-8);}
.idx-grid,.breadth,.two-col{margin-bottom:var(--s-6);}
.sec-head{margin-bottom:var(--s-4);}
.page-head{padding-bottom:var(--s-5);margin-bottom:var(--s-6);}

/* ---- 4. Statement band (homepage front door) ---- */
.hero-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:var(--r-card);padding:clamp(28px,4vw,56px) clamp(22px,4vw,52px);margin-bottom:var(--s-6);}
.hero-band h1{font-family:var(--disp);font-weight:700;font-size:var(--t-hero);line-height:.98;
  letter-spacing:-.035em;max-width:16ch;font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 1;}
.hero-band h1 em{font-style:italic;color:#E8946A;}
.hero-band p{margin-top:var(--s-4);max-width:52ch;font-size:clamp(.95rem,.9rem + .3vw,1.1rem);
  line-height:1.55;color:rgba(255,255,255,.72);}
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--s-6);margin-top:var(--s-5);
  padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.14);}
.hero-stat .k{font-family:var(--mono);font-size:clamp(1.25rem,1.1rem + .7vw,1.75rem);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.hero-stat .l{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:3px;font-weight:600;}
/* coded art direction — a ledger rule, not stock imagery */
.hero-band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 64px);}

/* ---- 5. Motion that whispers: one easing, short, and always opt-out-able ---- */
.idx,.panel,.btn,button,.nav a,tr.rowlink,tbody tr.click,.myf-pin,.chip{
  transition-timing-function:var(--ease);transition-duration:var(--dur);}
.idx:hover{transform:translateY(-1px);}       /* was -2px: quieter */

/* ---- 6. The invisible expensive stuff ---- */
:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:0 0 var(--r-ctl) 0;font-weight:700;font-size:var(--t-sm);}
.skip:focus{left:0;}
::selection{background:var(--saffron);color:#fff;}

/* ---- 7. Mobile: designed, not shrunk ---- */
@media(max-width:1079px){
  /* every interactive target clears 44px */
  .nav a{padding:14px 13px;min-height:44px;display:flex;align-items:center;}
  .btn,button{min-height:40px;}
  .myf-pin{width:30px;height:30px;}
  .ranges button{min-height:36px;padding:7px 14px;}
}
@media(max-width:640px){
  /* the phone gets its own rhythm, not a squeezed desktop grid */
  .idx-grid{grid-template-columns:1fr 1fr;gap:var(--s-2);}
  .idx{padding:var(--s-3) var(--s-4);}
  .idx .val{font-size:1.3rem;letter-spacing:-.03em;}
  .idx .lbl{font-size:9.5px;letter-spacing:.09em;}
  /* the lead index card spans full width — it is the headline number */
  .idx-grid .idx:first-child{grid-column:1 / -1;padding:var(--s-4) var(--s-5);}
  .idx-grid .idx:first-child .val{font-size:2.1rem;}
  /* breadth reads as a stacked strip, not a cramped row */
  .breadth{gap:var(--s-3) var(--s-4);padding:var(--s-4);}
  .breadth-bar{order:99;min-width:100%;}
  /* dense tables: drop low-signal columns rather than shrink them to mush */
  .tbl-wrap table{min-width:0;}
  .tbl-wrap th:nth-child(n+7),.tbl-wrap td:nth-child(n+7){display:none;}
  .hero-stats{gap:var(--s-4);width:100%;}
  .hero-stat{flex:1 1 40%;}
  footer{flex-direction:column;gap:var(--s-2);}
}

/* ---- 8. Respect the user's motion preference (already partly set above) ---- */
@media(prefers-reduced-motion:reduce){
  .idx:hover{transform:none;}
  html{scroll-behavior:auto;}
}

/* ---- v10.5: pin buttons were floated inside table cells, so they escaped the
   cell box and landed on the row boundary. Anchor them absolutely inside their
   own cell instead, and make sticky headers fully opaque so no row shows
   through them. ---- */
tbody tr[data-pip-on] > td{position:relative;}
tbody tr[data-pip-on] .myf-pin{
  float:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);
  margin:0;opacity:.3;}
tbody tr[data-pip-on]:hover .myf-pin,
tbody tr[data-pip-on] .myf-pin:focus-visible{opacity:1;}
td:has(> .myf-pin){padding-right:32px;}

/* headers must always sit above the rows they pin over */
.tbl-wrap th,table thead th{background:var(--card);z-index:5;}
.tbl-wrap thead,table thead{position:relative;z-index:5;}

/* the 44px touch-target rule was inflating the pin to 40px inside a 49px row */
.myf-pin{min-height:0!important;min-width:0;padding:0;line-height:1;}
@media(max-width:1079px){.myf-pin{width:24px;height:24px;}}

/* ===========================================================================
   v11 — motion layer
   Apple's motion signature is restraint: long easing, short travel, nothing
   bouncy, and everything obeys prefers-reduced-motion. Content is visible by
   default and only animates once the observer marks it — so if JS fails, the
   page still renders fully rather than staying blank.
   =========================================================================== */
:root{
  --ease-out:cubic-bezier(.16,.84,.44,1);   /* long, decelerating, no overshoot */
  --dur-reveal:760ms;
}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
  will-change:opacity,transform;}
.reveal.in{opacity:1;transform:none;}

/* ---- headline numbers ease between values instead of snapping ---- */
.idx .val,.hero-stat .k,.px .p{transition:color 420ms var(--ease-out);}
.tick-up{color:var(--green-line)!important;}
.tick-down{color:var(--red-line)!important;}

/* ---- controls answer the pointer with weight, not bounce ---- */
.btn,button,.ranges button,.chip{transition:background 260ms var(--ease-out),
  color 260ms var(--ease-out),border-color 260ms var(--ease-out),transform 200ms var(--ease-out);}
.btn:active,button:active,.chip:active{transform:scale(.975);}
.nav a{transition:color 240ms var(--ease-out),background 240ms var(--ease-out);}
.panel{transition:border-color 320ms var(--ease-out);}
tbody tr.click,tr.rowlink{transition:background 200ms var(--ease-out);}
.myf-pin{transition:opacity 260ms var(--ease-out),background 200ms var(--ease-out),
  color 200ms var(--ease-out),border-color 200ms var(--ease-out);}

/* ---- the hover preview arrives, it does not pop ---- */
#myf-hover{transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out);
  transform:translateY(6px) scale(.99);}
#myf-hover.on{transform:none;}

/* ---- honour the OS setting: no motion at all ---- */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important;}
  #myf-hover{transform:none!important;}
  .btn:active,button:active,.chip:active{transform:none;}
}

/* ---- account control in the masthead -------------------------------------
   Sits as a third flex child of .mast-in, right of the nav. flex:none keeps it
   at full width while .nav (min-width:0, overflow-x:auto) absorbs the squeeze,
   so a long nav scrolls rather than crushing the sign-in button. */
.acct{flex:none;display:flex;align-items:center;margin-left:12px;position:relative;}
.acct-btn{font:inherit;font-size:12.5px;font-weight:600;padding:7px 15px;border-radius:3px;cursor:pointer;
  background:var(--navy);border:1px solid var(--navy);color:#fff;white-space:nowrap;transition:opacity .14s;}
.acct-btn:hover{opacity:.88;}
.acct-btn:focus-visible,.acct-who:focus-visible{outline:2px solid var(--saffron);outline-offset:2px;}
.acct-who{display:flex;align-items:center;gap:8px;cursor:pointer;background:none;border:1px solid var(--hair2);
  border-radius:20px;padding:3px 12px 3px 3px;font:inherit;font-size:12.5px;color:var(--ink);max-width:190px;}
.acct-who:hover{border-color:var(--navy);}
.acct-who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-av{flex:none;width:25px;height:25px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;text-transform:uppercase;}
.acct-menu{position:absolute;right:0;top:46px;background:var(--card);border:1px solid var(--hair2);
  border-radius:4px;box-shadow:0 10px 30px rgba(18,41,74,.16);min-width:210px;padding:6px;z-index:60;display:none;}
.acct-menu.open{display:block;}
.acct-menu .em{font-size:11.5px;color:var(--mut);padding:8px 11px 10px;border-bottom:1px solid var(--hair);
  margin-bottom:5px;word-break:break-all;}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:13px;
  padding:9px 11px;border-radius:3px;background:none;border:none;cursor:pointer;color:var(--ink);}
.acct-menu a:hover,.acct-menu button:hover{background:var(--hair);}

/* ---- sign-in modal ---- */
.acct-ov{position:fixed;inset:0;background:rgba(18,41,74,.45);z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px;}
.acct-ov.open{display:flex;}
.acct-modal{background:var(--card);border-radius:5px;width:100%;max-width:392px;padding:26px 26px 22px;
  box-shadow:0 22px 64px rgba(0,0,0,.28);max-height:90vh;overflow-y:auto;}
.acct-modal h2{font-family:var(--disp);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px;}
.acct-modal .sub{font-size:12.5px;color:var(--mut);line-height:1.55;margin-bottom:16px;}
.acct-tabs{display:flex;gap:4px;margin-bottom:16px;}
.acct-tabs button{flex:1;font:inherit;font-size:12.5px;font-weight:600;padding:8px;border-radius:3px;cursor:pointer;
  background:transparent;border:1px solid var(--hair2);color:var(--dim);}
.acct-tabs button.on{background:var(--navy);border-color:var(--navy);color:#fff;}
.acct-modal input{width:100%;margin-bottom:10px;font:inherit;font-size:13.5px;padding:10px 13px;
  border:1px solid var(--hair2);background:var(--paper,#fff);color:var(--ink);border-radius:3px;}
.acct-modal input:focus{outline:none;border-color:var(--navy);}
.acct-go{width:100%;font:inherit;font-size:13.5px;font-weight:700;padding:11px;border-radius:3px;cursor:pointer;
  background:var(--navy);border:1px solid var(--navy);color:#fff;margin-top:4px;}
.acct-go[disabled]{opacity:.65;cursor:default;}
.acct-msg{font-size:12.5px;line-height:1.5;margin-top:11px;padding:9px 11px;border-radius:3px;display:none;}
.acct-msg.bad{display:block;background:var(--red-bg);color:var(--red);}
.acct-msg.ok{display:block;background:var(--green-bg);color:var(--green);}
.acct-note{font-size:11.5px;color:var(--mut);line-height:1.6;margin-top:13px;padding-top:12px;border-top:1px solid var(--hair);}
.acct-x{float:right;font:inherit;font-size:20px;line-height:1;background:none;border:none;cursor:pointer;color:var(--dim);padding:0 2px;}
@media (max-width:640px){
  .acct-btn{padding:6px 11px;font-size:12px;}
  .acct-who{max-width:120px;}
}



/* =========================================================================
   v11 - "Terminal"    (the only design layer in this file)
   -------------------------------------------------------------------------
   Everything before this point is STRUCTURE - layout, tables, forms,
   responsive rules. Everything visual is decided here, once.

   Why the rewrite: the file had accumulated a near-black/gold/serif art
   direction plus six correction layers stacked on top, each overriding the
   last. Pages inherited whichever won on source order - a black button next
   to a teal one, gold text in a palette with no gold, cream on white. That
   is what "messed up" looked like, and no seventh layer would have fixed it.
   The old direction and all six layers were deleted rather than patched.

   Direction: TradingView. Dense over airy, crisp over soft, one strong blue,
   and figures that read like instrument output. A screener holding 2,291 rows
   should feel like a terminal, not a brochure - the previous pass applied
   consumer-app padding to a data table and it read as unfinished.

   Motion is a system, not decoration: things ENTER (stagger on load, reveal
   on scroll), RESPOND (hover, press, focus), and REPORT (a figure flashes its
   direction when it changes). Every one is disabled under
   prefers-reduced-motion.
   ====================================================================== */

:root{
  /* --- surfaces --- */
  --paper:#FAFAF7;
  --card:#FFFFFF;
  --card2:#F2F1EC;
  --hair:#E5E3DC;
  --hair2:#D6D3CA;

  /* --- ink --- */
  --ink:#1A1C1E;
  --mut:#54585C;
  --dim:#5E6367;

  /* --- the one accent --- */
  --navy:#1F4E79;
  --navy2:#173C5E;
  --navy-bg:#E9EFF5;

  /* --- direction. TradingView's own hues, darkened where they carry text --- */
  --green:#2C6A4B;
  --red:#A63A2E;
  --amber:#8A6216;
  --green-bg:#E8F0EA;
  --red-bg:#F7EAE7;
  --amber-bg:#F6F0E2;
  --green-line:#3E8A64;
  --red-line:#C2564A;

  /* identity, used sparingly */
  --saffron:#E8590C;
  --saffron-bg:#FFF2EA;
  --gold:#1F4E79;          /* legacy token, folded into the accent */
  --gold-soft:#7FA0FF;
  --cream:#FFFFFF;
  --noir:#FFFFFF;
  --noir-2:#F2F1EC;

  --shadow:0 1px 2px rgba(19,23,34,.05);
  --shadow-lift:0 2px 6px rgba(19,23,34,.07),0 10px 26px rgba(19,23,34,.09);
  --r-card:6px;
  --r-ctl:4px;

  --disp:'Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --body:'Inter',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,monospace;

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:160ms;
  --dur-slow:420ms;
}

:root[data-theme="dark"]{
  --paper:#16181A;
  --card:#1E2124;
  --card2:#262A2D;
  --hair:#2B2F33;
  --hair2:#383D42;
  --ink:#E6E3DD;
  --mut:#A3A69F;
  --dim:#9A9E98;
  --navy:#7FA8CC;
  --navy2:#9BBEDC;
  --navy-bg:#1B2C3B;
  --green:#6FAE8B;
  --green-line:#6FAE8B;
  --red-line:#D4867A;
  --red:#D4867A;
  --amber:#D2A75E;
  --green-bg:#182A21;
  --red-bg:#2C1D1A;
  --amber-bg:#2A2418;
  --cream:#E6E3DD;
  --noir:#1E2124;
  --noir-2:#262A2D;
  --shadow:0 1px 2px rgba(0,0,0,.45);
  --shadow-lift:0 10px 30px rgba(0,0,0,.55);
}

body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:14px;line-height:1.5;}

/* ---------- chrome ---------- */
.mast{background:var(--card);border-bottom:1px solid var(--hair);box-shadow:none;}
.mast-in{height:52px;}
.logo{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink);}
.logo em{color:var(--navy);font-style:normal;}
.tricolor{height:2px;background:none;display:flex;}
.tricolor span:nth-child(1){background:#E8590C;}
.tricolor span:nth-child(2){background:var(--hair);}
.tricolor span:nth-child(3){background:#0B8A72;}
.nav a{padding:15px 11px;font-size:13px;font-weight:500;color:var(--mut);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);}
.nav a:hover{color:var(--ink);background:var(--card2);}
.nav a.on{color:var(--ink);font-weight:600;}
.nav a.on::after{background:var(--navy);height:2px;}

.gsearch input{background:var(--card2);border:1px solid transparent;color:var(--ink);
  border-radius:var(--r-ctl);font-size:13px;transition:border-color var(--dur) var(--ease),
  background var(--dur) var(--ease);}
.gsearch input::placeholder{color:var(--dim);}
.gsearch input:focus{background:var(--card);border-color:var(--navy);outline:none;
  box-shadow:0 0 0 3px var(--navy-bg);}
.gsearch::before{background:var(--dim);}
.gsearch-dd{background:var(--card);border:1px solid var(--hair2);border-radius:var(--r-ctl);
  box-shadow:var(--shadow-lift);}
.gsearch-it:hover{background:var(--card2);}

/* ---------- surfaces ---------- */
.card,.panel,.idx,.tbl-wrap,.calc,.detail,.guide,.notice,.breadth{
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:none;}
.panel-h{padding:11px 15px;border-bottom:1px solid var(--hair);background:var(--card);}
.panel-h .t,.sec-head{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;font-size:14px;}
.stat{padding:12px 15px;}
.idx{padding:13px 15px;}
h1,h2,.page-head h1{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;}
.page-head h1{font-size:clamp(1.5rem,1.2rem + 1vw,1.9rem);}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);border-bottom:none;padding-bottom:0;}

/* the hero is a compact status strip, not a billboard */
.hero-band{background:var(--card2);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:20px 22px;margin-bottom:var(--s-5);}
.hero-band::after{display:none;}
.hero-band h1{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.15;
  letter-spacing:-.03em;color:var(--ink);font-weight:800;max-width:26ch;}
.hero-band h1 em{font-style:normal;color:var(--navy);}
.hero-band p{color:var(--mut);font-size:13.5px;margin-top:8px;max-width:60ch;}
.hero-stats{border-top:1px solid var(--hair2);margin-top:16px;padding-top:14px;gap:28px;}
.hero-stat .k{color:var(--ink);font-family:var(--mono);font-weight:600;letter-spacing:-.02em;}
.hero-stat .k.up{color:var(--green);} .hero-stat .k.down{color:var(--red);}
.hero-stat .l{color:var(--dim);font-family:var(--mono);letter-spacing:.12em;
  font-size:10px;font-weight:500;text-transform:uppercase;}
a.hero-stat:hover .k{color:var(--navy);}
a.hero-stat:focus-visible{outline:2px solid var(--navy);outline-offset:3px;}
.idx-grid .idx:first-child{background:var(--card);border:1px solid var(--navy);}
.idx-grid .idx:first-child .val,.idx-grid .idx:first-child .sym,
.idx-grid .idx:first-child .k{color:var(--ink);}
.idx-grid .idx:first-child .lbl,.idx-grid .idx:first-child .eyebrow{color:var(--navy);}

/* ---------- tables: dense, aligned, scannable ---------- */
th{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);padding:9px 12px;background:var(--card2);
  border-bottom:1px solid var(--hair);}
td{padding:9px 12px;font-size:13px;border-bottom:1px solid var(--hair);}
td.num,.count,.tape-item,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;}
tbody tr{transition:background var(--dur) var(--ease);}
tbody tr:hover{background:var(--card2);}
.up,.tick-up{color:var(--green);} .down,.tick-down{color:var(--red);}

/* ---------- controls ---------- */
.btn{border-radius:var(--r-ctl);font-weight:600;font-size:13px;padding:7px 14px;
  background:var(--card);border:1px solid var(--hair2);color:var(--ink);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
  transform var(--dur) var(--ease);}
.btn:hover{background:var(--card2);border-color:var(--navy);}
.btn:active{transform:translateY(1px);}
.btn.primary,.acct-btn,.acct-go,.gate .btn{background:var(--navy);border-color:var(--navy);color:#fff;}
.btn.primary:hover,.acct-btn:hover,.acct-go:hover,.gate .btn:hover{background:var(--navy2);border-color:var(--navy2);}
.ranges button,.tabs button,.acct-tabs button{border-radius:var(--r-ctl);font-size:12.5px;
  padding:6px 12px;transition:all var(--dur) var(--ease);}
.ranges button.on,.tabs button.on,.acct-tabs button.on{background:var(--navy);
  border-color:var(--navy);color:#fff;}
.thm{border-radius:var(--r-ctl);}
input,select,textarea{border-radius:var(--r-ctl);background:var(--card);color:var(--ink);
  border:1px solid var(--hair2);font-size:13px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px var(--navy-bg);}

/* gated panels read as a panel, not a black slab */
.gate{background:var(--card2);border:1px solid var(--hair);border-radius:var(--r-card);color:var(--ink);}
.gate h3{color:var(--ink);} .gate h3 em{color:var(--navy);font-style:normal;}
.gate p{color:var(--mut);}

/* ---------- the range band, kept from v8 ---------- */
.range-meter,.score-bar,.band,.meter{position:relative;height:5px;background:var(--hair);
  border-radius:2px;overflow:visible;}
.range-meter > i,.score-fill,.band > i,.meter > i{display:block;height:100%;border-radius:2px;
  background:var(--navy);transition:width var(--dur-slow) var(--ease-out);}
.range-meter::after,.band::after{content:"";position:absolute;top:-3px;bottom:-3px;width:2px;
  background:var(--ink);border-radius:1px;left:var(--at,50%);}
.meter i.hi,.band > i.hi{background:var(--red);}
.meter i.md,.band > i.md{background:var(--amber);}
.meter i.lo,.band > i.lo{background:var(--green);}

/* =====================================================================
   MOTION
   Three jobs only: ENTER, RESPOND, REPORT. Anything that does not do one
   of those is decoration and was left out.
   ===================================================================== */

/* ENTER - a short stagger on load, so the page assembles rather than blinks */
@keyframes riseIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
main > *{animation:riseIn var(--dur-slow) var(--ease-out) both;}
main > *:nth-child(1){animation-delay:0ms;}
main > *:nth-child(2){animation-delay:40ms;}
main > *:nth-child(3){animation-delay:80ms;}
main > *:nth-child(4){animation-delay:120ms;}
main > *:nth-child(5){animation-delay:160ms;}
main > *:nth-child(n+6){animation-delay:200ms;}

/* ENTER - scroll reveal, driven by the existing .reveal hook */
.reveal{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);}
.reveal.in{opacity:1;transform:none;}

/* RESPOND - surfaces answer the pointer */
.idx,.card,.panel{transition:border-color var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);}
a.idx:hover,a.card:hover{border-color:var(--navy);box-shadow:var(--shadow-lift);
  transform:translateY(-1px);}
.acct-ov{transition:opacity var(--dur) var(--ease);}
.acct-modal{animation:riseIn var(--dur) var(--ease-out) both;}

/* REPORT - a figure flashes its direction when it changes. Applied by script;
   the colour says which way, the fade says "this is new". */
@keyframes flashUp{0%{background:var(--green-bg);}100%{background:transparent;}}
@keyframes flashDown{0%{background:var(--red-bg);}100%{background:transparent;}}
.tick-up-flash{animation:flashUp 900ms var(--ease) both;}
.tick-down-flash{animation:flashDown 900ms var(--ease) both;}

/* loading shimmer */
@keyframes shimmer{0%{background-position:-320px 0;}100%{background-position:320px 0;}}
.skel{background:linear-gradient(90deg,var(--card2) 0%,var(--hair) 50%,var(--card2) 100%);
  background-size:640px 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--r-ctl);}

@media(prefers-reduced-motion:reduce){
  main > *,.acct-modal{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
  .tick-up-flash,.tick-down-flash,.skel{animation:none;}
  a.idx:hover,a.card:hover{transform:none;}
  .btn:active{transform:none;}
  .range-meter > i,.score-fill,.band > i,.meter > i{transition:none;}
}

/* ---- sticky table header ------------------------------------------------
   The header stuck at top:53px while the chrome above it is 54px (52px bar +
   2px tricolour), so rows scrolled through the 1px seam. Compounded by the
   pin fix giving cells position:relative — a positioned cell paints over a
   sticky header unless the header is decisively above it. Exact offset, and
   a z-index gap wide enough that a future positioned child cannot climb it. */
thead th,.tbl-wrap th,table thead th{
  position:sticky;top:54px;z-index:30;background:var(--card2);
  box-shadow:inset 0 -1px 0 var(--hair);}
tbody tr > td{z-index:1;}
:root[data-theme="dark"] thead th{background:var(--card2);}

/* ---- sticky header, corrected ------------------------------------------
   The previous rule hardcoded top:54px and so fought the existing --stick
   token, which already handles the case where the layout switches to a side
   rail and there IS no top bar to clear. Drive it from the token instead and
   just give the token the right value for the new 52px bar + 2px tricolour.
   (Desktop drops .tbl-wrap overflow to visible so the header pins to the
   viewport; that rule is in the base and still applies.) */
:root{--stick:54px;}
thead th,.tbl-wrap th,table thead th{top:var(--stick);z-index:30;}

/* ---- primary buttons: match the markup that actually exists --------------
   The base styles button.primary (0,1,1). My rule said .btn.primary
   (0,2,0) — higher specificity, but it never MATCHED, because the screener
   Refresh button carries class="primary" with no "btn". So it kept the old
   near-black. Both spellings are covered now. */
.btn.primary,button.primary,.acct-btn,.acct-go,.gate .btn{
  background:var(--navy);border-color:var(--navy);color:#fff;}
.btn.primary:hover,button.primary:hover,.acct-btn:hover,.acct-go:hover,.gate .btn:hover{
  background:var(--navy2);border-color:var(--navy2);}

/* ---- sticky headers only where they can actually work -------------------
   Above 1080px the base drops .tbl-wrap to overflow:visible, so the header
   pins to the viewport. BELOW that the wrapper scrolls horizontally, and a
   sticky header inside a scroll container does not pin to the page — it
   detaches and rows paint straight through it, which is what put a data row
   on top of the column labels. A header that simply scrolls away is better
   than one that collides, so below the breakpoint it is static. */
@media(max-width:1079px){
  .tbl-wrap th,thead th,table thead th{position:static;top:auto;box-shadow:none;
    border-bottom:1px solid var(--hair2);}
}


/* ---- measured contrast pass 2 -------------------------------------------
   Audited computed colour against real painted background in both themes:
   * LIGHT --green was 4.29 on white. Every gain figure on the site failed,
     and the hero tint pushed it to 3.86. Darkened until it clears on both.
   * DARK --dim was 4.36 on the panel. That token labels every stat and
     column, so it was the most-read text on the page.
   * DARK primary buttons were 3.2 (white on the lighter blue). The rewrite
     dropped the polarity flip that fixed this before: on a dark theme the
     accent is light, so button text must be dark, not white. */
/* token overrides removed - the v11 retune supersedes them, see notes below */
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] .acct-btn,
:root[data-theme="dark"] .acct-go,
:root[data-theme="dark"] .gate .btn,
:root[data-theme="dark"] .ranges button.on,
:root[data-theme="dark"] .tabs button.on,
:root[data-theme="dark"] .acct-tabs button.on{color:#0A1628;font-weight:700;}


/* ---- colour is never the only cue ---------------------------------------
   Audited with the colour-blindness question in mind (whocanuse, from the
   design-resources list). Percentage cells were fine - they carry a + or -
   sign, so direction survives without colour. The 52-week position column did
   NOT: 1,516 green and 47 red cells, all bare numbers. To a red-green
   colour-blind reader (~8% of men) a stock pinned at its 52-week high looked
   identical to one scraping its low, on a page whose whole job is telling
   those apart.

   A direction glyph fixes it for everyone and costs one character. On cells
   that already show a sign it is mildly redundant - which is how trading
   terminals present it anyway, and redundancy is the point of the exercise.

   The glyphs are written as literal characters, not CSS \ escapes: passing
   those through a shell heredoc turned \25B2 into an octal escape and emitted
   a control character instead of the triangle.

   content: "..." / "" gives the glyph EMPTY alternative text, so a screen
   reader announces the number and skips the decoration rather than reading
   "black up-pointing triangle" 1,500 times. */
td.up::after,td.tick-up::after{content:" ▲";font-size:.72em;
  vertical-align:.08em;margin-left:.22em;opacity:.8;}
td.down::after,td.tick-down::after{content:" ▼";font-size:.72em;
  vertical-align:.08em;margin-left:.22em;opacity:.8;}

/* where the browser supports alternative text for generated content, give the
   glyph an empty one so it is not announced */
@supports (content: "x" / "y"){
  td.up::after,td.tick-up::after{content:" ▲" / "";}
  td.down::after,td.tick-down::after{content:" ▼" / "";}
}


/* =====================================================================
   grouped navigation
   ---------------------------------------------------------------------
   Five task groups replacing sixteen flat destinations. The menus open on
   HOVER and on :focus-within, so they work with JavaScript disabled and for
   keyboard users without any script at all — navigation is structure, and
   structure must not depend on an enhancement loading. Script only adds
   click-toggling, which is what touch devices need.
   ===================================================================== */
.navgrp{position:relative;display:inline-block;}
.navtop{font:inherit;font-size:13px;font-weight:500;color:var(--mut);background:none;
  border:none;cursor:pointer;padding:15px 11px;display:inline-flex;align-items:center;gap:5px;
  white-space:nowrap;transition:color var(--dur) var(--ease),background var(--dur) var(--ease);}
.navtop:hover{color:var(--ink);background:var(--card2);}
.navtop.on{color:var(--ink);font-weight:600;}
.navtop.on::after{content:"";position:absolute;left:11px;right:11px;bottom:0;height:2px;
  background:var(--navy);border-radius:2px;}
a.navtop{text-decoration:none;}
.navtop:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}

/* the caret is drawn, not a glyph, so it inherits colour and never shifts
   the baseline the way an arrow character does */
.navcar{width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
  opacity:.55;transition:transform var(--dur) var(--ease);}
.navgrp:hover .navcar,.navgrp:focus-within .navcar,
.navtop[aria-expanded="true"] .navcar{transform:rotate(225deg) translate(-2px,-2px);opacity:.9;}

.navmenu{position:absolute;top:100%;left:4px;min-width:210px;background:var(--card);
  border:1px solid var(--hair2);border-radius:var(--r-card);box-shadow:var(--shadow-lift);
  padding:6px;z-index:60;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);}

.navmenu a{display:block;padding:9px 12px;font-size:13px;font-weight:500;color:var(--ink);
  border-radius:var(--r-ctl);white-space:nowrap;text-decoration:none;
  transition:background var(--dur) var(--ease);}
.navmenu a:hover{background:var(--card2);}
.navmenu a[aria-current="page"]{background:var(--navy-bg);color:var(--navy);font-weight:600;}
.navmenu a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}

/* on a narrow screen the bar scrolls, so keep menus inside the viewport */
@media(max-width:760px){
  .navtop{padding:14px 9px;font-size:12.5px;}
  .navmenu{left:auto;right:0;min-width:190px;}
}
@media(prefers-reduced-motion:reduce){
  .navmenu,.navcar{transition:none;}
}


/* the direction glyph must not wrap - a narrow column pushed it onto its own
   line and grew every row from 40px to 58px */
td.up,td.down,td.tick-up,td.tick-down{white-space:nowrap;}


/* ---- dropdowns need room to escape the bar ------------------------------
   .nav carried overflow-x:auto / overflow-y:hidden so sixteen flat items
   could scroll sideways. That same rule CLIPS an absolutely-positioned
   dropdown the instant it crosses the bar, so the menus opened invisibly.
   With five groups instead of sixteen items the scroller is not needed, and
   removing it is what lets the menus show at all. */
.nav{overflow:visible;}
.mast,.mast-in{overflow:visible;}
@media(max-width:760px){
  /* narrow bars still need to scroll, but a clipped menu is useless - so the
     menu anchors to the bar itself rather than the button */
  .nav{overflow-x:auto;overflow-y:visible;}
  .navmenu{position:fixed;left:auto;right:8px;top:54px;}
}




/* =====================================================================
   row furniture  —  identity tiles, price shapes, pill filters
   ---------------------------------------------------------------------
   Added as COMPONENTS on top of the single v11 layer, not as another
   competing skin. Seven stacked skins is what produced the mess this file
   was rebuilt to fix; nothing below redefines a token or restyles an
   existing element wholesale.

   The shapes are lifted from how list-heavy market sites actually build a
   row: an identity tile on the left, the name over its ticker, the price
   over its change, and a small price shape between them. Each one is doing
   a job — the tile makes a row findable by eye, the two-line name stops the
   ticker competing with the company, the shape gives the number context the
   number alone cannot carry.
   ===================================================================== */

.mono-tile{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  border:1px solid rgba(0,0,0,.05);
  font-family:var(--sans,inherit);
}
:root[data-theme="dark"] .mono-tile{border-color:rgba(255,255,255,.07);filter:saturate(.75) brightness(.92);}

/* name over ticker: one glance finds the company, a second finds the code */
.co-cell{display:flex;align-items:center;gap:11px;min-width:0;}
.co-txt{min-width:0;}
.co-name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px;}
.co-tkr{font-size:11.5px;color:var(--dim);line-height:1.3;margin-top:1px;letter-spacing:.02em;}

/* price over change, right-aligned, so the eye runs down one column */
.px-cell{text-align:right;white-space:nowrap;}
.px-main{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;}
.px-chg{font-size:12px;font-weight:600;line-height:1.3;margin-top:1px;white-space:nowrap;}

.spark{display:block;overflow:visible;}
td.spark-cell{width:62px;padding-left:6px;padding-right:6px;vertical-align:middle;}

/* pill filters — the selected state is a solid ink chip, which is legible at
   a glance in a way a tinted outline never is */
.pillbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:100px;cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1;
  background:var(--card);color:var(--mut);
  border:1px solid var(--hair2);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
  white-space:nowrap;
}
.pill:hover{background:var(--card2);color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink);}
.pill:focus-visible{outline:2px solid var(--navy);outline-offset:2px;}

/* section header: title left, escape hatch right */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
.sec-head h2,.sec-head h3{margin:0;}
.sec-head .more{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap;}
.sec-head .more:hover{text-decoration:underline;}

/* rows need vertical air once they carry two lines of text */
table tbody td{padding-top:9px;padding-bottom:9px;}

/* =====================================================================
   top bar  —  dark index strip over a dark masthead
   ---------------------------------------------------------------------
   The left rail is gone; its media blocks were CUT rather than overridden,
   because burying a layout under a counter-layout is exactly how this file
   became unreadable the first time.

   Shape borrowed from how market sites open a page: a thin live index strip
   pinned above everything, then a dark bar carrying the wordmark, search and
   the section nav, then content in a centred column. The dark band matters
   more than it sounds — it separates "the market" (live, always moving) from
   "the page" (static until you act), which a single flat white header cannot.

   Search sits second in the bar on purpose. On a site with ~2,000 instruments
   the fastest route to any of them is typing its name, not hunting a menu.
   ===================================================================== */

:root{
  --mast-bg:#101C28;      /* prussian pushed to near-black, so it belongs to
                             the same ink family as --navy rather than being a
                             second unrelated dark */
  --mast-fg:#E8EAED;
  --mast-mut:#93A0AD;
  --mast-line:rgba(255,255,255,.10);
  --mast-hover:rgba(255,255,255,.08);
  --shell:1280px;
}
:root[data-theme="dark"]{
  --mast-bg:#111417;
  --mast-fg:#E6E3DD;
  --mast-mut:#9BA099;
  --mast-line:rgba(255,255,255,.09);
  --mast-hover:rgba(255,255,255,.07);
}

/* ---- live index strip, pinned above the masthead ---- */
.tape{
  background:var(--mast-bg);border-bottom:1px solid var(--mast-line);
  height:30px;color:var(--mast-fg);position:relative;z-index:60;
}
.tape-item{color:var(--mast-fg);font-size:12px;padding:0 20px;}
.tape-item .sym{color:var(--mast-mut);}

/* ---- masthead ---- */
.mast{
  background:var(--mast-bg);border-bottom:none;
  position:sticky;top:0;z-index:50;
}
.mast-in{
  max-width:var(--shell);margin:0 auto;padding:0 22px;height:58px;
  display:flex;align-items:center;gap:16px;justify-content:flex-start;
}
.logo{color:var(--mast-fg);flex:none;}
.logo em{color:var(--saffron,#E8590C);}

/* search takes the middle and is allowed to grow; it is the fastest way in */
.gsearch{flex:1 1 200px;max-width:300px;margin:0;}
.gsearch input{
  background:rgba(255,255,255,.07);border:1px solid var(--mast-line);
  color:var(--mast-fg);border-radius:10px;height:36px;font-size:13px;
}
.gsearch input::placeholder{color:var(--mast-mut);}
.gsearch input:focus{
  background:var(--card);color:var(--ink);border-color:var(--navy);outline:none;
}

/* ---- section nav, horizontal ---- */
.nav{flex:none;display:flex;flex-direction:row;align-items:center;gap:2px;margin-left:auto;overflow:visible;}
.navgrp{position:relative;}
.navtop{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 11px;border-radius:9px;
  font-size:13.5px;font-weight:600;line-height:1;
  color:var(--mast-mut);background:none;border:none;cursor:pointer;white-space:nowrap;
}
.navtop::before{display:none;}          /* icons crowd a horizontal bar */
.navtop:hover{background:var(--mast-hover);color:var(--mast-fg);}
.navtop.on{color:var(--mast-fg);background:none;font-weight:700;}
.navtop.on::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-10px;height:2px;
  background:var(--saffron,#E8590C);border-radius:2px;display:block;
}
.navtop:focus-visible{outline:2px solid var(--mast-fg);outline-offset:2px;}
.navcar{margin-left:2px;opacity:.75;}

/* menus float again, and land on paper rather than on the dark bar */
.navmenu{
  position:absolute;top:calc(100% + 9px);left:0;right:auto;min-width:216px;
  display:block;background:var(--card);border:1px solid var(--hair2);
  border-radius:12px;padding:6px;box-shadow:var(--shadow-lift);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s;
  z-index:70;
}
.navgrp:hover .navmenu,
.navgrp:focus-within .navmenu,
.navtop[aria-expanded="true"] + .navmenu{opacity:1;visibility:visible;transform:none;}
.navmenu a{
  display:block;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--ink);
}
.navmenu a:hover{background:var(--card2);}
.navmenu a[aria-current="page"]{background:var(--navy-bg);color:var(--navy);font-weight:700;}

/* the last group sits at the right edge, so its menu must open leftward or it
   would hang off the viewport */
.navgrp:last-of-type .navmenu{left:auto;right:0;}

.tricolor{height:2px;margin-top:0;}

/* the bar is sticky, so sticky table headers must clear it */
:root{--stick:58px;}

/* ---- centred content column ---- */
.wrap{max-width:var(--shell);padding-left:26px;padding-right:26px;}

/* ---- two-column body: content beside a live sidebar ---- */
.cols{display:grid;grid-template-columns:1fr;gap:26px;align-items:start;}
@media(min-width:1024px){
  .cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;}
  .cols > .side{position:sticky;top:calc(var(--stick) + 16px);}
}

@media(max-width:1079px){
  /* below the shell width the bar gets tight: search shrinks first, because a
     narrower search box still works and a wrapped nav does not */
  .gsearch{max-width:200px;flex:1 1 130px;}
  .navtop{padding:8px 8px;font-size:13px;}
}
@media(max-width:860px){
  .mast-in{height:54px;gap:10px;}
  :root{--stick:54px;}
  .gsearch{flex:1 1 90px;max-width:none;}
  .nav{margin-left:0;}
}

/* Direction colours on the dark strip. The paper-theme green and oxide red
   are tuned for near-white and go muddy on near-black, so the strip gets
   lighter variants — same hues, lifted until they read against the bar. */
.tape .up{color:#5FD09B;}
.tape .down{color:#F0897C;}
.tape-item{text-decoration:none;}
a.tape-item:hover .sym{color:var(--mast-fg);}

/* The strip was blank for the first several seconds of every page load: the
   track started a full viewport to the right (padding-left:100%) and crawled
   in. The list is already rendered TWICE, so the seamless loop is a shift of
   exactly one copy — half the track — starting from rest. Content is now
   readable at t=0, which is the entire point of putting it at the top. */
/* Declared as a full shorthand on purpose. Setting only animation-name and
   -duration left the timing function and iteration count to be inherited from
   an older shorthand higher up the file, which is exactly the kind of
   action-at-a-distance that made this stylesheet hard to reason about.

   assets/tape.js overwrites the duration inline once it has measured the
   track, so the strip scrolls at a constant ~55px/s no matter how many
   instruments are in it. Adding an index used to silently speed it up.

   Under prefers-reduced-motion the universal rule above stops it dead. That
   is why padding-left is 0: the old value parked the track a full viewport
   to the right, so a reduced-motion visitor got a permanently EMPTY strip.
   Now it simply stands still with the Indian indices already in view. */
.tape-track{padding-left:0;animation:tapeloop var(--tape-dur,160s) linear infinite;}
@keyframes tapeloop{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* 58px bar + 2px tricolour edge = 60. At 58 the first table row slid a
   hairline under the bar on scroll. */
:root{--stick:60px;}
@media(max-width:860px){ :root{--stick:56px;} }

/* ---- two-column body, applied ----
   Market data reads down the main column; news sits beside it rather than
   buried a full screen below, which is where it was.

   NOT sticky, deliberately. An earlier draft pinned the sidebar with
   position:sticky — on a column taller than the viewport that pins the TOP
   and makes the bottom of the news list permanently unreachable. A plain
   grid column scrolls normally and can actually be read to the end. */
.cols > .side{position:static;top:auto;}
.main-col{min-width:0;}
.side{min-width:0;}

/* the news panel pairs India | Global side by side at full width; in a 40%
   column that gives two unreadably narrow lists, so stack them */
.side .two-col{display:block;}
.side .two-col > .panel + .panel{margin-top:18px;}
.side .sec-head h2{font-size:17px;}

/* =====================================================================
   market fold — the live index board, full width, on the dark band
   ---------------------------------------------------------------------
   The board used to sit inside the content column, which after the two-column
   split squeezed five index cards into 60% width and wrapped them onto two
   rows. It belongs above the fold at full width: on a market site the first
   thing on the page should be where the market actually is, not a headline
   about it.

   Everything inside is coloured by REMAPPING TOKENS rather than by restating
   rules. The cards carry inline style="color:var(--green)" and friends, and
   var() resolves per element — so redefining the tokens on the container
   recolours the whole subtree, inline styles included, without a single
   !important and without touching the markup.
   ===================================================================== */
.mkt-fold{
  background:var(--mast-bg);
  border-bottom:1px solid var(--mast-line);
  color:var(--mast-fg);

  /* surfaces */
  --card:rgba(255,255,255,.055);
  --card2:rgba(255,255,255,.09);
  --hair:rgba(255,255,255,.10);
  --hair2:rgba(255,255,255,.14);
  /* text */
  --ink:var(--mast-fg);
  --mut:var(--mast-mut);
  --dim:var(--mast-mut);
  /* direction, lifted for a near-black ground */
  --green:#5FD09B;
  --red:#F0897C;
  --saffron:#F5A96B;
}
.mkt-fold-in{max-width:var(--shell);margin:0 auto;padding:16px 26px 20px;}
.mkt-fold .status-line{margin-bottom:12px;}
.mkt-fold .idx-grid{margin-bottom:16px;}
.mkt-fold .idx{border-radius:12px;}
.mkt-fold .idx:hover{transform:none;box-shadow:none;background:var(--card2);}
.mkt-fold .breadth{border-radius:12px;margin-bottom:0;}

/* the "lead card is solid ink" treatment is invisible on an ink background */
.mkt-fold .idx-grid .idx:first-child{background:var(--card);border-color:var(--hair);color:var(--ink);}
.mkt-fold .idx-grid .idx:first-child .lbl{color:var(--mut);}
.mkt-fold .idx-grid .idx:first-child .up{color:var(--green);}
.mkt-fold .idx-grid .idx:first-child .down{color:var(--red);}

@media(max-width:860px){ .mkt-fold-in{padding:14px 16px 16px;} }

/* =====================================================================
   the bar on small screens
   ---------------------------------------------------------------------
   Three things were wrong once the rail became a top bar:

   1. `.nav{overflow:visible}` in the top-bar layer killed the horizontal
      scroller the narrow nav used to rely on, so five groups ran ~570px wide
      on a 375px screen and the whole PAGE scrolled sideways.
   2. `.navmenu{position:absolute}` overrode the position:fixed that existed
      only to escape that scroller.
   3. Search was hidden outright below 820px by an older rule — defensible
      when search was a small box in a corner, wrong now that it is the
      primary way into ~2,000 instruments, and most wrong on a phone.

   The nav WRAPS here rather than scrolling. A scroller would have dragged
   back the clipping problem that forced position:fixed in the first place;
   wrapping to two lines needs no scroller, no fixed positioning, and leaves
   every group reachable without a horizontal drag.

   The bar also stops being sticky: three stacked rows pinned to the top of a
   phone screen is most of the viewport gone before any content shows.
   ===================================================================== */
@media(max-width:860px){
  .mast{position:static;}
  .mast-in{flex-wrap:wrap;height:auto;padding:9px 16px 10px;gap:9px 10px;}

  .logo{order:1;}
  .thm{order:2;margin-left:auto;}
  .acct{order:2;}

  /* search gets a full row of its own */
  .gsearch{order:3;display:block;flex:1 1 100%;max-width:none;margin:0;}

  /* wrap, never scroll — see the note above */
  .nav{order:4;flex:1 1 100%;flex-wrap:wrap;overflow:visible;margin-left:0;gap:2px 3px;}
  .navtop{padding:7px 9px;font-size:12.5px;}

  /* Anchor the menu to the NAV, not the button, and let it span the full
     width. Keying which side a menu opens from off its index (nth-last-of-type)
     was wrong the moment the nav wrapped: "Mutual funds" is the last group but
     sits at the LEFT edge of the second row, so opening it rightward pushed the
     panel to x=-69, off the screen entirely. A full-width sheet under the whole
     nav cannot land off-screen whatever order the groups wrap into. */
  .nav{position:relative;}
  .navgrp{position:static;}
  .navmenu{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:0;width:auto;}
  /* the desktop rule that makes the LAST group open leftward carries a
     :last-of-type and therefore out-specifies the line above; restated here
     at matching specificity so every sheet is the same full width */
  .navgrp:last-of-type .navmenu{left:0;right:0;}

  /* the bar no longer floats, so nothing needs clearing */
  :root{--stick:0px;}
}

/* When the visitor's system asks for reduced motion the strip stops dead —
   an auto-scrolling ticker is precisely the motion that setting exists to
   switch off, so it is NOT overridden here.
   
   What it did mean, though, is that such a visitor could only ever see the
   first six instruments; the other twelve were parked off-screen with no way
   to reach them. The strip becomes hand-scrollable instead, so everything in
   it stays reachable without anything moving on its own. */

/* =====================================================================
   the index strip keeps moving, by the owner's explicit decision
   ---------------------------------------------------------------------
   The blanket prefers-reduced-motion guard was removing this animation
   ENTIRELY - getAnimations() returned 0 on the element, which is why the
   strip was stone dead for anyone whose system asks for reduced motion.

   The site owner asked three times for it to scroll, so it scrolls. This is
   a NARROW exemption on purpose: it applies to the ticker and nothing else.
   Every other animation and transition on the site still honours the
   setting, so the concession is one element, not the guard as a whole.

   Worth being clear about the cost, since it is a real one: a continuously
   scrolling ticker is the specific kind of motion that setting exists to
   stop, and visitors who enabled it will see this move anyway. The rest of
   the page stays still for them.

   Duration arrives as --tape-dur, set by assets/tape.js once it has measured
   the track. It has to be a custom property rather than an inline style:
   inline styles lose to !important, so a plain el.style.animationDuration
   would be overridden right back to .001ms by the guard above.
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .tape-track{
    animation:tapeloop var(--tape-dur,160s) linear infinite!important;
    animation-play-state:running!important;
  }
}