:root{
  --fs-h1:38px; --fs-h2:22px; --fs-h3:17px; --fs-body:16px;
  --fs-table:14.5px; --fs-th:12px; --fs-small:13px; --fs-tiny:11px;
  --lh-tight:1.25; --lh-body:1.55;
}
body{font-size:var(--fs-body);line-height:var(--lh-body)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3);line-height:var(--lh-tight)}
table{font-size:var(--fs-table)}
th{font-size:var(--fs-th);text-transform:uppercase;letter-spacing:.03em}
td{font-size:var(--fs-table)}
small,.small,.hint{font-size:var(--fs-small)}
/* Intro paragraph under the h1. Ten pages called it .sub, two called it .lede,
   and archive and api each pinned their own size (15px, 16px) -- so the same
   element rendered at three sizes across the site. One rule for both names. */
.sub,.lede{font-size:17px;color:var(--muted,#5A5E70);max-width:none;margin:8px 0 0}
/* .sr-only was used on the stocks list (a search label and a table caption)
   but defined on no page, so both rendered as visible text in the middle of
   the layout. Clips the element for sighted users while leaving it in the
   accessibility tree. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- component consistency sweep -------------------------------------
   A computed-style audit across all 15 pages found the same components
   rendering at different sizes: panel headings at 16/17/18px, table headers at
   11/12/13px in two colour schemes, panel padding at three values. These are
   one component each, so they get one definition. Deliberate variants are left
   alone: h2.sec is a section label, and the footer's .fcol h3 is a column
   heading -- both are scoped selectors that outrank the rules below. */
.panel h2,.panel h3,.arcpanel h2,.arcpanel h3{font-size:17px;font-weight:800;
  margin:0 0 4px;line-height:1.3}
.panel,.arcpanel{padding:22px 24px;border-radius:18px}
.panel .note,.arcpanel .note{font-size:13.5px;margin:0 0 14px;line-height:1.6}
/* Table headers: one page dressed them indigo-on-white while every other used
   lavender, so the same table read as two different components. */
/* The screener carries nine columns now. Tighter cells and tabular figures
   keep it inside a laptop viewport, which is where it is mostly read; below
   that the .tablewrap still scrolls. */
.sc th,.sc td{padding:8px 7px}
.sc td{font-variant-numeric:tabular-nums}
.sc th:first-child,.sc td:first-child{padding-left:10px}
.sc .nm{font-size:11.5px}
@media(min-width:1100px){
  .sc th,.sc td{padding:8px 9px}
}
table th,.arc th,.sc th,.sdir-table th,#bt th{background:var(--lav,#EEECFB);
  color:var(--lav-d,#4A3F9E);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;padding:10px 11px}
table td{font-size:14.5px}
/* Long-form article headings drifted to 21/22/25px across the prose pages. */
article h2,.sdir-faq h2{font-size:21px;font-weight:800;margin:28px 0 8px}
article h3,.sdir-faq h3{font-size:16px;font-weight:700;margin:18px 0 4px}
/* Final sweep. A full audit of every element instance (not just the first per
   page) left these one-offs: an h2 at 15px on faq and 22px on stock; h3 at
   15/16px on calculator, snapshot, brokers and stock; and .note at 12px, 13px,
   16px and 16.5px across five pages. Each is the same component rendered a
   different size on one page, so each gets the shared value.

   Left alone deliberately: h2.sec (14px section label) and footer .fcol h3
   (11px column heading) are distinct components with their own scoped rules;
   .note at 16px inside a page intro is doing a lede's job. */
.arcpanel h3,.panel h3,.bcard h3,.cmp h3{font-size:17px;font-weight:800}
.faq-cat h2,h2.faq-cat{font-size:17px;font-weight:800}
.arcpanel .note,.panel .note,.sdir .note,.cmp .note{font-size:13.5px;line-height:1.6}
/* .tablewrap is the horizontal scroll container for wide tables. Several pages
   used the class without defining it, so on a narrow screen the table pushed
   the whole page sideways instead of scrolling inside its own box. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* .symcell is the logo + symbol + company-name cell used in every scrip table.
   It was defined only on the stocks list, so on the archive and all 386 date
   pages the logo stacked above the ticker instead of sitting beside it. Third
   instance of a shared class used sitewide but declared on one page. */
.symcell{display:flex;align-items:flex-start;gap:8px}
/* Four-up stat grid used by the concentration panel. */
.kpis4{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
/* The quadrant and risk cells are ordinary .panel blocks inside the existing
   .cards2 two-column grid, so they inherit the page's panel padding, radius
   and heading sizes rather than defining a parallel set. Only what is genuinely
   new is declared here. */
/* Window toggle. Styled like the movers toggle but a distinct class: that
   section's script binds to every .mvtog on the page and reads dataset.w, so
   sharing the class broke it. */
.qtogs{display:inline-flex;gap:4px;background:var(--lav,#EEECFB);padding:3px;
  border-radius:10px}
.qtog{border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--muted,#5A5E70);padding:6px 13px;border-radius:8px;cursor:pointer}
.qtog.on{background:var(--card,#fff);color:var(--indigo-d,#3C3489);
  box-shadow:0 1px 3px rgba(31,35,51,.10)}
/* Uniform cells. The grid stretches each panel to the row height, then the
   description is clamped to two lines and the table area given a floor, so the
   eight tables start and end level regardless of how many rows each holds or
   how long its blurb is. */
/* A grid stretches items within a ROW only, so the second row of cells came
   out shorter than the first. grid-auto-rows:1fr makes every row equal, which
   is what levels all four (and all eight across both sections). */
/* minmax(0,1fr), not 1fr: a 1fr track has a min-content floor, so the widest
   table inside forced the column to 405px in a 362px container and the page
   scrolled sideways. Zero as the minimum lets the track shrink and the table
   scroll inside its own box instead. */
.two:has(> .panel.qcell){grid-auto-rows:1fr;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two > .panel.qcell{display:flex;flex-direction:column;height:100%}
/* Two lines of description, always. Clamping alone left a one-line blurb
   shorter than a two-line one, so the tables below them started at different
   heights; min-height pins the block whichever way the text falls. */
.panel.qcell > .note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.9em;margin-bottom:10px}
/* A floor tall enough for five rows plus the header. The grid equalises cells
   within a row; this equalises the ROWS, which is what made the third and
   fourth tables shorter than the first two. */
/* min-width:0 is required: a flex child defaults to min-width:auto, which
   makes it refuse to shrink below its content, so the table pushed the page
   sideways at 390px instead of scrolling inside its own box. */
.panel.qcell > .tablewrap{flex:1 1 auto;min-height:262px;min-width:0;
  overflow-x:auto}
.panel.qcell > .qmore{margin-top:auto;padding-top:8px;min-height:1.2em}
.panel.qcell .qtab tbody tr{height:44px}
@media(max-width:760px){
  /* One column on a phone, so equal heights across rows buy nothing and the
     floor only adds dead space.
     The flex column is released too: a flex item's default min-width:auto
     stopped .tablewrap shrinking below its table, and the page scrolled
     sideways to 419px instead of the table scrolling inside its own box. */
  .two:has(> .panel.qcell){grid-auto-rows:auto;
    grid-template-columns:minmax(0,1fr)}
  .two > .panel.qcell{display:block;height:auto}
  .panel.qcell > .tablewrap{min-height:0;max-width:100%}
  .panel.qcell > .note{-webkit-line-clamp:none;min-height:0}
  .panel.qcell > .qmore{min-height:0}
}
/* Justified body copy.
   Scoped to long-form prose only: paragraphs, list items and the lede. Table
   cells, headings, stat tiles and short labels stay left-aligned, because
   justifying a two-word cell just stretches it across the column.
   hyphens:auto matters here -- without it, justification on a narrow column
   opens rivers of white space between words instead of breaking them. */
.wrap p, main.wrap p, article p, article li, .lede, .prose p, .prose li{
  text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* Anything short or tabular is exempt: justification needs several lines to
   look deliberate rather than accidental. */
.wrap p.note, .wrap p.hint, .disc p, .disc div, td p, th p, .kpi p, figcaption,
.qmore, .fbrand p{text-align:left;hyphens:manual}
/* inherit, not left: .symname is a sub-line inside table cells that are often
   right-aligned, and forcing left made the share count sit under the left edge
   of a right-aligned percentage. It only needs to opt out of justification. */
.symname{text-align:inherit;hyphens:manual}
@media(max-width:560px){
  /* Too few words per line on a phone for justification to hold together. */
  .wrap p, main.wrap p, article p, article li, .lede{text-align:left}
}
/* Cells in the by-window table hold a value plus a smaller second line, so
   rows are a mix of one and two lines. Baseline alignment pinned the
   single-line cells to the first line of their neighbours, leaving them
   sitting high; middle keeps a row reading as one row. */
table.arc td,table.arc th{vertical-align:middle}
table.arc td .symname{margin-top:2px}
/* The reading is a direction pair, so it is tinted by direction rather than by
   sign of a number: aligned moves read calm, mixed ones stand out. */
.read-up{color:var(--mint-d,#0F6E56);font-weight:600}
.read-down{color:var(--muted,#5A5E70);font-weight:600}
.read-warn{color:var(--rose-d,#A33860);font-weight:700}
/* Trends page rhythm.
   The page grew section by section and each brought its own margins, so the
   gaps between chart panels, tables and headings all differed. One rule set,
   applied to every direct section, so the spacing reads as deliberate. */
.wrap > section > h2.sec{margin:0 0 6px}
.wrap > section > .note{margin:0 0 12px}
.wrap > section > .panel{margin:0 0 11px}
.wrap > section > .tablewrap{margin:0 0 11px}
.wrap > section > details.chartdata{margin:8px 0 0}
.trendsum{margin:6px 0 14px}
.qtab th,.qtab td{padding:7px 9px;font-size:13.5px}
.qtab .symname{font-weight:400;text-transform:none;letter-spacing:0}
.qmore{font-size:11.5px;color:var(--hint,#9094a3);margin-top:8px}
/* .panel already carries a 5px border-top accent, so recolour THAT rather
   than adding an inset shadow -- doing both produced two stacked bars in two
   different colours. Same mechanism as the existing .panel.t-teal variant. */
.panel.qc-build_up{border-top-color:var(--green,#2E7D12)}
.panel.qc-build_down{border-top-color:var(--red,#C0392B)}
.panel.qc-cut_up{border-top-color:var(--sky-d,#1C5C9E)}
.panel.qc-cut_down{border-top-color:var(--hint,#9094a3)}
.rb{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:800}
.rb-high{background:var(--rose,#FCEAF0);color:var(--rose-d,#A33860)}
.rb-moderate{background:var(--peach,#FDF0E6);color:#9A5A22}
.rb-low{background:var(--mint,#E4F7EF);color:var(--mint-d,#0F6E56)}
/* Gain/loss colouring. Defined per page until now, so any page that did not
   carry its own copy rendered changes in plain ink -- the one visual cue that
   actually carries meaning in a table of numbers. Stated once here. */
.up{color:var(--green,#2E7D12)}
.down{color:var(--red,#C0392B)}
td .up,td .down,th .up,th .down{font-weight:700}
/* The bracketed rupee amount beside a percentage inherits the same hue but
   sits back, so the percentage stays the thing you read first. */
.pctb{font-weight:600;opacity:.72;font-size:.92em}
/* Adjacent-page nav (dates, stocks, sectors). Defined on the archive only, so
   the sector pages stacked their links as a bare list. Fourth shared class that
   was used sitewide but declared on one page. */
.datenav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
/* Related-links block. These rows were a run-on line of arrow links dropped at
   the bottom of several pages -- useful for crawl depth, but reading as stray
   text rather than navigation. Given a label and chip treatment they look
   deliberate, and the arrows come out since the chip already signals a link. */
.related{margin:26px 0 0}
.related .rl-h{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted,#5A5E70);font-weight:800;margin:0 0 9px}
.related .rl-row{display:flex;flex-wrap:wrap;gap:8px}
.related a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  border:1px solid var(--line2,rgba(31,35,51,.16));border-radius:20px;background:#fff;
  color:var(--indigo-d,#3C3489);font-size:13.5px;font-weight:600;text-decoration:none}
.related a:hover{border-color:var(--indigo,#6C63D6);background:var(--lav,#EEECFB)}

/* ---- vertical rhythm -------------------------------------------------
   Sections, panels and tables each carried their own margins, set page by
   page, so the gaps between blocks ranged from 8px to 40px on otherwise
   identical layouts. One scale, stated here because TOKENS_CSS is injected
   last and therefore wins over the per-page rules that caused the drift. */
/* Halved from 22px: the page carries a dozen sections now, and the wider
   gap pushed the lower ones a long way down without adding clarity. */
main.wrap > section, .wrap > section{margin:0 0 11px}
main.wrap > section:last-of-type, .wrap > section:last-of-type{margin-bottom:0}
.panel, .arcpanel{margin:0 0 11px}
.panel:last-child, .arcpanel:last-child{margin-bottom:0}
.tablewrap{margin:0}
.arcpanel > .tablewrap:last-child, .panel > .tablewrap:last-child{margin-bottom:0}
.kpis, .kpis4, .cards2, .cards{margin:0 0 18px}

/* Disclaimer sat 24px below the content and then the footer added its own
   padding on top, leaving a conspicuous empty band on every page. */
/* 14px above, 6px below.
   `body .disc` rather than `.disc`: every page declares its own .disc with an
   explicit margin-top, and at equal specificity the page's own <style> wins on
   source order. One extra element in the selector settles it without !important.
   The rule that follows zeroes the bottom margin of whatever sits directly
   before the disclaimer, so the gap is the same whether it follows a panel, a
   section or a paragraph. */
body .disc{margin:14px auto 6px}
body :is(section,div,article,p,nav,table,details):has(+ .disc){margin-bottom:0}
/* Zero the section's own top padding too: the header-gap rule gives every
   first-child block 24px, and the disclaimer's wrapper section was picking it
   up even though it sits at the foot of the page, adding 24px to the 14px. */
body section:has(> .disc){margin-top:0;padding-top:0}
/* On the dashboard and trends the disclaimer sits inside its own <section>, so
   the element before it is a sibling of that section rather than of the
   disclaimer. Reach one level out to zero the same gap. */
body :is(section,div,article):has(+ section > .disc){margin-bottom:0}
footer{margin-top:0}
/* On the dashboard and trends the disclaimer sits inside a bare <section>
   whose own bottom padding added a second gap above the footer. Collapse it
   when the section holds nothing but the disclaimer. */
section:has(> .disc:only-child){padding-bottom:0;margin-bottom:0}
body > section:last-of-type{padding-bottom:0}
@media(max-width:760px){
  main.wrap > section, .wrap > section, .panel, .arcpanel{margin-bottom:8px}
  body .disc{margin:12px auto 6px}
}
.datenav .arcbar,a.arcbar{display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border:1px solid var(--line2,rgba(31,35,51,.16));border-radius:20px;
  background:#fff;color:var(--indigo-d,#3C3489);font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap}
.datenav .arcbar:hover,a.arcbar:hover{border-color:var(--indigo,#6C63D6);
  background:var(--lav,#EEECFB)}
.kpis4 .kpi{border-radius:12px;padding:13px 15px}
.kpis4 .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted,#5A5E70);font-weight:700}
.kpis4 .val{font-size:23px;font-weight:800;line-height:1.2;margin-top:3px;
  font-variant-numeric:tabular-nums}
.kpis4 .sub2{font-size:11px;color:var(--muted,#5A5E70);margin-top:2px}
.kpis4 .c-lav{background:var(--lav,#EEECFB)}.kpis4 .c-lav .val{color:var(--lav-d,#4A3F9E)}
.kpis4 .c-sky{background:var(--sky,#E8F2FD)}.kpis4 .c-sky .val{color:var(--sky-d,#1C5C9E)}
.kpis4 .c-mint{background:var(--mint,#E4F7EF)}.kpis4 .c-mint .val{color:var(--mint-d,#0F6E56)}
.kpis4 .c-peach{background:var(--peach,#FDF0E6)}.kpis4 .c-peach .val{color:var(--peach-d,#9A5A22)}

/* Gap between the sticky header and the page title. Every page wraps its title
   in a differently named container -- .hero, .lead, .sdir, .wrap, main.wrap --
   each with its own top padding, so the measured gap ranged from 0px (api,
   stock, methodology) to 38px (learn, faq, news, contact, brokers, privacy,
   snapshot) with trends and screener at 24px. Normalised on the 24px those two
   already used, since they read correctly. Scoped to the first such block after
   the header so inner panels are untouched. */
header + * > .hero:first-child,
header + * > .lead:first-child,
header + * > .sdir:first-child,
main.wrap > .hero:first-child,
main.wrap > .lead:first-child,
main.wrap > .eyebrow:first-child,
.wrap > .hero:first-child,
.wrap > .lead:first-child,
.wrap > .sdir:first-child,
.wrap > .eyebrow:first-child,
main.wrap > .sdir:first-child{padding-top:24px}
/* api and stock put the eyebrow straight inside the wrap with no title block,
   and archive set its own 22px inline. Catch the eyebrow itself wherever it is
   the first thing after the header. */
main.wrap > .eyebrow:first-child,
.sdir > .eyebrow:first-child{margin-top:24px}
.symcell .symtext{min-width:0}
.symname{color:var(--muted,#5A5E70);font-size:12.5px;line-height:1.35}
/* The boxed disclaimer. Two faults, both invisible in the markup:
   - On the dashboard its <section> is a direct child of <body>, outside the
     1080px .wrap, so the box ran the full viewport width while every other
     element on the page stopped at 1080. Constraining it here fixes the one
     page without restructuring markup the client scripts depend on.
   - The calculator declared its own .disc without display:flex, so the warning
     icon stacked on top of the text instead of sitting beside it.
   Stated once so every page renders the same box. */
.disc{display:flex;gap:12px;align-items:flex-start;
  background:var(--peach,#FDF0E6);border:1px solid rgba(154,90,34,.22);
  border-radius:16px;padding:16px 20px;font-size:13.5px;color:var(--peach-d,#9A5A22);
  line-height:1.65;margin:24px auto 0;max-width:1080px;box-sizing:border-box}
.disc>svg,.disc .ico{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
/* Where the box sits outside a .wrap (the dashboard and news put their
   disclaimer section directly under <body>), give it the wrap's own width and
   let the auto margins centre it. Setting explicit left/right margins here
   instead -- as the first attempt did -- pins it to the left edge, which is
   why it still looked off-centre on those two pages. */
body>section>.disc,body>.disc{max-width:1040px;width:calc(100% - 40px)}
@media(max-width:760px){
  .disc{padding:14px 16px}
  body>section>.disc,body>.disc{width:calc(100% - 28px)}
}
@media(max-width:760px){
  .panel,.arcpanel{padding:18px 16px}
}
/* .sub is the hero subtitle on every page, not small print. It used to sit in
   the rule above, which -- being injected last -- silently shrank it to 13px
   and beat each page's own 17px rule. Pages that looked right (brokers, faq,
   learn) only did so because they happen to use a more specific selector.
   Dropping .sub here lets every page's intended size apply. Components that
   reuse .sub for genuinely small text (e.g. .stockhead .sub) set their own
   size with higher specificity and are unaffected. */
/* Numeric columns line up only with tabular figures; without this the digits
   in a rupee column jitter row to row. */
td.r,td.num,th.r,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* Company logo chip, shared by the Top 100, screener, archive and stock
   directory so one company looks the same everywhere on the site. */
.lgo{width:22px;height:22px;border-radius:5px;object-fit:contain;background:#fff;
  border:1px solid var(--line,#e6e6ef);vertical-align:-6px;margin-right:7px;flex:0 0 auto}
.lgo-fb{width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;
  justify-content:center;font-size:9px;font-weight:800;letter-spacing:.02em;
  background:var(--lav,#EEECFB);color:var(--indigo-d,#3C3489);vertical-align:-6px;
  margin-right:7px;flex:0 0 auto}
@media(max-width:760px){
  :root{--fs-h1:28px; --fs-h2:19px; --fs-h3:16px}
}
/* ---- chart data tables (progressive enhancement) ---- */
.chartdata{margin:10px 0 2px;border:1px solid var(--line,#e6e6ef);border-radius:10px;
  background:#fcfcff;overflow:hidden}
.chartdata>summary{cursor:pointer;list-style:none;padding:9px 13px;font-size:var(--fs-small);
  font-weight:650;color:var(--indigo-d,#3C3489);display:flex;align-items:center;gap:8px}
.chartdata>summary::-webkit-details-marker{display:none}
.chartdata>summary::before{content:"\25b8";transition:transform .15s;font-size:11px}
.chartdata[open]>summary::before{transform:rotate(90deg)}
.chartdata>summary:hover{background:var(--lav,#EEECFB)}
.chartdata>summary:focus-visible{outline:2px solid var(--indigo,#6C63D6);outline-offset:-2px}
.cd-n{margin-left:auto;font-weight:400;color:var(--muted,#5A5E70);font-size:var(--fs-tiny)}
.cd-wrap{max-height:340px;overflow:auto;border-top:1px solid var(--line,#e6e6ef)}
.cd-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.cd-table th,.cd-table td{padding:6px 12px;border-bottom:1px solid var(--line,#e6e6ef);
  text-align:left;white-space:nowrap}
.cd-table thead th{position:sticky;top:0;background:var(--mint,#E4F7EF);z-index:1;
  font-size:var(--fs-tiny)}
.cd-table tbody th{font-weight:500;color:var(--muted,#5A5E70)}
.cd-table td.r,.cd-table th.r{text-align:right;font-variant-numeric:tabular-nums}
.cd-err{background:var(--peach,#FDF0E6);color:var(--peach-d,#9A5A22);padding:9px 12px;
  border-radius:8px;font-size:var(--fs-small);margin:8px 0}
/* ---- loading skeletons ---- */
.is-skel{position:relative;min-height:64px;border-radius:10px;
  background:linear-gradient(90deg,#f2f2f8 25%,#e9e9f4 37%,#f2f2f8 63%);
  background-size:400% 100%;animation:skel 1.3s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.is-skel{animation:none}}
/* ---- pager ---- */
.pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;
  font-size:var(--fs-small)}
.pager button{border:1px solid var(--line,#e6e6ef);background:#fff;border-radius:8px;
  padding:6px 11px;cursor:pointer;font:inherit;color:var(--indigo-d,#3C3489)}
.pager button[disabled]{opacity:.4;cursor:default;color:var(--muted,#5A5E70)}
.pager button:not([disabled]):hover{border-color:var(--indigo,#6C63D6)}
.pager .pg-info{color:var(--muted,#5A5E70)}
.pager .pg-size{margin-left:auto}
.pager select{border:1px solid var(--line,#e6e6ef);border-radius:8px;padding:5px 8px;font:inherit}
.exonly{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:5px;
  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted,#5A5E70);
  background:rgba(31,35,51,.06);vertical-align:1px;white-space:nowrap}
/* Three pages each carried their own .badge rule at 9.5px/10px and weight 800.
   The bold treatment shouted for attention on rows where the exchange split is
   unremarkable, and the size drift made otherwise identical tables look
   different. One definition here, injected last, settles both. */
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 6px;
  border-radius:6px;margin-left:6px;background:var(--lav,#EEECFB);
  color:var(--indigo-d,#3C3489);vertical-align:1px;letter-spacing:.02em;
  white-space:nowrap}
.badge.nb{background:var(--mint,#E4F7EF);color:var(--mint-d,#0F6E56)}
.badge.bo{background:var(--rose,#FCEAF0);color:var(--rose-d,#A33860)}
.eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-d,#0F6E56);font-weight:800;display:flex;align-items:center;
  gap:8px;margin-bottom:8px}
.eyebrow .ico{width:16px;height:16px}
/* Footer. Fifteen links in one wrapping row broke labels mid-phrase and gave
   the reader no scanning order, so they are grouped into columns. Defined here
   because TOKENS_CSS is injected last and therefore wins over each page's own
   footer rules, several of which still set the old flat-row layout. */
footer a{margin-right:0}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px 30px;
  margin-bottom:22px}
footer .fcol h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink,#1F2233);font-weight:800;margin:0 0 9px}
footer .fcol a{display:block;margin:0 0 7px;color:var(--muted,#5A5E70);
  font-weight:500;font-size:14px}
footer .fcol a:hover{color:var(--indigo,#6C63D6)}
footer .fname{font-weight:800;font-size:17px;color:var(--ink,#1F2233)}
footer .fname span{color:var(--indigo,#6C63D6)}
/* Selector must outrank `footer .fcol a{display:block;margin:0 0 7px}`, which
   is the column-link rule and also matches this anchor. Losing to it forced
   the chip to display:block, so it stretched the full column width and its
   top margin was replaced. */
footer .fcol a.fsocial{display:inline-flex;align-items:center;gap:7px;margin:22px 0 0;
  padding:6px 12px;border:1px solid var(--line2,rgba(31,35,51,.16));border-radius:16px;
  color:var(--ink,#1F2233);font-size:12.5px;font-weight:700;text-decoration:none;
  line-height:1}
footer .fcol a.fsocial svg{width:13px;height:13px}
footer .fcol a.fsocial:hover{background:var(--ink,#1F2233);color:#fff;
  border-color:var(--ink,#1F2233)}
footer .fbrand p{color:var(--hint,#9094a3);font-size:13px;line-height:1.6;
  margin:8px 0 0;max-width:32ch}
footer .fbase{border-top:1px solid var(--line,rgba(31,35,51,.09));padding-top:15px;
  display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  font-size:13px;color:var(--hint,#9094a3)}
footer .fbase a{color:var(--muted,#5A5E70);font-weight:600}
@media(max-width:760px){
  footer .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  footer .fbrand{grid-column:1/-1}
}

/* ===================================================================
   ONE TILE, EVERYWHERE  (Phase 4)
   Dashboard, Trends, the archive, stock, date and Insights pages each drew
   stat tiles their own way -- four designs, with colour following position
   rather than meaning. These rules restyle every tile family on the site
   (.stat, .tile, .kpis4 .kpi) into one design, so no page's markup had to
   change beyond its colour class.

   Colour carries meaning, fixed site-wide:
     c-sky    a level or total            c-mint   money coming in
     c-peach  a change over time          c-rose   money going out
     c-lav    a count, share or ratio
   Each tone also sets its icon, so a tile's colour and its icon can never
   disagree. Values are ink; green or red only when they are a signed change.
   =================================================================== */
:is(.stat,.tile,.kpi).c-sky,.c-sky{--t:var(--sky);--t-d:var(--sky-d);--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C5C9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 8h6M9 11h6M13 11c0 3-4 3-4 3l4 4'/%3E%3C/svg%3E")}
:is(.stat,.tile,.kpi).c-peach,.c-peach{--t:var(--peach);--t-d:var(--peach-d);--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A5A22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M21 7h-5M21 7v5'/%3E%3C/svg%3E")}
:is(.stat,.tile,.kpi).c-mint,.c-mint{--t:var(--mint);--t-d:var(--mint-d);--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E")}
:is(.stat,.tile,.kpi).c-rose,.c-rose{--t:var(--rose);--t-d:var(--rose-d);--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A33860' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E")}
:is(.stat,.tile,.kpi).c-lav,.c-lav{--t:var(--lav);--t-d:var(--lav-d);--t-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A3F9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v9l7.8 4.5'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")}

/* Default tone in :where() -- zero specificity -- so any .c-* class wins.
   Inside :is() it took the weight of ".kpis4 .kpi" (two classes) and beat
   every single-class tone, turning every tile on the site lavender. */
:where(.stat,.tile,.kpis4 .kpi){--t:var(--lav);--t-d:var(--lav-d)}
:is(.stat,.tile,.kpis4 .kpi){
  border:1px solid var(--line);border-top:4px solid var(--t-d);border-radius:16px;
  padding:15px 17px 14px;background:linear-gradient(180deg,var(--t),var(--card,#fff) 85%);
  box-shadow:none;position:relative;overflow:hidden;min-width:0}
:is(.stat,.tile,.kpis4 .kpi) .ic{display:none}
:is(.stat,.tile,.kpis4 .kpi) .lbl{display:flex;align-items:center;gap:8px;font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  opacity:1;line-height:1.3;margin:0}
:is(.stat,.tile,.kpis4 .kpi) .lbl::before{content:"";flex:none;width:26px;height:26px;
  border-radius:8px;background:#fff var(--t-ico) center/15px no-repeat;
  box-shadow:0 0 0 1px var(--line)}
:is(.stat,.tile,.kpis4 .kpi) .val{font-size:24px;font-weight:800;letter-spacing:-.02em;
  line-height:1.2;margin-top:9px;color:var(--ink);font-variant-numeric:tabular-nums}
:is(.stat,.tile,.kpis4 .kpi) :is(.chg,.sub,.sub2){font-size:12.5px;font-weight:600;
  color:var(--muted);margin-top:3px;opacity:1}
/* signed values keep their direction colour */
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub).up,
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub).pos,
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub) .up{color:var(--green,#2E7D12)}
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub).down,
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub).neg,
:is(.stat,.tile,.kpis4 .kpi) :is(.val,.chg,.sub) .down{color:var(--red,#C0392B)}
:is(.cards,.cards2,.cards4,.tiles,.kpis4){gap:14px}
@media(max-width:760px){
  :is(.stat,.tile,.kpis4 .kpi){padding:13px 14px 12px}
  :is(.stat,.tile,.kpis4 .kpi) .val{font-size:21px}
}

/* ===================================================================
   ONE SPACING SCALE  (Phase 4)
   Written against POSITION in the content column, not class names: every
   page names its blocks differently (.panel, .arcpanel, .lead, .bsech,
   .controls, section...), so a rule listing classes left most pages
   untouched. The column is the page's own main/.wrap -- never the header's
   or footer's .wrap, which are not children of <body>.
     24px  between any two blocks             36px  before a section heading
     20px  intro -> first block               10px  heading or note -> its content
      8px  title -> intro
   Margins are set on the FOLLOWING block and cleared below every block, so
   a gap is exactly the scale value instead of whichever margin was larger.
   =================================================================== */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>*{margin-bottom:0}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>*+*{margin-top:24px}
/* intro group: eyebrow, title, standfirst, byline */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>.eyebrow+:is(h1,.stockhead){margin-top:8px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(h1,.stockhead)+*{margin-top:8px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(.lede,.sub,.dek,.idek)+:is(.lede,.sub,.dek,.idek,.updated,.iby,.by,p){margin-top:8px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(.lede,.sub,.dek,.idek,.updated,.iby,.by)
  +:not(.lede,.sub,.dek,.idek,.updated,.iby,.by,p){margin-top:20px}
/* section headings open a new section; what they introduce sits close */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>*+:is(h2,h2.sec,.bsech){margin-top:36px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>:is(h2,h2.sec,.bsech)+*{margin-top:10px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>:is(.note,p.note,.count,.controls,.ysum)+*{margin-top:10px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>:is(.tablewrap,#tblwrap)+:is(.note,p.note){margin-top:10px}
/* restated last so they win ties: a heading always opens a section, and the
   disclaimer is always a full block away, whatever precedes them */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>*+:is(h2,h2.sec,.bsech){margin-top:36px}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap,body>section)>*+:is(div.disc,section.disc,.disc.disc){margin-top:24px}
/* header -> first content: exactly 24px, once.
   Two older rules stacked -- ".wrap > .eyebrow:first-child" added 24px of
   padding and "main.wrap > .eyebrow:first-child" another 24px of margin -- and
   some columns carried their own top padding too, so the title sat 26px under
   the header on seven pages and 50px on eight. The column now adds nothing;
   the first block carries the 24px. */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap){padding-top:0}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:first-child{margin-top:0}
/* a leading <style>/<script> is not content: the first VISIBLE block is the one
   that must sit flush, or it picks up the between-blocks gap on top of its own */
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(style,script,link,noscript):first-child+*,
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(style,script,link,noscript):first-child+:is(style,script,link,noscript)+*{margin-top:0}
:is(body>.wrap:not(.nav),body>main,body>main>.wrap)>:is(.eyebrow,.hero,.lead,.sdir):first-child{padding-top:24px}
/* the same rhythm inside panels, whose own padding frames the edges */
.panel>h2:first-child,.panel>h2.sec:first-child{margin-top:0}

/* ===================================================================
   ONE CHART PALETTE  (Phase 4)
   Charts read these through window.MTFChart (render_tokens), so every chart
   on the site draws from one definition -- and follows the theme. Colour
   means the same as on the tiles:
     line      the book's level              up / down  a signed change
     in / out  money coming in / going out   warn       drawdown
     cat1..5   categorical, in the snapshot card's order
   =================================================================== */
:root{--ch-line:#6C63D6;--ch-line-fill:rgba(108,99,214,.12);
  --ch-up:#0E9A72;--ch-down:#C0392B;--ch-in:#2BB890;--ch-out:#E4779C;--ch-warn:#E8945A;
  --ch-cat1:#6C63D6;--ch-cat2:#2BB890;--ch-cat3:#3B8FD6;--ch-cat4:#C76B92;--ch-cat5:#E0934B;
  --ch-grid:rgba(31,35,51,.06);--ch-text:#5A5E70;--ch-label:#1F2233;
  --ch-price:#7C8194;--ch-up-ink:#0B5E46;--ch-down-ink:#8A241A}

/* Light-mode contrast, found by the audit that checked dark mode. The hint
   grey (#9094A3) measured 2.90:1 on the page background -- under the 4.5:1
   small text needs -- on every byline, "data as of" line and the footer. */
:root{--hint:#666B7D}
.rlist .rk{background:var(--teal-d)}

/* "Download this data" row -- one style wherever data can be taken away */
.dlrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.dlrow .dllbl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.dlbtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:700;
  color:var(--indigo-d);background:var(--card);border:1px solid var(--line2);border-radius:999px;
  padding:6px 13px;cursor:pointer;text-decoration:none}
.dlbtn:hover{border-color:var(--indigo)}
.dlbtn::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%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='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center/contain no-repeat}
.dlrow .dllink{font-size:13.5px;font-weight:700;color:var(--indigo-d);text-decoration:none}
.dlrow .dllink:hover{text-decoration:underline}

/* ONE stock cell, everywhere a table lists stocks: symbol in bold, company name
   below in small grey, column pinned when the table scrolls sideways. Defined
   once here (it was a different pattern in each of ~10 tables). Built by
   site_shared.stock_cell() in Python and IndiaMTF.stockCell() in the browser. */
.stkc{text-align:left}
td.stkc,th.stkc{position:sticky;left:0;z-index:2;background:var(--card,#fff);
  box-shadow:1px 0 0 var(--line,#E7E6F0)}
th.stkc{z-index:3}
.stk2{display:flex;align-items:center;gap:8px;min-width:0}
.stk2 .t{display:flex;flex-direction:column;min-width:0}
.stk2 .s{font-weight:800;color:var(--indigo-d,#3C3489);text-decoration:none;white-space:nowrap}
.stk2 a.s:hover{text-decoration:underline}
.stk2 .n{font-size:11.5px;line-height:1.3;color:var(--muted,#5A5E70);font-weight:500;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){.stk2 .n{max-width:130px}}
/* Click-to-sort headers (shared script, any table without its own sorter). */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--indigo,#6C63D6)}
th.sortable[aria-sort="ascending"]::after{content:" ▴";opacity:.7}
th.sortable[aria-sort="descending"]::after{content:" ▾";opacity:.7}
/* ONE period selector: the .qtogs/.qtog pills the stock charts introduced. A
   chart offered in several periods is a .rngfig: a .qtogs row whose buttons
   carry data-r, and one .rngp panel per period (switched by the shared script). */
.rngfig .rnghead{display:flex;justify-content:flex-end;margin:0 0 8px}
.rngfig .rngp[hidden]{display:none}

/* One position for the disclaimer on every page: 24px below the block above
   it -- the standard gap between blocks. Pages placed it in different wrappers
   (inside the content column, in its own section, after the column), and the
   gap came out 14px on seven pages and 24px on seven. A section holding only
   the disclaimer adds no margin of its own, so the gap is the same everywhere. */
.disc{margin-top:24px !important}
section:has(> .disc:only-child){margin-top:0 !important;padding-top:0 !important}
/* ===================================================================
   DARK MODE  (Phase 4)
   Light is the default whatever the device setting; dark is opt-in from the
   header toggle and remembered per browser. Everything that reads a token
   follows automatically -- 90% of the site's colour declarations do. The few
   literal colours left in page CSS (white cards, two light greys, the
   disclaimer's peach) are mapped to these tokens by MTFTheme at runtime.
   =================================================================== */
html[data-theme="dark"]{color-scheme:dark;
  --bg:#12131A;--card:#1B1D27;--soft:#232633;--ink:#E8E9F0;--muted:#A6AABB;--hint:#80859A;
  --line:#2C2F3D;--line2:#3A3E50;
  --lav:#252343;--mint:#15302A;--sky:#172A3D;--peach:#33261A;--rose:#35202A;
  --lav-d:#B3ABFF;--mint-d:#5FD3AE;--sky-d:#7DB8F0;--peach-d:#F0B27A;--rose-d:#F08FB0;
  --indigo:#8C84F0;--indigo-d:#B3ABFF;--teal:#3CCB9F;--teal-d:#5FD3AE;--green:#4CC38A;--red:#F07A6E;
  --ch-line:#8C84F0;--ch-line-fill:rgba(140,132,240,.18);--ch-up:#3CCB9F;--ch-down:#F07A6E;
  --ch-in:#3CCB9F;--ch-out:#F08FB0;--ch-warn:#F0B27A;
  --ch-cat1:#8C84F0;--ch-cat2:#3CCB9F;--ch-cat3:#62A8EC;--ch-cat4:#E08AB0;--ch-cat5:#F0A865;
  --ch-grid:rgba(255,255,255,.08);--ch-text:#A6AABB;--ch-label:#E8E9F0;
  --ch-price:#9CA1B3;--ch-up-ink:#7FE3C1;--ch-down-ink:#FF9E93}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
/* the wordmark PNG is dark ink on transparent: invert it, keep its hues */
html[data-theme="dark"] header .brand img{filter:invert(1) hue-rotate(180deg) brightness(1.08)}
html[data-theme="dark"] header{background:rgba(18,19,26,.92);border-bottom-color:var(--line)}
html[data-theme="dark"] :is(input,select,textarea){background:var(--soft);color:var(--ink);border-color:var(--line2)}
html[data-theme="dark"] .disc{background:var(--peach);border-color:rgba(240,178,122,.28);color:var(--ink)}
html[data-theme="dark"] :is(img.ilg,.lgo img,.mtf-logo img){background:#fff}
/* white text sitting on a tone that turns light in dark mode */
html[data-theme="dark"] :is(.rlist .rk,article th){color:#12131A}
html[data-theme="dark"] pre{background:#0B0C11;border:1px solid var(--line)}
/* theme toggle */
.navtools{display:flex;align-items:center;gap:8px;order:3;margin-left:6px}
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);cursor:pointer;padding:0}
.themebtn:hover{border-color:var(--indigo)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.themebtn .sun{display:none}
html[data-theme="dark"] .themebtn .sun{display:block}
html[data-theme="dark"] .themebtn .moon{display:none}
header .nav .navlinks{order:2}