/* Fund Tracker India — theme "B · Cards, white" (user decision 2026-09-29; spec ~/Claude/tracker/planning/
   FUND-TRACKER-B-THEME-2026-09-29.md, values from ~/Claude/ft-design build.py DIRS["B"]). Pure white,
   never warm. The older token names below alias the B tokens so every existing rule follows them. */
:root {
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;   /* the device's own UI face: San Francisco on Apple, Segoe on Windows, Roboto on Android (owner, 2026-09-30) */
  --bg: #FFFFFF; --surface: #FFFFFF;
  --ink: #111827; --ink2: #374151; --muted: #6B7280;
  --muted-chip: #636B77;   /* inactive text ON the --chip track (nav, sections, seg): --muted there is 4.23:1, this is 4.72; dark keeps --muted (5.83) */
  --line: #E2E5EA; --line2: #EEF0F3; --hover: #F7F8FA; --chip: #EEF0F3; --axis: #C3C8D0; --barn: #CBD5E1;
  --up: #08806F; --down: #E0323F; --upbg: #E3F5F1; --downbg: #FDE8EA;
  --down-ink: #C92B38;   /* coral for TEXT: #E0323F is 4.47:1 on white, 3.8 on --downbg; this is 5.4 / 4.6 (owner ok 2026-09-30). Fills keep --down */
  --up-ink: #067063;   /* darker teal for TEXT: #08806F is 4.85:1 on white but only 4.25 on --chip / 4.30 on --upbg; this is 5.99 / 5.25 / 5.31. Fills keep --up */
  --accent: #0B5FD7; --onaccent: #fff; --ring: rgba(11, 95, 215, .18);
  --eo: cubic-bezier(.22, 1, .36, 1);
  --rseg: 10px; --rin: 10px; --rbtn: 10px; --rcard: 16px;
  /* site-specific tones the mockups do not name */
  --lev: #8A5A00; --lev-bg: #F6ECD4;
  /* aliases (pre-B names) */
  --paper: var(--bg); --card: var(--surface); --muted2: var(--muted); --line-soft: var(--line2);
  --bar: var(--barn); --edge: var(--axis); --dash: var(--axis); --track: var(--line2);
  --link: var(--accent); --link-hover: #0848A8; --on-ink: #fff;
  --dn: var(--down); --dn-bg: var(--downbg); --up-bg: var(--upbg); --flat: var(--ink2); --flat-bg: var(--chip);
  --shadow: none;
  --serif: var(--ui); --sans: var(--ui); --mono: var(--ui);
  --gut: 32px; --toph: 68px; --sec: 32px;   /* --sec: the one gap between sections (A6) */
  color-scheme: light;
}
/* colour-blind toggle (spec: .cb; the site sets data-palette="cb" on <html>) */
:root[data-palette="cb"] { --up: #1F6FD1; --down: #D9650B; --upbg: #E6F0FC; --downbg: #FDEEE2; --down-ink: var(--down); --up-ink: #17539f; }   /* #1F6FD1 is 4.33:1 on --chip / 4.29 on --upbg; this is 6.63 / 6.57 */
/* light always, whatever the device says (owner 11-02); the header button pins dark (data-theme on <html>, localStorage ft-theme) */
:root[data-theme="dark"] {
  --bg: #0F1115; --surface: #16191F; --ink: #ECEEF2; --ink2: #C9CED6; --muted: #9AA1AC; --muted-chip: var(--muted);
  --line: #2A2F37; --line2: #22262D; --hover: #1C2027; --chip: #22262D; --axis: #4A515C; --barn: #3A414B;
  --up: #3CC4A8; --down: #FF6B75; --upbg: #12332D; --downbg: #3A1A1E; --down-ink: var(--down); --up-ink: var(--up);
  --accent: #6EA3EE; --onaccent: #0F1115; --ring: rgba(110, 163, 238, .25);
  --lev: #E2AA45; --lev-bg: #3A2D12; --link-hover: #9CC0F5; --on-ink: #0F1115;
  color-scheme: dark;
}
:root[data-theme="dark"][data-palette="cb"] { --up: #6FA8FF; --down: #FFA552; --upbg: #182B45; --downbg: #3D2714; --down-ink: var(--down); --up-ink: var(--up); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/20px var(--ui); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; transition: color .15s; }
@media (pointer: coarse) { .page a:not([class]) { padding-block: 5px; } }   /* 10-25 audit: 14px in-text links on phones; inline padding grows the tap box to ~24px without moving lines */
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
.num, .r { font-variant-numeric: tabular-nums lining-nums; }
.serif { font-family: var(--ui); font-weight: 600; letter-spacing: -.01em; }
.strong { font-weight: 600; color: var(--ink); }
.muted { color: var(--muted); }
.note { font-size: 12px; line-height: 16px; color: var(--muted); }
.label { font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 500; }
.big { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.h2 { font-size: 17px; line-height: 24px; font-weight: 700; }
.r { text-align: right; }
[hidden] { display: none !important; }
.t-up { color: var(--up-ink); } .t-dn { color: var(--down-ink); } .t-warn { color: var(--lev); font-weight: 600; } .t-flat { color: var(--muted); } .t-lev { color: var(--lev); }
.pill { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--chip); color: var(--ink2); }
.pill.t-up { background: var(--upbg); color: var(--up-ink); } .pill.t-dn { background: var(--downbg); color: var(--down-ink); } .pill.t-flat { background: var(--chip); color: var(--ink2); } .pill.t-lev { background: var(--lev-bg); color: var(--lev); }   /* --muted on --chip measured 4.23:1, same bug as .buckets .note */
/* up/down are never colour alone: glyph + word + colour (● New ▲ Added ▼ Trimmed/Reduced ○ Exited) */
[data-act="New"]::before { content: "●"; } [data-act="Added"]::before { content: "▲"; }
[data-act="Trimmed"]::before, [data-act="Reduced"]::before { content: "▼"; } [data-act="Exited"]::before { content: "○"; }
[data-act]::before { font-size: .85em; margin-right: 4px; }
.pill[data-act]::before { margin-right: 0; }
.linkbtn { background: none; border: 0; padding: 0 4px; border-radius: 6px; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.note > .linkbtn:first-child { padding-left: 0; }                   /* Follow starts on the text edge */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* header: sticky white bar, hairline below; brand | centred segmented nav | pill search */
.top { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line2); }
.top-in { max-width: 1200px; height: var(--toph); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.brand { font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; justify-self: start; min-height: 44px; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-t { display: block; line-height: 1.05; }
.brand-by { display: block; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.panel.creator { display: flex; flex-direction: row; align-items: center; gap: 32px; }
.creator > .prose { flex: 1; min-width: 0; }
.creator .h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
.creator-name { font-weight: 600; color: var(--ink); margin-top: 4px; }
.creator-links { display: flex; gap: 4px; margin-top: 8px; }
.creator-links a { justify-content: center; width: 36px; height: 36px; border-radius: var(--rin); color: var(--muted); transition: color .15s, background-color .15s; }
.creator-links a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.hero { display: flex; flex-direction: column; align-items: stretch; gap: var(--sec); padding-top: 24px; }   /* design 10-22: head, tiles: --sec apart */
.hero .head { align-items: flex-start; text-align: left; width: 100%; max-width: 760px; padding: 0; }
.hero .head .lede { margin: 0; }
.hero .searchbig { width: 100%; }
.hero .strip.glance { width: 100%; }
@media (max-width: 767px) { .hero { padding-top: 8px; } .hero .strip.glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brand-in { display: inline-flex; align-items: center; gap: 8px; }
/* the FTI mark spans the two lines exactly: the text box is trimmed to cap-top..last baseline, the mark stretches to it */
.brand-t { text-box: trim-both cap alphabetic; }
.brand-mark { height: 23px; width: auto; flex: none; }   /* = .brand-t trimmed: title cap top to byline baseline (23 px in SF) */
:root[data-theme="dark"] .brand-mark { filter: invert(1) hue-rotate(180deg); }
.mainnav { justify-self: center; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--rseg); background: var(--chip); font-size: 14px; }
.mainnav > a, .nav-g > summary { height: 38px; padding: 0 18px; border-radius: calc(var(--rseg) - 2px); display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--muted-chip); white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.mainnav > a:hover, .nav-g > summary:hover, .nav-g[open] > summary { color: var(--ink); text-decoration: none; }
.mainnav > a[aria-current], .nav-g > summary.cur { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line2); }
.nav-ic { display: none; order: -1; flex-shrink: 0; }
.searchbtn { justify-self: end; display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rin); background: var(--surface); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.searchbtn:hover { border-color: var(--axis); color: var(--ink2); }
.searchbtn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.searchbtn svg, .searchbig svg { flex-shrink: 0; }
.searchbtn-text { flex-grow: 1; white-space: nowrap; }
kbd { font-family: var(--ui); font-size: 12px; line-height: 16px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--surface); }

/* page */
.page { max-width: 1200px; margin: 0 auto; padding: 24px var(--gut) 80px; display: flex; flex-direction: column; gap: var(--sec); animation: fadein .32s var(--eo) both; }   /* opacity only: a transform here re-anchored the sticky strip 8px low */
@media (min-width: 1800px) { .top-in, .page { max-width: 1600px; } }   /* 10-24: big monitors left ~half the screen empty; laptops (≤1728) unchanged */
.head { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 0; }   /* design 10-22: no tail, the next block is --sec below */
.head.row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.head h1 { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -.01em; }   /* = .serif: 'Headlines 600' (owner 2026-09-30, 809b5f4); 800 here overrode it on every page (audit 10-04) */
.head .lede { font-size: 14px; line-height: 20px; color: var(--muted); max-width: 72ch; }
.meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 12px; font-size: 24px; font-weight: 700; flex-wrap: wrap; }
.summary { font-size: 14px; line-height: 20px; color: var(--ink2); margin-top: 8px; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: -12px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: var(--chip); font-size: 12px; font-weight: 700; color: var(--ink2); letter-spacing: .02em; }

/* "data as of": one line, expands to every source */
.asof-all { font-size: 12px; color: var(--muted); }
.asof-all summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; list-style: none; }
.asof-all summary::-webkit-details-marker { display: none; }
.asof-all summary .strong, .asof-all summary::after { white-space: nowrap; flex: none; }   /* label + toggle never break */
.asof-all summary::after { content: "Show all"; color: var(--accent); font-weight: 600; }
.asof-all[open] summary::after { content: "Hide"; }
/* stock page (declutter #7): the history fold, the one "Nothing to show" line, sources at the foot */
.history > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--accent); }
.history[open] > summary { margin-bottom: 8px; }
.panel.nothing { display: block; font-size: 14px; line-height: 22px; color: var(--ink2); }
.nothing > .label { display: block; margin-bottom: 4px; }
.srcfoot { gap: 8px; }
/* a section folded under its heading (house schemes, declutter #8) */
.fold > summary { cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
/* design 10-22: the header menus' thin chevron, not a triangle glyph (owner iPhone: "stray caret") */
.fold > summary :is(h2, h3)::after, .fx-d > summary .h2::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 3px 0 10px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateY(-4px) rotate(45deg); transition: transform .15s; }
.fold[open] > summary :is(h2, h3)::after, .fx-d[open] > summary .h2::after { transform: translateY(-1px) rotate(-135deg); }
.fold[open] > summary { margin-bottom: 16px; }
/* align 10-22: a phone-only fold is a plain heading from 768 px up (site.js keeps it open there): no chevron, no toggle */
@media (min-width: 768px) {
  .fold[data-phone-closed] > summary { cursor: auto; }
  .fold[data-phone-closed] > summary :is(h2, h3)::after { content: none; }
}
.asof-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* in-page section links: a segmented control on a --chip track */
.sections { display: flex; gap: 2px; padding: 3px; border-radius: var(--rseg); background: var(--chip); font-size: 13px; overflow-x: auto; scrollbar-width: none; align-self: flex-start; max-width: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent); }
/* page sections: a full-width strip under the header, sticky; the section in view is underlined */
/* clean 10-21 A1: the strip is opaque and full-bleed (its own box reaches both screen edges, so nothing shows
   through the gutters), no mask (a mask also faded its background); flush under the header at every width. */
.secbar { position: sticky; top: calc(var(--toph) + 1px); z-index: 4; display: flex; gap: 4px; margin: calc(24px - var(--sec)) calc(50% - 50vw) calc(24px - var(--sec)); padding: 0 calc(50vw - 50% - 12px); overflow: auto hidden; scrollbar-width: none; background: var(--bg); box-shadow: inset 0 -1px var(--line2); font-size: 14px; }
/* owner 10-22 (Safari): sticks under the header's 1 px rule, not beneath it; scrolls sideways only, and its 44 px links fill
   it exactly (the rule is a shadow, not a border), so a wheel over it can no longer lift the labels' top half out of view;
   24 px down to the first section */
.secbar::after { content: ""; position: sticky; right: 0; flex: none; width: 28px; margin-left: auto; background: linear-gradient(to right, transparent, var(--bg) 70%); pointer-events: none; }   /* scroll hint over the strip's own links only */
.secbar::-webkit-scrollbar { display: none; }
.secbar a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; color: var(--muted); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
@media (hover: hover) { .secbar a:hover, .sections a:hover { color: var(--ink); text-decoration: none; } }   /* design 10-22: a tap left the tab dark */
.secbar a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.sections::-webkit-scrollbar { display: none; }
.sections a { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: calc(var(--rseg) - 2px); color: var(--muted-chip); font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s; }
.sections a[aria-current] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line2); }
.card, .tile, .panel, .facts, .group, .fold, #read, main h2, main h3, .xtabs details, .guide dt { scroll-margin-top: calc(var(--toph) + 64px); }

/* KPI strip. design 10-10 (seamless, owner): no box per figure — each tile is a figure on a hairline rule at its left */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; }
.strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { border-left: 1px solid var(--line); padding: 2px 0 2px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: border-color .2s; }
/* A6: tiles in one row share their label, value and note rows, so the values sit on one baseline */
.strip:not(:has(> .tile > :nth-child(4))) > .tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; align-content: start; }
.tile-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tile-val .t-up, .tile-val .t-dn, .tile-val .t-flat { font-size: 13px; }

.facts { display: flex; flex-direction: column; gap: 8px; }
.facts p { font-size: 15px; line-height: 24px; color: var(--ink2); max-width: 80ch; }
.facts .serif { font-weight: 500; letter-spacing: 0; }   /* sentences, not headlines */

/* cards (stock page) */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
.card { border-top: 1px solid var(--line); padding: 20px 0 0; min-height: 312px; display: flex; flex-direction: column; gap: 16px; min-width: 0; transition: border-color .2s; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card-head h3 { font-size: 17px; line-height: 24px; font-weight: 700; }
.card-head .note { text-align: right; }
.card-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card-val .big { font-size: clamp(22px, 2.3vw, 30px); }
.card-val .pill { font-size: 12px; }
.buckets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.buckets a { min-height: 44px; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 0; border-radius: var(--rin); background: var(--chip); color: var(--ink); transition: background-color .15s; }
.buckets .note { color: var(--ink2); }   /* --muted on --chip measured 4.23:1, under the 4.5 gate; --ink2 clears it */
.buckets a:hover { background: var(--line); text-decoration: none; }
.buckets .num { font-size: 18px; font-weight: 700; }
.card-fact { font-size: 14px; color: var(--ink2); flex-grow: 1; }
.card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--muted2); margin-top: auto; }
.card-foot .src { flex-basis: 100%; order: 3; }
.card-foot a { font-size: 13px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.empty { padding: 12px 16px; border-radius: var(--rin); background: var(--hover); font-size: 13px; line-height: 20px; color: var(--ink2); }
.empty.stale { background: none; border: 1px solid var(--line); color: var(--muted); }
.card.stub .empty { flex-grow: 1; }

/* sparkline columns: one per month, newest solid; axis names the first and last month */
.spark { display: flex; flex-direction: column; gap: 6px; }
.bars { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; height: 64px; border-bottom: 1.5px solid var(--axis); cursor: default; }
.bars::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line2); pointer-events: none; }
.bar { position: relative; flex: 0 0 6px; background: var(--up); opacity: .45; border-radius: 3px; min-height: 2px; transform-origin: bottom; animation: gy .45s var(--eo) both; transition: opacity .1s, transform .1s; }
.bar:is(:hover, :focus-visible) { opacity: 1; outline: none; }   /* bars 11-03: 6 px rounded, spread edge to edge under the axis labels */
.bar-last { background: var(--up); opacity: 1; }   /* never grey bars (owner 10-10): teal, the newest solid */
.bars-up .bar-last { background: var(--up); } .bars-dn .bar-last { background: var(--dn); } .bars-lev .bar-last { background: var(--lev); }
.axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted2); }

/* panels: head / body / foot, so paired panels line up top and bottom. design 10-10 (seamless, owner): no box —
   a section is a hairline rule above it and whitespace around it, like the 10-08 mockup's rhythm */
.panel { border-top: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; overflow: clip; }
.panel.pad { padding: 20px 0 0; gap: 12px; }
.ph { padding: 20px 0 12px; display: flex; flex-direction: column; gap: 4px; }
.ph-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pb { padding: 0; }
.pf { margin-top: auto; padding: 16px 0 0; font-size: 12px; line-height: 16px; color: var(--muted2); display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.pf a { font-weight: 600; }
.panel-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.panel-bar.flat { border: 0; padding: 0 0 12px; }
.panel-note { padding: 12px 0; font-size: 12px; line-height: 16px; color: var(--muted2); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-weight: 800; font-size: 22px; line-height: 28px; letter-spacing: -.02em; }
.panel .section-head { margin-top: 0; }
.panel .section-head h2 { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: 0; }   /* a card title inside a card */

.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button, .seg button { min-height: 36px; padding: 0 16px; border-radius: var(--rseg); border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; gap: 8px; align-items: center; transition: background-color .2s, color .2s, box-shadow .2s; }
.tabs button:hover, .seg button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { background: var(--chip); color: var(--ink); }
.tabs .num { font-weight: 500; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: var(--rseg); background: var(--chip); }
.seg button { border-radius: calc(var(--rseg) - 2px); min-height: 38px; font-weight: 500; color: var(--muted-chip); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line2); }
.seg button:disabled { color: var(--muted2); cursor: not-allowed; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* tables */
.tablewrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th, .grid td { padding: 0 12px; height: 44px; border-bottom: 1px solid var(--line2); transition: background-color .1s; text-align: left; font-weight: 400; white-space: nowrap; }
.grid th:first-child, .grid td:first-child { padding-left: 24px; }
.grid th:last-child, .grid td:last-child { padding-right: 24px; }
.grid thead th { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); border-bottom-color: var(--line); background: var(--surface); }
.grid tbody tr:last-child > * { border-bottom: 0; }
.grid tbody tr:hover > * { background: var(--hover); }
.grid caption { text-align: left; padding: 0 24px 8px; }
.panel .grid th:first-child, .panel .grid td:first-child, .card .grid th:first-child, .card .grid td:first-child, .panel .grid caption { padding-left: 0; }   /* a boxless section: the table starts on the text edge */
.panel .grid th:last-child, .panel .grid td:last-child, .card .grid th:last-child, .card .grid td:last-child { padding-right: 0; }
.grid th.r, .grid td.r { text-align: right; }
.grid tbody th a { color: var(--ink); font-weight: 600; }
.grid tbody th a:hover { color: var(--accent); text-decoration: none; }
.grid tbody a { display: inline-flex; align-items: center; min-height: 44px; }
.grid thead button { background: none; border: 0; padding: 0; min-height: 44px; font: inherit; color: inherit; cursor: pointer; }
.grid thead button::after { content: " ↕"; color: var(--axis); }
.grid tr > :first-child { position: sticky; left: 0; background: var(--card); }
.grid .u-pct { display: none; }
.pct-mode .grid .u-pct { display: inline; }
.pct-mode .grid .u-sh { display: none; }
.empty-row, .empty-cell { padding: 24px 20px; font-size: 14px; color: var(--flat); }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.two > :only-child, .three > :only-child, .cards > :only-child { grid-column: 1 / -1; }   /* one panel: full width, never an empty half */
@media (min-width: 768px) { .two > .strip { grid-template-columns: minmax(0, 1fr); } }   /* KPI tiles beside a chart stack, never squeeze into quarter width */
.two .grid th:first-child .note { white-space: normal; }   /* long company names wrap at spaces (trim 10-22: never "…"), so the Net column stays on a half-width panel */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .pill { font-size: 13px; min-height: 28px; padding: 4px 10px; max-width: 100%; white-space: normal; }
.multiples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.scheme { justify-content: space-between; }
.scheme .strong { font-size: 14px; }
.scheme-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* plain list rows: first cell grows, numbers keep a fixed right-aligned column */
.hub { margin: 0; padding: 0; list-style: none; }
.hub li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.hub li:first-child { border-top: 0; }
.hub li > :first-child { width: 110px; flex-shrink: 0; }
.hub li > :first-child:not(.num) { width: auto; flex: 1 1 auto; min-width: 0; }
.hub li > .muted { flex: 1 1 auto; min-width: 0; }
.hub li > .num:not(:first-child) { flex: none; min-width: 6.5rem; text-align: right; white-space: nowrap; }
.hub li > a { align-self: stretch; display: flex; align-items: center; overflow-wrap: anywhere; }   /* the whole 44 px row height is the tap target */
.hub li.sub { padding-left: 16px; font-size: 13px; }
.hub li > .note { min-width: 0; }

/* ranked rows: who | bar | value, the bar scaled to the list's largest */
.rank { margin: 0; padding: 0; list-style: none; counter-reset: rk; }
.rank li { display: grid; grid-template-columns: minmax(min-content, 1fr) minmax(40px, 30%) 8.5rem; align-items: center; gap: 16px; min-height: 52px; border-top: 1px solid var(--line-soft); }
.rank li:first-child { border-top: 0; }
@media (min-width: 768px) { .rank.cols2 { columns: 2; column-gap: 48px; } .rank.cols2 li { break-inside: avoid; } .rank.cols2 li:nth-child(n) { border-top: 1px solid var(--line-soft); } }   /* a full-width list in two columns (home near-ban, design 10-10) */
.rank li.note { display: block; min-height: 0; padding: 12px 0; }   /* the empty line spans the row, not the name column */
.rank .who { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; }
.rank .who a { font-weight: 700; font-size: 14px; color: var(--ink); align-self: flex-start; }
.rank .who span { font-size: 12px; color: var(--muted2); }   /* trim 10-22: a long name wraps, never "…" */
.rank .val { text-align: right; white-space: normal; line-height: 1.3; font-size: 14px; }   /* a long "N houses · ₹X,XXX cr" wraps in its 8.5rem column instead of clipping against .panel's overflow:clip */
.rbar { display: block; height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; }
.rbar i { display: block; height: 100%; border-radius: 3px; background: var(--up); opacity: .7; min-width: 2px; transform-origin: left; animation: gx .5s var(--eo) both; }
.rbar.t-up i { background: var(--up); } .rbar.t-dn i { background: var(--dn); } .rbar.t-flat i { background: var(--up); opacity: .45; }
.rank.houses li { grid-template-columns: minmax(min-content, 1.3fr) 6rem minmax(64px, 1fr) 8.5rem; min-height: 44px; }
.rank.houses .n { text-align: right; font-size: 13px; color: var(--muted); }
.rank.houses .who a { font-weight: 600; }

/* flows: label + detail | net, and a diverging bar history */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.flow:first-child { border-top: 0; }
.flow.sub { padding-left: 16px; }
.flow .lbl { font-size: 14px; }
.flow.sub .lbl { font-size: 13px; color: var(--ink2); }
.flow .note { grid-column: 1; }
.flow .net { grid-row: 1 / span 2; grid-column: 2; font-size: 15px; font-weight: 700; white-space: nowrap; }
.hist { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.hist th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hist td { padding: 5px 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.hist tr:last-child td { border-bottom: 0; }
.hist .v { text-align: right; padding-left: 8px; width: 7.5rem; }
.hist .b { width: 30%; padding-left: 12px; }

.ban li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ban li > * { width: auto !important; }
.meter { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; line-height: 16px; color: var(--muted); border-top: 1px solid var(--line2); padding-top: 16px; }   /* owner 10-23: one --sec above it, like every block (was +24) */
.foot p { max-width: 90ch; }
.foot .linkbtn { padding: 0; }

/* search dialog */
dialog.search { width: min(640px, calc(100vw - 32px)); margin: 10vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: var(--rcard); background: var(--surface); color: var(--ink); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); }
dialog.search[open] { animation: rise .2s var(--eo) both; }
dialog.search::backdrop { background: rgba(0, 0, 0, .36); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* trim 10-22: no heading half-readable above the box */
.search-form { display: flex; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
.search-form input { flex-grow: 1; min-height: 44px; border: 0; font: inherit; font-size: 16px; background: transparent; color: var(--ink); outline: none; }
.search-results { list-style: none; margin: 0; padding: 4px; max-height: 60vh; overflow-y: auto; }
.search-results:empty { display: none; }
/* A8: a result is the name, then its house or company on a second line that wraps at spaces (never cut with "…") */
.search-results a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: var(--rin); color: var(--ink); }
.search-results a[aria-selected="true"], .search-results a:hover { background: var(--line); text-decoration: none; }   /* owner 11-02: --hover was too faint to see */
.search-results a > :first-child, .search-results .sub { grid-column: 1; }
.search-results .sub { font-size: 12px; line-height: 16px; color: var(--muted2); }
.search-results .kind { grid-column: 2; grid-row: 1 / span 2; font-size: 12px; color: var(--muted2); white-space: nowrap; }
/* search 10-24: a hairline between type groups; matched word starts in the ink colour; the "All results" row */
.search-results li.first { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-soft); }
.search-results b { font-weight: 600; }
.search-results a.all { display: flex; color: var(--accent); font-size: 13px; }
.search-results .note { padding: 10px 12px; }
.search-page .search-form { padding: 0; border: 0; }
.search-page .search-form input { border: 1px solid var(--line); border-radius: var(--rin); padding: 0 12px; }
.search-page .search-results { max-height: none; overflow: visible; padding: 0; }
.search-page h2 { margin: 20px 0 4px; font-size: 13px; font-weight: 500; color: var(--muted); }

/* public pages: footer nav, pager, prose */
.footnav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footnav a, .pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }   /* padding: short words like "API" were under the 24px tap-target width */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 24px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); }
.prose p { max-width: 68ch; margin-bottom: 12px; line-height: 1.6; }
.prose p:last-child { margin-bottom: 0; }

@media (max-width: 1100px) {
  :root { --gut: 24px; }
  .cards, .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .searchbtn { width: 44px; padding: 0; justify-content: center; }
  .searchbtn-text, .searchbtn kbd { display: none; }
}
/* phone (<768px): cards with a 12px side margin, 2-col KPI cards, bottom tab bar (see the nav block) */
@media (max-width: 767px) {
  :root { --gut: 12px; --toph: 56px; --sec: 24px; }
  .top-in { grid-template-columns: 1fr auto; padding: 0 4px 0 16px; }
  .searchbtn, .themebtn { border: 0; background: none; color: var(--ink); }
  .page { padding-top: 12px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .head { padding: 4px 0 0; }                                   /* same edge as the tiles below */
  .head h1 { font-size: 28px; line-height: 34px; }
  .price { font-size: 20px; }
  .strip, .strip.five { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
  .tile { padding: 2px 0 2px 12px; }
  .tile-val { flex-direction: column; align-items: flex-start; gap: 2px; }   /* change always under the value */
  .strip > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .big { font-size: min(22px, 5vw); }
  .facts p { font-size: 14px; line-height: 22px; }
  .cards, .two, .multiples { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .card { min-height: 0; padding: 16px 0 0; }
  .panel.pad { padding: 16px 0 0; }
  .ph { padding: 16px 0 10px; } .pf { padding: 12px 0 0; }
  .grid { font-size: 13px; }
  .grid th:first-child, .grid td:first-child { padding-left: 16px; }
  .grid th:last-child, .grid td:last-child { padding-right: 16px; }
  .rank li, .rank.houses li { grid-template-columns: minmax(min-content, 1fr) minmax(0, 20%) 7.25rem; gap: 10px; }   /* trim 10-22: the ticker sets the floor */
  .rank .val { font-size: 13px; }
  .rank.houses .n { display: none; }
  .hist .b { width: 15%; padding-left: 6px; }   /* owner 10-03 gap audit: at 375 px the DII column was cut off */
  .hist .v { width: auto; padding-left: 4px; }
  .ban li { grid-template-columns: minmax(0, 1fr) auto; }
  .ban .since { display: none; }
  .section-head h2 { font-size: 20px; line-height: 26px; }
  .crumbs { margin-bottom: -8px; }
  .foot { padding: 16px 0 0; }
  .tabs button, .seg button, .sections a { min-height: 44px; }
}
/* no-JS: show every fund (index + arbitrage included) and both units; JS starts on the active set */
.js:not(.set-chosen) [data-set="all"] { display: none; }
html:not(.js) [data-count] { display: none; }   /* 11-03: no script, no "Loading…" (the noscript line names the static pages) */
html:not(.js) [data-set="active"] { display: none; }
html:not(.js) .grid .u-pct { display: inline; }
html:not(.js) .grid .u-pct::before { content: " · "; }
.hist caption { text-align: left; padding: 12px 0 4px; }
.grid td.src-cell { white-space: normal; min-width: 10rem; line-height: 1.3; }
/* shared bits for the secondary pages */
.pb-last { padding-bottom: 8px; }
.hub.stack li { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 0; }
.hub.stack li > * { width: auto !important; }
.panel.stacked { gap: 8px; }
.panel.stacked .h2:not(:first-child) { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.prose-s { font-size: 14px; line-height: 1.6; color: var(--ink2); max-width: 80ch; padding-bottom: 16px; }
.panel.prose { padding: 24px 0 0; }
.lede-note { max-width: 90ch; }
.head .about { max-width: 90ch; font-size: 14px; line-height: 22px; color: var(--ink2); }   /* Decision 38; in .head-side, spaced by its gap */
.actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.btn { min-height: 44px; padding: 0 16px; border-radius: var(--rbtn); border: 0; background: var(--accent); color: var(--onaccent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s; }
.btn:hover { background: var(--link-hover); }
@media (max-width: 767px) {
  .panel.prose { padding: 16px 0 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .panel-bar { align-items: stretch; }
}
.grid.wrap th, .grid.wrap td { white-space: normal; height: auto; padding-top: 11px; padding-bottom: 11px; vertical-align: top; line-height: 1.4; }
.grid.wrap tbody th { min-width: 14rem; }
.grid.wrap tbody th a { min-height: 0; display: inline; }
@media (max-width: 767px) { .grid.wrap td { min-width: 11rem; } .grid.wrap tr > :first-child { position: static; } }

/* lane L3: stock v2 sections, server-drawn SVG charts, no-JS scheme tabs, movers */
.group { display: flex; flex-direction: column; gap: 16px; }
.chart { margin: 8px 0 0; }
.chart svg { display: block; width: 100%; height: 128px; overflow: visible; cursor: default; }
/* clean 10-21 A5: one teal and one coral at one strength in both themes (the latest month drew at full and the rest
   at half, so on dark one DII bar looked a different colour; the gross-flow bars used the darker TEXT teal) */
.chart { container-type: inline-size; }
.chart line { stroke: var(--axis); stroke-width: 1.5; }
.chart line.grid { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 3; }
/* FHT-look 1003b: dotted reference lines */
.chart line.ref { stroke: var(--down); stroke-width: 1; stroke-dasharray: 3 3; } .chart line.ref.lev { stroke: var(--lev); }
/* bars 11-03 (owner: "too broad … in big blocks"): every SVG column bar (axchart, dual, .chart) is one slim rounded
   stroke (_macros bmark), a fixed screen width by bar count (_macros bn) capped at 8 px, never stretched with the
   chart; teal up, coral down. Hovering, tapping or tabbing to a bar's slot lifts it and dims the rest. */
svg .b .hit { fill: transparent; }
svg .b line { stroke: var(--up); stroke-width: min(8px, 3cqw); stroke-linecap: butt; vector-effect: non-scaling-stroke; opacity: .85; transition: opacity .12s; }
svg .b:is(.neg, .dn) line { stroke: var(--down); }
svg.bn2 .b line { stroke-width: min(8px, 1.6cqw); } svg.bn3 .b line { stroke-width: min(7px, 1.05cqw); }
svg.bn4 .b line { stroke-width: min(5px, .6cqw); } svg.bn5 .b line { stroke-width: min(3px, .33cqw); }
svg:has(.b:is(:hover, :focus-visible)) .b line { opacity: .3; } svg:has(.b:is(:hover, :focus-visible)) .b:is(:hover, :focus-visible) line { opacity: 1; }
svg .b:focus { outline: none; }
.mmlines .pxdot { fill: transparent; }

/* chart-tip: the small styled tooltip site.js shows over .bar / .chart rect / .chart circle,
   in place of the browser's own slow native title tooltip (same source text, just faster + styled). */
.chart-tip { position: fixed; z-index: 30; max-width: 260px; padding: 6px 10px; border-radius: 7px; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: pre-line; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.chart-tip[hidden], .chart-dot[hidden] { display: none; }
.chart-dot { position: fixed; z-index: 29; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.chart-dot.fpi { background: var(--down); }   /* the dot takes its line's colour: FII/FPI coral, teal elsewhere */
.xtabs details { border-top: 1px solid var(--line-soft); }
.xtabs summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 24px; cursor: pointer; font-weight: 500; }
.xtabs details[open] summary { color: var(--accent); }
.xtabs .panel-note a { font-weight: 500; }
.xtabs details > .note { margin: 0; padding: 0 24px 8px; }
.xtabs .sub + .sub { border-top: 1px solid var(--line-soft); }   /* several blocks in one tab (/leverage) */
/* lane L6: /compare pick box */
.pick { width: 100%; max-width: 32rem; min-height: 44px; padding: 0 16px; margin-bottom: 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rin); transition: border-color .15s, box-shadow .15s; }
/* the main scheme/stock search box (not .pick's other uses: the amount input, /explore's filters) — a
   full-width, taller field so it reads as the page's primary action, not a plain text input.
   .pick.pick-lg (not .pick-lg alone): it sits inside .panel-note, and ".panel-note input" below
   ties it on specificity (one class + one type each) and wins on source order, silently shrinking
   this to the plain inline-picker size (36px/14px) on /compare and /xray. Two classes together
   outweighs that tie outright. */
.pick.pick-lg { width: 100%; max-width: none; margin: 0; min-height: 52px; padding: 0 20px; font-size: 17px; border-radius: var(--rcard); }
.pick:focus, .fx-f input:focus, .fx-f select:focus, .tf input:focus, .panel-note select:focus, .panel-note input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
/* FT.picker: a styled dropdown standing in for the browser's own <input list>, same look as the
   ⌘K search results (dialog.search .search-results above) so a scheme/stock search box matches it.
   position: fixed (placed by JS from the input's own rect): a .panel ancestor clips an absolutely-
   positioned child for its rounded corners (overflow: clip), so the list is appended to <body> instead. */
/* 11-02: no rise animation (it slid and faded over the page on every open: the owner's "glitchy"); z-index under the sticky
   header (5) and the phone tab bar (10), over the table's sticky heads (2, 3); its own scroll stays in it */
.combo-list { position: fixed; z-index: 4; padding: 4px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rcard); box-shadow: 0 12px 32px rgba(17, 24, 39, .12); }
.combo-list button { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: var(--rin); background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; white-space: normal; overflow-wrap: anywhere; }   /* owner 10-21: suggestions wrap, never "…" */
.combo-list button[aria-selected="true"] { background: var(--line); }   /* one highlight: the pointer moves aria-selected (site.js) */
.combo-g { position: sticky; top: -4px; z-index: 1; padding: 10px 12px 4px; background: var(--surface); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.combo-list [role="group"] button { scroll-margin-top: 30px; }   /* the arrow keys never park a row under its sticky header */
/* chips: 10px rounded rectangles, never capsules; the active chip is a light accent tint, not a solid fill */
.chips button.pill { height: 36px; min-height: 36px; padding: 0 14px; border: 1px solid var(--chip); border-radius: var(--rin); background: var(--chip); color: var(--ink2); font: inherit; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; margin: 0 8px 8px 0; transition: background-color .15s, border-color .15s, color .15s; }
.chips button.pill:hover { border-color: var(--axis); background: var(--hover); }
.chips button.pill[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--surface)); font-weight: 600; }
.chips button.pill:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
/* inline pickers in an on-request panel ("Month [Aug 2026] Show") */
.panel-note select, .panel-note input { min-height: 36px; padding: 0 10px; margin: 0 4px; width: auto; max-width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rin); vertical-align: middle; transition: border-color .15s, box-shadow .15s; }
/* integration (W2): grouped main nav, <details> menus (no JS needed; site.js closes on outside click).
   Theme B: the four groups sit on the segmented track in the header; on a phone the same <nav> is the
   white bottom tab bar (icon + label) and a group's links open as a sheet above it. */
.nav-g { position: relative; }
.nav-g > summary { list-style: none; }
.nav-g > summary::-webkit-details-marker { display: none; }
.nav-g > summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); margin-left: 2px; transition: transform .15s; }
.nav-g[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-p { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 6; min-width: 260px; max-width: calc(100vw - 16px);   /* audit 11-04: `translate`, not transform: the rise animation's transform dropped the centring and pushed Flows off the right edge */
  display: flex; flex-direction: column; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rcard); box-shadow: 0 12px 32px rgba(17, 24, 39, .12); animation: rise .15s var(--eo) both; }
.mainnav .nav-p a { padding: 0 12px; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; white-space: nowrap; color: var(--ink2); border-radius: var(--rin); font-weight: 500; }
.nav-h { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.mainnav .nav-p a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.mainnav .nav-p a[aria-current] { color: var(--accent); font-weight: 600; background: var(--hover); }
@media (max-width: 767px) {
  .mainnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; justify-self: stretch; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 0 env(safe-area-inset-bottom); border-radius: 0; background: var(--surface); border-top: 1px solid var(--line); }
  body:has(:is(input:not([type=checkbox], [type=radio], [type=button], [type=submit]), select, textarea):focus) .mainnav { display: none; }   /* owner 11-02: with the keyboard up, iOS lifts this bar over the field being typed in */
  :is(input, select, textarea) { scroll-margin-block: 96px; }
  /* no backdrop-filter on the phone: it would make the header the containing block of the fixed tab bar */
  .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface); }
  .mainnav > a, .nav-g > summary { height: 60px; width: 100%; padding: 6px 0 4px; flex-direction: column; justify-content: center; gap: 2px; border-radius: 0; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--muted); background: none; box-shadow: none; }
  .mainnav > a[aria-current], .nav-g > summary.cur { color: var(--accent); background: none; box-shadow: none; }
  .nav-g[open] > summary { color: var(--ink); }
  .nav-g > summary::after { display: none; }
  .nav-ic { display: block; }
  .nav-g { position: static; }
  .nav-p { position: fixed; left: 0; right: 0; top: auto; bottom: calc(61px + env(safe-area-inset-bottom)); transform: none; translate: none; min-width: 0; max-height: 70vh; overflow-y: auto; padding: 8px 12px 12px; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .12); animation: sheet .3s var(--eo) both; }
  .mainnav .nav-p a { white-space: normal; font-size: 15px; }
}
@media (min-width: 768px) { :root[data-theme="dark"] .top { background: rgba(15, 17, 21, .92); } }
/* home v2 (W2) */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; }
.searchbig { margin-top: 16px; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--rin); background: var(--surface); transition: border-color .15s; color: var(--muted2); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.searchbig:hover { border-color: var(--axis); color: var(--ink2); }
.searchbig span { min-width: 0; padding: 6px 0; line-height: 18px; }   /* A8: wraps, never cut */
.searchbig:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.mtd { font-size: 13px; padding: 10px 0 4px; }
.nowrap { white-space: nowrap; }
.fresh { line-height: 1.8; }
.hero .clocks { width: 100%; text-align: left; line-height: 1.8; }
.rank .who a.plain { font-family: var(--sans); font-weight: 500; }
/* Narrow panels (three across) and phones: name + value on one line, the bar full width under them,
   so a long symbol never runs into the bar and the company name keeps its width. */
.three .rank li:not(.note), .rank.stack li:not(.note) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who val" "bar bar"; row-gap: 2px; column-gap: 12px; padding: 8px 0 10px; }
.three .rank .who, .rank.stack .who { grid-area: who; padding: 0; }
.three .rank .rbar, .rank.stack .rbar { grid-area: bar; }
.three .rank .val, .rank.stack .val { grid-area: val; white-space: normal; line-height: 1.3; max-width: 11rem; }
.rank .who a { white-space: nowrap; } .rank.stack .who a, .rank.cols2 .who a { white-space: normal; }   /* cols2: a long holder name ("Norges Bank (Government …") wraps in its half column */
.rank .who span a { font: inherit; color: inherit; white-space: normal; }   /* links 10-23: a linked name in the muted line keeps its look */
@media (max-width: 767px) {
  .rank li:not(.note), .rank.houses li:not(.note) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who val" "bar bar"; row-gap: 2px; column-gap: 12px; padding: 8px 0 10px; }
  .rank .who { grid-area: who; padding: 0; } .rank .rbar { grid-area: bar; } .rank .val { grid-area: val; }
}
@media (max-width: 1100px) { .three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .three { grid-template-columns: minmax(0, 1fr); gap: 12px; } .nowrap { white-space: normal; } }
.filters { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 4px 24px 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.filters .pick { max-width: 20rem; margin: 0; min-height: 40px; font-size: 14px; }

/* lane C3: Money map */
.mmnav{font-size:.85rem;margin-bottom:.5rem;line-height:1.8}
.mmnav a[aria-current]{font-weight:600;text-decoration:none}
.mmlines .l-0{color:var(--ink)}
.mmlines .l-1{color:var(--accent);stroke-dasharray:4 3}
td.spark{min-width:90px;width:110px}

/* lane C4: /explore + /funds filters; list-table sort + filter bar (site.js) */
.fx-d > summary { cursor: pointer; list-style: none; }
.fx-d > summary::-webkit-details-marker { display: none; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; padding: 16px 24px; }
.fx-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.fx-f input, .fx-f select, .tf input { min-height: 36px; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rin); min-width: 0; width: 100%; transition: border-color .15s, box-shadow .15s; }
.fx-cs { grid-template-columns: 1fr; } .fx-cs > .pill { justify-self: start; }
.fx-c { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-c select { flex: 2 1 220px; width: auto; } .fx-c input { flex: 1 1 90px; width: auto; }
fieldset.fx-grid { border: 0; margin: 0; min-width: 0; padding-top: 8px; }
fieldset.fx-grid + fieldset.fx-grid { border-top: 1px solid var(--line); }
.fx-g { padding: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--ink2); }
.fx-wide { grid-column: span 2; }
.fx-f .chips button.pill { margin: 0 6px 6px 0; }
.fx-on { padding: 0 24px; }
.fx-on:empty { display: none; }
.fx-on button.pill { margin: 8px 8px 0 0; }
.quick { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 12px 24px; }
.quick a.pill { min-height: 32px; padding: 0 12px; text-decoration: none; font-size: 13px; font-weight: 500; }
.quick a.pill:hover { background: var(--hover); }
.fx-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; padding: 12px 24px; font-size: 14px; }
.fx-cols label { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; }
.fx-bar .linkbtn { white-space: nowrap; }
[data-table] thead th { white-space: normal; min-width: 6.5rem; line-height: 1.3; }
.grid thead th.r .linkbtn { text-align: right; }
.grid thead th .linkbtn { font-size: 12px; font-weight: 500; color: var(--muted); padding: 0; min-height: 44px; }
.grid thead th[aria-sort="ascending"] .linkbtn, .grid thead th[aria-sort="descending"] .linkbtn { color: var(--ink); }
.tf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 24px; border-bottom: 1px solid var(--line-soft); }
.tf input { max-width: 20rem; flex: 1 1 12rem; }
.tf .chips { gap: 0; }
.grid thead th[aria-sort="ascending"] .linkbtn::after { content: " ↑"; }
.grid thead th[aria-sort="descending"] .linkbtn::after { content: " ↓"; }

/* screener 10-23 (owner's Safari screenshot, 1280-1440 px). Explore selectors only (/explore, /funds).
   One field height (--fh) for every filter control; selects drawn alike in WebKit and Chromium (WebKit's
   native pop-up ignores height, so appearance none + a two-gradient chevron in --muted, both themes) */
[data-src] { --fh: 44px; }
.fx-f input, .fx-f select { height: var(--fh); min-height: var(--fh); margin: 0; line-height: normal; }
.fx-f select { -webkit-appearance: none; appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
/* screener 11-02: the metric is a name (picked from the condition search), its unit beside the value, its spread under it */
.fx-m { flex: 3 1 240px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.fx-u { font-size: 13px; color: var(--muted); }
.fx-h { flex-basis: 100%; margin: 0; font-size: 12px; } .fx-h .linkbtn { font-size: 12px; }
.fx-c { padding: 8px 4px 8px 12px; background: var(--hover); border-radius: var(--rin); }   /* 11-02: each condition one card; × removes it */
.fx-x { width: var(--fh); padding: 0; font-size: 20px; line-height: 1; color: var(--muted); } .fx-x:hover { color: var(--ink); text-decoration: none; }
.pick.fx-q { flex: 1 1 360px; max-width: 40rem; margin: 0; min-height: var(--fh); }   /* 16 px: iOS zooms under it */
.fx-or .pick.fx-q { max-width: 32rem; }
.fx-err { flex-basis: 100%; margin: 0; color: var(--ink2); } .fx-err:empty { display: none; }
.fx-c > select[aria-label="Condition"] { flex: 0 0 8.5rem; }
.fx-c > input { flex: 0 1 9rem; }
@media (max-width: 480px) { .fx-c > select[aria-label="Condition"] { flex-basis: 7.5rem; } .fx-c > input { flex: 1 1 4rem; } }   /* phones: op, value, unit and × on one line */
.fx-c > .linkbtn, .fx-f .chips button.pill { height: var(--fh); min-height: var(--fh); }
/* a group heading sits under its fieldset's rule, never on it: both engines draw a fieldset's top border through
   the legend's middle (WebKit ignores the float-the-legend escape), so the rule is an inset shadow at the box's top */
fieldset.fx-grid + fieldset.fx-grid { border-top: 0; box-shadow: inset 0 1px var(--line); }
.fx-grid > legend.fx-g { padding: 16px 0 0; }
.fx-add { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-add .btn { min-height: var(--fh); }
.fx-add .btn.alt { background: var(--surface); color: var(--accent); border: 1px solid var(--line); }
.fx-add .btn.alt:hover { background: var(--hover); }
.fx-or { display: grid; gap: 8px; padding: 4px 0 4px 12px; border-left: 2px solid var(--line); }
.fx-or > .fx-g { margin: 0; padding: 0; }
.fx-or > .linkbtn { justify-self: start; }
.fx-cols > .fx-g { grid-column: 1 / -1; margin: 8px 0 0; padding: 0; }
.fx-cols > .fx-g:first-child { margin-top: 0; }
/* the filters that are on sit beside the match count, not under Columns */
.fx-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1 1 24rem; min-width: 0; }
.fx-sum .fx-on { padding: 0; flex: 1 1 16rem; min-width: 0; }
.fx-sum .fx-on button.pill { margin: 0; }
.fx-act { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }   /* a link and a button on one line (owner 11-02) */
.fx-act > .linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.fx-act > [data-reset]:disabled { color: var(--muted); cursor: default; }   /* owner 11-03: Clear all filters stays visible, greyed when nothing is set */
.quick-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex: 1 1 100%; }
/* headers: text left, figures right, bottom-aligned, balanced wrapping; the sort arrow never wraps alone */
[data-table] thead th { vertical-align: bottom; }
[data-table] thead th.r { min-width: 7.5rem; }
[data-table] thead .linkbtn { display: inline-block; max-width: 11rem; min-height: 0; padding: 8px 0; line-height: 1.3; text-align: inherit; text-wrap: balance; }
[data-table] thead .linkbtn::after, [data-table] thead th[aria-sort="none"] .linkbtn::after { content: "\a0↕"; }
[data-table] thead th[aria-sort="ascending"] .linkbtn::after { content: "\a0↑"; }
[data-table] thead th[aria-sort="descending"] .linkbtn::after { content: "\a0↓"; }
@media (min-width: 768px) {   /* sticky header: the table scrolls in its own box, one screen tall */
  .fx-tw { max-height: calc(100vh - var(--toph) - 24px); overflow: auto; }
  .fx-tw thead th { position: sticky; top: 0; z-index: 2; }
  .fx-tw thead th:first-child { z-index: 3; }
}
.grid th .nm { display: flex; align-items: flex-start; gap: 10px; }
.grid input.cmp { flex: none; margin: 2px 0 0; }   /* one row with the name, however long it wraps */
.cmpbar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; max-width: calc(100% - 32px); background: var(--bg, #fff); border: 1px solid var(--line2); border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.14); font-size: 14px; }
.cmpbar[hidden] { display: none; }
.cmpbar .cmpgo { padding: 8px 16px; border-radius: 999px; background: var(--up); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cmpbar .cmpgo[aria-disabled=true] { opacity: .4; pointer-events: none; }
.cmpbar button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; opacity: .7; }   /* final audit 11-03: the Compare box before the scheme name */

/* phone: controls declared by later lanes above get their 44px tap height and 16px card inset here,
   after their base rules */
@media (max-width: 767px) {
  .chips button.pill { height: 44px; min-height: 44px; }
  .xtabs summary, .xtabs details > .note { padding-left: 16px; padding-right: 16px; }
  .fx-f input, .fx-f select, .tf input, .panel-note select, .panel-note input, .filters .pick { min-height: 44px; }
  .fx-grid, .fx-cols, .tf, .filters, .fx-on, .quick { padding-left: 16px; padding-right: 16px; }
  .nse-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* theme B: motion. Screen fade-rise 320ms, bars grow 450-500ms, hovers/tabs 100-200ms; all off when
   the reader asks for reduced motion. */
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes gy { from { transform: scaleY(0); } }
@keyframes gx { from { transform: scaleX(0); } }
@keyframes sheet { from { transform: translateY(100%); } }
.bars .bar:nth-child(2) { animation-delay: 30ms; } .bars .bar:nth-child(3) { animation-delay: 60ms; }
.bars .bar:nth-child(4) { animation-delay: 90ms; } .bars .bar:nth-child(5) { animation-delay: 120ms; }
.bars .bar:nth-child(6) { animation-delay: 150ms; } .bars .bar:nth-child(n+7) { animation-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.linkbtn.more { display: block; margin: 12px auto 4px; min-height: 44px; padding: 0 16px; font-weight: 600; color: var(--accent); }
.linkbtn.more[hidden] { display: none; }
/* declutter #3: a list shows its first 15 rows until its "Show all" opens (CSS only; no :has = every row) */
.cap15:not(:has(.showall[open])) tbody tr:nth-child(n+16) { display: none; }
.cap12:not(:has(.showall[open])) tbody tr:nth-child(n+13) { display: none; }   /* lane D: FII/DII by month, last 12 */
/* stock "Fund houses" table (organizer 10-02): 5 rows on a phone, all 10 on desktop */
@media (max-width: 640px) { .cap5:not(:has(.showall[open])) tbody tr:nth-child(n+6) { display: none; } }
@media (min-width: 641px) { .cap5 .phone-only { display: none; } }
.xtabs details.showall { border-top: 0; }
.xtabs .showall > summary { padding: 0; }
.showrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 4px 24px; font-size: 13px; }
.showall > summary { min-height: 44px; display: flex; align-items: center; list-style: none; cursor: pointer; font-weight: 600; color: var(--accent); }
.showall > summary::-webkit-details-marker { display: none; }
.showall:not([open]) > summary > span + span, .showall[open] > summary > span:first-child { display: none; }
@media (max-width: 767px) { .showrow { padding-left: 16px; padding-right: 16px; } }
/* declutter #4: the home page's "More lists" row: plain links, each with its count */
.morelinks { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 4px 0 0; padding: 0; list-style: none; }
.morelinks a { display: inline-flex; align-items: center; min-height: 44px; }
/* declutter #10: a panel's "How it is computed" fold (the scheme page's NAV-to-NAV returns) */
.howto { padding: 0 0 12px; }   /* A6: on the text edge, like the boxless panels */
.howto > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.howto > .note { margin: 8px 0; }

/* clean 10-21 A3: phone tables. The long name beside a symbol hides (the symbol stays and links), headers and row
   names wrap, so the first number columns fit; a table still wider than its box scrolls in it, first column sticky,
   with a fade on the right edge while more columns sit off to the right (site.js sets .more-r). */
.grid thead th, .grid tbody th, .grid td:not(.num):not(.r) { white-space: normal; }   /* names wrap, numbers never */
.grid thead th { line-height: 15px; }
@media (max-width: 599px) {
  .grid th[scope="row"] > :is(a, span.num) + .note { display: none; }   /* the page's own row (a span, not a link) too */
  .grid tbody th[scope="row"] { min-width: 6.5rem; max-width: 42vw; line-height: 18px; }
}
.grid .dashcol { display: none !important; }   /* A4b: a column of only "—" (site.js) */
/* A4c: "How this is counted": a small muted fold under an intro, no box */
details.how { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--muted); }
details.how > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-weight: 500; color: var(--muted); list-style: none; }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::after { content: " +"; white-space: pre; }
details.how[open] > summary::after { content: " −"; }
details.how > summary:hover { color: var(--ink); }
details.how > :not(summary) { margin: 4px 0 8px; }
.more-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.linkbtn.allc { display: none; }   /* the cards' "All columns" toggle: phones only */
/* Phones: wide tables become one compact card per row (site.js adds .tcards + data-label to tables of
   4+ columns): the name on its own line, then the figures three across, each under a small label. */
@media (max-width: 640px) {
  table.grid.tcards, table.grid.tcards tbody { display: block; width: 100%; min-width: 0; }
  table.grid.tcards thead { display: none; }
  table.grid.tcards tr { display: grid; grid-template-columns: repeat(3, minmax(min-content, 1fr)); gap: 4px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line2); }
  table.grid.tcards tr[hidden] { display: none; }
  table.grid.tcards tr > * { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 0; border: 0; text-align: left; white-space: normal; min-width: 0; height: auto; position: static; background: none; font-size: 13px; line-height: 18px; }
  table.grid.tcards tr > :first-child { grid-column: 1 / -1; font-size: 14px; font-weight: 700; }
  table.grid.tcards td.num { white-space: normal; }   /* wraps at spaces only, so a figure stays whole */
  table.grid.tcards td::before { content: attr(data-label); font-size: 12px; line-height: 14px; font-weight: 500; color: var(--muted); max-width: 100%; }   /* trim 10-22: a column's longest word sets its floor; labels never "…" */
  table.grid.tcards tr > td:first-child::before { display: none; }
  table.grid.tcards td:empty, table.grid.tcards td[data-label=""] { display: none; }
  table.grid.tcards .pill { padding: 0 6px; font-size: 12px; }
  .tablewrap:has(> table.grid.tcards) { overflow: visible; }
  table.grid.tcards:not(.allc) .xc { display: none; }
  .linkbtn.allc { display: block; min-height: 32px; margin: 0 0 4px auto; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--accent); }
  .linkbtn.allc[aria-pressed="true"] { text-decoration: underline; }
  /* deals with a Stock column (declutter #6): the card leads with the stock, the date goes to its foot */
  table.grid.tcards.deals tr:has(> th) > :first-child { grid-column: auto; order: 1; font-size: 13px; font-weight: 400; }
  table.grid.tcards.deals tr:has(> th) > td:first-child::before { display: block; }
  table.grid.tcards.deals tr > th { grid-column: 1 / -1; order: -1; font-size: 14px; font-weight: 700; }
}

.themebtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--line); border-radius: var(--rbtn); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s; }
.themebtn:hover { border-color: var(--axis); }
.themebtn:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.themebtn .ic-sun { display: none; }
:root[data-theme="dark"] .themebtn .ic-sun { display: block; } :root[data-theme="dark"] .themebtn .ic-moon { display: none; }
.top-r { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.guidebtn { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rbtn); font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; }
.guidebtn:hover, .guidebtn[aria-current] { border-color: var(--accent); color: var(--accent); text-decoration: none; }
@media (max-width: 767px) { .guidebtn { height: 36px; padding: 0 10px; font-size: 13px; } }
/* lane G9: "New month" on /following and its count on the header's Followed link (site.js, localStorage ft-seen) */
.news, .news-n { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--up); border-radius: 6px; background: var(--surface); color: var(--up); font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.news-n { margin-left: 6px; min-width: 20px; justify-content: center; }
.guide h2 { font-size: 18px; line-height: 26px; font-weight: 800; margin: 4px 0 8px; }
.guide dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.guide dt { font-weight: 700; } .guide dd { margin: 0; color: var(--ink2); line-height: 1.55; }
.guide ul { margin: 0; padding-left: 18px; line-height: 1.6; color: var(--ink2); } .guide li + li { margin-top: 4px; }
@media (max-width: 640px) { .guide dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .guide dd { margin-bottom: 10px; } }
/* lane G6: holdings (bars) vs the AMC-implied price or NAV (line, own scale) */
.pxchart .px, .pxspark .px { fill: none; stroke: var(--ink); stroke-width: 2; }
/* design 10-10: holdings are the subject, price is context — solid bars, a thin faint price line */
.pxchart .b line { opacity: .5; }
.pxchart .px { stroke: var(--accent); stroke-width: 1.25; opacity: .5; }
.axchart { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 200px auto auto; column-gap: 10px; margin: 8px 0 0; }
.axchart { position: relative; }
/* chart fix 11-03 (owner screenshot: bars ran down through the month labels and the legend): the plot is taken out of flow and
   pinned to its grid cell (both lines named: an absolute item's auto end line is the figure's edge), so its 100 % height is that cell's, never the whole figure's; an in-flow
   height: 100 % in a growing row resolved against the figure in some browsers, stretching the bars ~1.28x past zero */
.axchart svg { grid-area: 1 / 2 / 2 / 3; position: absolute; width: 100%; height: 100%; overflow: visible; }
.axchart .grid { stroke: var(--line2); } .axchart .zero { stroke: var(--axis); }
.axchart .px { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: .5; }
/* hover dots (owner 10-10: small and simple): a zero-length round-capped line stays a true circle in a stretched
   SVG; an invisible wide hit line, and a small dot shown only on the point under the pointer */
g.pxdot { opacity: 1; cursor: crosshair; } g.pxdot line { fill: none; stroke-linecap: round; }
g.pxdot .hit { stroke: transparent; stroke-width: 14px; } g.pxdot .dot { display: none; }   /* the visible dot is site.js's .chart-dot (an HTML element: never stretched, any browser) */
.ax-y, .ax-r { position: relative; min-width: 60px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ax-y { grid-column: 1; text-align: right; } .ax-r { grid-column: 3; min-width: 64px; }
.ax-y span, .ax-r span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; line-height: 14px; }   /* figures 10-22: 7 px each side of its gridline, clear of the x labels 8 px under the plot */ .ax-r span { left: 0; right: auto; }
.ax-x { grid-column: 2; position: relative; height: 22px; font-size: 12px; color: var(--muted); }
.ax-x span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; line-height: 14px; }
/* figures 10-22: every x label centred on its tick (the trim 10-22 end anchoring ran the end labels into their neighbours);
   an end label's half past the plot sits in the side-axis column (60 px or more), inside the figure */
.ax-y .sz, .ax-r .sz { position: static; display: block; height: 0; overflow: hidden; visibility: hidden; transform: none; }   /* the longest label sizes the column */
.axchart .pxlegend { grid-column: 1 / -1; }
.pxlegend .k-signed { background: linear-gradient(180deg, var(--up) 50%, var(--down) 50%); }
@media (max-width: 640px) { .axchart { grid-template-rows: 160px auto auto; } }
/* figures 10-22: a narrow chart (phone, or half a 768 px page) shows every other x label, the newest always */
.axchart { container-type: inline-size; }
@container (max-width: 520px) { .ax-x span:nth-last-child(even) { display: none; } }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.pair > .card { min-height: 0; } .pair > .card .spark { display: none; }   /* its full chart sits beside it */
/* figures 10-22 (owner: no gaps): side by side, the chart grows to the figure and notes beside it, so both end on one line;
   site.js stacks the two full width (.stack) when their own heights differ by over 90 px */
.pair > .panel > .axchart { flex: 1; grid-template-rows: minmax(200px, 1fr) auto auto; }
:is(.two, .pair) > .panel > .pb:has(> .axchart:last-child) { flex: 1; display: flex; flex-direction: column; }
:is(.two, .pair) > .panel > .pb > .axchart:last-child { flex: 1; grid-template-rows: minmax(150px, 1fr) auto auto; }
:is(.pair, .two).stack { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pair { grid-template-columns: minmax(0, 1fr); } }
.head .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.head .price .big { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.01em; } .head .price .chg { font-size: 18px; font-weight: 600; }
.why { margin: -8px 0 0; font-size: 13px; line-height: 19px; color: var(--ink2); max-width: 64ch; }
:not(.ph) + .pb > .why:first-child { margin-top: 20px; }   /* a card's second block (after tiles or a chart): its line clears what is above */
.pxdot { fill: transparent; cursor: crosshair; }
.pxspark .px { stroke-width: 1.5; }
.pxspark { display: block; width: 72px; height: 22px; margin: 4px 0 0 auto; }
.pxspark path { fill: var(--up); fill-opacity: .5; }
.pxlegend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; }
.pxlegend .k-bar { display: inline-block; width: 4px; height: 12px; background: var(--up); opacity: .85; border-radius: 2px; }   /* bars 11-03: the swatch is a slim bar too, teal over coral when signed */
.pxlegend .k-bar.k-neg { background: var(--down); opacity: .85; }   /* lane B: insider legend when every drawn month is a sale */
.pxlegend .k-line { display: inline-block; width: 14px; height: 1.5px; background: var(--accent); opacity: .6; margin-left: 6px; }
.pxcell { white-space: nowrap; }
:not(.two, .pair) > :is(#vs-price, #vs-nav) { margin-top: 16px; }   /* beside a column (figures 10-22): no step, titles on one line */
/* lane G9: the Yahoo quote sits apart from the NSE close it is not part of */
#price .quote { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line2); }
#vs-price caption, #vs-nav caption { text-align: left; padding: 8px 0 4px; }
/* lane G7: Notices block on scheme / house pages; long titles wrap at 375px */
.notices { margin: 0; padding: 12px 24px 0 40px; }
.notices li { margin: 0 0 8px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .notices { padding: 12px 16px 0 32px; } }

/* accounts layout lane: /signin, /account, the sync state on /following */
a.btnlink { display: inline-flex; align-items: center; text-decoration: none; }
a.btnlink:hover { text-decoration: none; color: var(--onaccent); }
.linkbtn.danger { color: var(--down-ink); }
.btn.danger { background: none; color: var(--down-ink); border: 1px solid var(--down-ink); }
.btn:focus-visible, a.btnlink:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.signin input { max-width: 360px; }
.turnstile-slot { max-width: 300px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--rin); }
.retention th, .retention td { white-space: normal; height: auto; padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
.retention th[scope="row"] { width: 45%; }

/* tap targets >= 24 px (WCAG 2.5.8; deploy/vitals.mjs gate): links that sit outside running text */
.creator-links a, a.report, a[download], table a, .ph-row > a { display: inline-flex; align-items: center; min-height: 24px; }
details > summary { min-height: 24px; }
input[type="checkbox"] { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--accent); }

/* scheme TER tile: one line per plan */
.big.ter small { font-size: 13px; font-weight: 600; color: var(--muted); }
/* no element may push the page sideways (clip, not hidden: sticky bars keep working) */
html, body { overflow-x: clip; }
/* back to top (owner 10-22): small, round, fixed bottom-right above the phone bottom nav; never in the header */
.totop { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 11; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--up); color: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.totop[hidden] { display: none; }
.totop:hover { background: var(--up-ink); color: var(--surface); text-decoration: none; }
@media (max-width: 767px) { .totop { bottom: calc(73px + env(safe-area-inset-bottom)); } }
@media print { .totop { display: none; } }
/* align 10-22: table text wraps at spaces only, never inside a word ("Clie / nt", "Par- / tici- / pant"). break-word,
   unlike anywhere, keeps each word's width in the column's minimum, so a column is never narrower than its longest word;
   a table still wider than its box scrolls in it. */
table.grid th, table.grid td { overflow-wrap: break-word; }
/* a group header (colspan) is centred over its columns, with a hairline under it spanning exactly those columns;
   even padding both sides, also as a panel's first or last cell (those lose their outer padding, A6) */
.grid thead th[colspan], :is(.panel, .card) .grid thead th[colspan] { text-align: center; padding-left: 12px; padding-right: 12px; border-bottom-color: transparent; background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 24px) 1px; background-position: center bottom; background-repeat: no-repeat; }
.tile, .card { container-type: inline-size; }
.tile .big, .card .big { font-size: clamp(18px, 2.2vw, 28px); }   /* 18 px floor: ₹13,31,480 cr fits a 768 px tile */
@media (max-width: 767px) { .tile .big, .card .big { font-size: min(22px, 5vw); } }
/* figures 10-22 (owner, Safari: "60.0%" drawn under its chip): no cqi in a figure's font size. A fold opened by site.js
   after first paint left WebKit's flex item at the width it had in the closed fold (0 px), so the chip sat on the figure. */
@container (max-width: 420px) { .buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* KPI strips size to their tile count, so no row ends in an empty slot or a lone tile */
@media (min-width: 768px) {
  .strip:not(.two > .strip, .glance):not(:has(> :nth-child(5))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 1101px) {
  .strip:not(.two > .strip, .glance):not(:has(> :nth-child(7))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .strip:not(.two > .strip, .glance):has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }   /* 6 in a row overflowed 16 px at 1280 (stock page, owner 11-02): 3 + 3 */
}
@media (min-width: 768px) and (max-width: 1100px) {   /* 5 tiles: 3 + 2 wide; 6: 3 + 3 */
  .strip:not(.two > .strip, .glance):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .strip:not(.two > .strip, .glance):has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .strip:not(.two > .strip, .glance):has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  .strip:not(.two > .strip, .glance):has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* owner 10-03: the hero headline splits evenly on a phone instead of leaving one word on the second line */
.hero .head h1 { text-wrap: balance; }

/* a11y (audit 10-04): keyboard skip link, shown only on focus */
.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 8px 12px; border-radius: 8px; background: var(--card); color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.skip:focus { top: 8px; }
/* design 10-10, home: two flows on one scale (FII/FPI ink, DII teal); half-width charts sit lower */
.axchart .ln { fill: none; stroke-width: 1.75; } .axchart .l-fpi { stroke: var(--down); } .axchart .l-dii { stroke: var(--up); }
.pxlegend .k-line.l-fpi { background: var(--down); height: 2px; opacity: 1; } .pxlegend .k-line.l-dii { background: var(--up); height: 2px; opacity: 1; }
.two .axchart { grid-template-rows: 150px auto auto; }
.pb > .axchart + .axchart { margin-top: 16px; }
.why.pad-x { margin: 12px 0 0; }
/* design 10-10 (owner: no gaps): the scheme's equity chart grows to the height of moves + asset mix beside it */
#vs-nav .pb { flex: 1; display: flex; flex-direction: column; } #vs-nav .axchart { flex: 1; grid-template-rows: minmax(150px, 1fr) auto auto; }
/* ALIGN 2026-10-13 (docs/company/ALIGN-2026-10-13.md): the header grid is 1fr auto 1fr, and the right group
   (guide + theme + 300px search = 429px) was wider than the 365px side column, so it slid under the centred nav.
   Pill 180px (group 309px fits the side column from 1101px up); 768-899px: nav tightened, grid auto 1fr auto. */
.searchbtn { width: 180px; }
@media (max-width: 1100px) { .searchbtn { width: 44px; } }
/* trim 10-22 (owner, Safari): the ⌘K badge stuck out of the 180px pill; it shows only from 1440px, where the pill fits it */
.searchbtn kbd { flex-shrink: 0; }
@media (max-width: 1439px) { .searchbtn kbd { display: none; } }
@media (min-width: 1440px) { .searchbtn { width: auto; } }
.searchbtn.icon { width: 44px; padding: 0; justify-content: center; }   /* home: the hero box is the one search box */
@media (min-width: 768px) and (max-width: 899px) {
  .top-in { grid-template-columns: auto 1fr auto; gap: 12px; }
  .mainnav > a, .nav-g > summary { padding: 0 10px; }
}
/* ALIGN 2026-10-13: phone, brand and the right group touched by 2px */
@media (max-width: 767px) { .top-r { gap: 4px; } }


/* shareholding: stock-page section (shareholding.py); lines teal/ink/coral, never grey */
.shareholding .shp-sub th { padding-left: 22px; font-weight: 400; }
.shareholding .shp-sub td { color: var(--muted); }
.shareholding .ln.l-promoter { stroke: var(--ink); } .shareholding .ln.l-fpi2 { stroke: var(--up); }
.shareholding .ln.l-dii2 { stroke: var(--up); stroke-dasharray: 5 3; } .shareholding .ln.l-retail { stroke: var(--down); }
.shareholding .ln.l-other { stroke: var(--ink); stroke-dasharray: 2 3; }
.shareholding .pxlegend .k-line.l-promoter { background: var(--ink); height: 2px; opacity: 1; }
.shareholding .pxlegend .k-line.l-fpi2 { background: var(--up); height: 2px; opacity: 1; }
.shareholding .pxlegend .k-line.l-dii2 { background: var(--up); height: 2px; opacity: .55; }
.shareholding .pxlegend .k-line.l-retail { background: var(--down); height: 2px; opacity: 1; }
.shareholding .pxlegend .k-line.l-other { background: var(--ink); height: 2px; opacity: .45; }
/* end shareholding */


/* table filters: the shared bar (site.js enhance) -- column filters in a details, removable chips, clear all */
.tf .tfx { flex: 1 1 100%; }
.tf .tfx:not([open]) { flex: none; }   /* owner 10-23: closed, the filter box, "Column filters" and the row count share one line */
.tf .tfx > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); min-height: 36px; display: flex; align-items: center; }
.tf .tfg { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 8px 16px; padding: 8px 0; }
.tf .tfg label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--ink2); }
.tf .tfg input, .tf .tfg select { flex: 1 1 4.5rem; max-width: none; min-height: 36px; padding: 0 8px; font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rin); min-width: 0; }
.tf .tfg label > input[type=number] { flex-basis: 5rem; }
.tf .tfc { flex: 1 1 100%; }
.tf .tfc .pill { cursor: pointer; }
.tf .tfg input:focus, .tf .tfg select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
@media (max-width: 640px) { .tf .tfg input, .tf .tfg select { min-height: 44px; } }

/* W-011 (Decision 16): below 400px the logo mark goes (name + byline stay) so the brand never runs under Guide */
@media (max-width: 399px) { .brand-mark { display: none; } }
/* W-011: 16px on every phone input/select, else iPhone Safari zooms the page on focus */
@media (max-width: 767px) { .fx-f input, .fx-f select, .tf input, .tf .tfg input, .tf .tfg select, .panel-note input, .panel-note select, .filters .pick, textarea.embed-code { font-size: 16px; } }
.qlist { margin: 0; padding: 8px 16px 16px 32px; line-height: 1.9; }
.qlist .note { margin-left: 6px; }
/* SEO2: inline styles moved here. Data-driven bar widths and heights and axis tick positions as whole-percent
   classes (the templates round to the nearest 1%); bh is a share of the 64px .bars box. */
.fluid { width: 100%; height: auto; display: block; } .embed-img { max-width: 100%; height: auto; }
.embed-code { width: 100%; box-sizing: border-box; font: 12px/16px monospace; }
.bw0 { width: 0%; } .bw1 { width: 1%; } .bw2 { width: 2%; } .bw3 { width: 3%; } .bw4 { width: 4%; } .bw5 { width: 5%; } .bw6 { width: 6%; } .bw7 { width: 7%; } .bw8 { width: 8%; } .bw9 { width: 9%; } .bw10 { width: 10%; } .bw11 { width: 11%; } .bw12 { width: 12%; } .bw13 { width: 13%; } .bw14 { width: 14%; } .bw15 { width: 15%; } .bw16 { width: 16%; } .bw17 { width: 17%; } .bw18 { width: 18%; } .bw19 { width: 19%; } .bw20 { width: 20%; } .bw21 { width: 21%; } .bw22 { width: 22%; } .bw23 { width: 23%; } .bw24 { width: 24%; } .bw25 { width: 25%; } .bw26 { width: 26%; } .bw27 { width: 27%; } .bw28 { width: 28%; } .bw29 { width: 29%; } .bw30 { width: 30%; } .bw31 { width: 31%; } .bw32 { width: 32%; } .bw33 { width: 33%; } .bw34 { width: 34%; } .bw35 { width: 35%; } .bw36 { width: 36%; } .bw37 { width: 37%; } .bw38 { width: 38%; } .bw39 { width: 39%; } .bw40 { width: 40%; } .bw41 { width: 41%; } .bw42 { width: 42%; } .bw43 { width: 43%; } .bw44 { width: 44%; } .bw45 { width: 45%; } .bw46 { width: 46%; } .bw47 { width: 47%; } .bw48 { width: 48%; } .bw49 { width: 49%; } .bw50 { width: 50%; } .bw51 { width: 51%; } .bw52 { width: 52%; } .bw53 { width: 53%; } .bw54 { width: 54%; } .bw55 { width: 55%; } .bw56 { width: 56%; } .bw57 { width: 57%; } .bw58 { width: 58%; } .bw59 { width: 59%; } .bw60 { width: 60%; } .bw61 { width: 61%; } .bw62 { width: 62%; } .bw63 { width: 63%; } .bw64 { width: 64%; } .bw65 { width: 65%; } .bw66 { width: 66%; } .bw67 { width: 67%; } .bw68 { width: 68%; } .bw69 { width: 69%; } .bw70 { width: 70%; } .bw71 { width: 71%; } .bw72 { width: 72%; } .bw73 { width: 73%; } .bw74 { width: 74%; } .bw75 { width: 75%; } .bw76 { width: 76%; } .bw77 { width: 77%; } .bw78 { width: 78%; } .bw79 { width: 79%; } .bw80 { width: 80%; } .bw81 { width: 81%; } .bw82 { width: 82%; } .bw83 { width: 83%; } .bw84 { width: 84%; } .bw85 { width: 85%; } .bw86 { width: 86%; } .bw87 { width: 87%; } .bw88 { width: 88%; } .bw89 { width: 89%; } .bw90 { width: 90%; } .bw91 { width: 91%; } .bw92 { width: 92%; } .bw93 { width: 93%; } .bw94 { width: 94%; } .bw95 { width: 95%; } .bw96 { width: 96%; } .bw97 { width: 97%; } .bw98 { width: 98%; } .bw99 { width: 99%; } .bw100 { width: 100%; }
.bh0 { height: 0%; } .bh1 { height: 1%; } .bh2 { height: 2%; } .bh3 { height: 3%; } .bh4 { height: 4%; } .bh5 { height: 5%; } .bh6 { height: 6%; } .bh7 { height: 7%; } .bh8 { height: 8%; } .bh9 { height: 9%; } .bh10 { height: 10%; } .bh11 { height: 11%; } .bh12 { height: 12%; } .bh13 { height: 13%; } .bh14 { height: 14%; } .bh15 { height: 15%; } .bh16 { height: 16%; } .bh17 { height: 17%; } .bh18 { height: 18%; } .bh19 { height: 19%; } .bh20 { height: 20%; } .bh21 { height: 21%; } .bh22 { height: 22%; } .bh23 { height: 23%; } .bh24 { height: 24%; } .bh25 { height: 25%; } .bh26 { height: 26%; } .bh27 { height: 27%; } .bh28 { height: 28%; } .bh29 { height: 29%; } .bh30 { height: 30%; } .bh31 { height: 31%; } .bh32 { height: 32%; } .bh33 { height: 33%; } .bh34 { height: 34%; } .bh35 { height: 35%; } .bh36 { height: 36%; } .bh37 { height: 37%; } .bh38 { height: 38%; } .bh39 { height: 39%; } .bh40 { height: 40%; } .bh41 { height: 41%; } .bh42 { height: 42%; } .bh43 { height: 43%; } .bh44 { height: 44%; } .bh45 { height: 45%; } .bh46 { height: 46%; } .bh47 { height: 47%; } .bh48 { height: 48%; } .bh49 { height: 49%; } .bh50 { height: 50%; } .bh51 { height: 51%; } .bh52 { height: 52%; } .bh53 { height: 53%; } .bh54 { height: 54%; } .bh55 { height: 55%; } .bh56 { height: 56%; } .bh57 { height: 57%; } .bh58 { height: 58%; } .bh59 { height: 59%; } .bh60 { height: 60%; } .bh61 { height: 61%; } .bh62 { height: 62%; } .bh63 { height: 63%; } .bh64 { height: 64%; } .bh65 { height: 65%; } .bh66 { height: 66%; } .bh67 { height: 67%; } .bh68 { height: 68%; } .bh69 { height: 69%; } .bh70 { height: 70%; } .bh71 { height: 71%; } .bh72 { height: 72%; } .bh73 { height: 73%; } .bh74 { height: 74%; } .bh75 { height: 75%; } .bh76 { height: 76%; } .bh77 { height: 77%; } .bh78 { height: 78%; } .bh79 { height: 79%; } .bh80 { height: 80%; } .bh81 { height: 81%; } .bh82 { height: 82%; } .bh83 { height: 83%; } .bh84 { height: 84%; } .bh85 { height: 85%; } .bh86 { height: 86%; } .bh87 { height: 87%; } .bh88 { height: 88%; } .bh89 { height: 89%; } .bh90 { height: 90%; } .bh91 { height: 91%; } .bh92 { height: 92%; } .bh93 { height: 93%; } .bh94 { height: 94%; } .bh95 { height: 95%; } .bh96 { height: 96%; } .bh97 { height: 97%; } .bh98 { height: 98%; } .bh99 { height: 99%; } .bh100 { height: 100%; }
.ty0 { top: 0%; } .ty1 { top: 1%; } .ty2 { top: 2%; } .ty3 { top: 3%; } .ty4 { top: 4%; } .ty5 { top: 5%; } .ty6 { top: 6%; } .ty7 { top: 7%; } .ty8 { top: 8%; } .ty9 { top: 9%; } .ty10 { top: 10%; } .ty11 { top: 11%; } .ty12 { top: 12%; } .ty13 { top: 13%; } .ty14 { top: 14%; } .ty15 { top: 15%; } .ty16 { top: 16%; } .ty17 { top: 17%; } .ty18 { top: 18%; } .ty19 { top: 19%; } .ty20 { top: 20%; } .ty21 { top: 21%; } .ty22 { top: 22%; } .ty23 { top: 23%; } .ty24 { top: 24%; } .ty25 { top: 25%; } .ty26 { top: 26%; } .ty27 { top: 27%; } .ty28 { top: 28%; } .ty29 { top: 29%; } .ty30 { top: 30%; } .ty31 { top: 31%; } .ty32 { top: 32%; } .ty33 { top: 33%; } .ty34 { top: 34%; } .ty35 { top: 35%; } .ty36 { top: 36%; } .ty37 { top: 37%; } .ty38 { top: 38%; } .ty39 { top: 39%; } .ty40 { top: 40%; } .ty41 { top: 41%; } .ty42 { top: 42%; } .ty43 { top: 43%; } .ty44 { top: 44%; } .ty45 { top: 45%; } .ty46 { top: 46%; } .ty47 { top: 47%; } .ty48 { top: 48%; } .ty49 { top: 49%; } .ty50 { top: 50%; } .ty51 { top: 51%; } .ty52 { top: 52%; } .ty53 { top: 53%; } .ty54 { top: 54%; } .ty55 { top: 55%; } .ty56 { top: 56%; } .ty57 { top: 57%; } .ty58 { top: 58%; } .ty59 { top: 59%; } .ty60 { top: 60%; } .ty61 { top: 61%; } .ty62 { top: 62%; } .ty63 { top: 63%; } .ty64 { top: 64%; } .ty65 { top: 65%; } .ty66 { top: 66%; } .ty67 { top: 67%; } .ty68 { top: 68%; } .ty69 { top: 69%; } .ty70 { top: 70%; } .ty71 { top: 71%; } .ty72 { top: 72%; } .ty73 { top: 73%; } .ty74 { top: 74%; } .ty75 { top: 75%; } .ty76 { top: 76%; } .ty77 { top: 77%; } .ty78 { top: 78%; } .ty79 { top: 79%; } .ty80 { top: 80%; } .ty81 { top: 81%; } .ty82 { top: 82%; } .ty83 { top: 83%; } .ty84 { top: 84%; } .ty85 { top: 85%; } .ty86 { top: 86%; } .ty87 { top: 87%; } .ty88 { top: 88%; } .ty89 { top: 89%; } .ty90 { top: 90%; } .ty91 { top: 91%; } .ty92 { top: 92%; } .ty93 { top: 93%; } .ty94 { top: 94%; } .ty95 { top: 95%; } .ty96 { top: 96%; } .ty97 { top: 97%; } .ty98 { top: 98%; } .ty99 { top: 99%; } .ty100 { top: 100%; }
.tx0 { left: 0%; } .tx1 { left: 1%; } .tx2 { left: 2%; } .tx3 { left: 3%; } .tx4 { left: 4%; } .tx5 { left: 5%; } .tx6 { left: 6%; } .tx7 { left: 7%; } .tx8 { left: 8%; } .tx9 { left: 9%; } .tx10 { left: 10%; } .tx11 { left: 11%; } .tx12 { left: 12%; } .tx13 { left: 13%; } .tx14 { left: 14%; } .tx15 { left: 15%; } .tx16 { left: 16%; } .tx17 { left: 17%; } .tx18 { left: 18%; } .tx19 { left: 19%; } .tx20 { left: 20%; } .tx21 { left: 21%; } .tx22 { left: 22%; } .tx23 { left: 23%; } .tx24 { left: 24%; } .tx25 { left: 25%; } .tx26 { left: 26%; } .tx27 { left: 27%; } .tx28 { left: 28%; } .tx29 { left: 29%; } .tx30 { left: 30%; } .tx31 { left: 31%; } .tx32 { left: 32%; } .tx33 { left: 33%; } .tx34 { left: 34%; } .tx35 { left: 35%; } .tx36 { left: 36%; } .tx37 { left: 37%; } .tx38 { left: 38%; } .tx39 { left: 39%; } .tx40 { left: 40%; } .tx41 { left: 41%; } .tx42 { left: 42%; } .tx43 { left: 43%; } .tx44 { left: 44%; } .tx45 { left: 45%; } .tx46 { left: 46%; } .tx47 { left: 47%; } .tx48 { left: 48%; } .tx49 { left: 49%; } .tx50 { left: 50%; } .tx51 { left: 51%; } .tx52 { left: 52%; } .tx53 { left: 53%; } .tx54 { left: 54%; } .tx55 { left: 55%; } .tx56 { left: 56%; } .tx57 { left: 57%; } .tx58 { left: 58%; } .tx59 { left: 59%; } .tx60 { left: 60%; } .tx61 { left: 61%; } .tx62 { left: 62%; } .tx63 { left: 63%; } .tx64 { left: 64%; } .tx65 { left: 65%; } .tx66 { left: 66%; } .tx67 { left: 67%; } .tx68 { left: 68%; } .tx69 { left: 69%; } .tx70 { left: 70%; } .tx71 { left: 71%; } .tx72 { left: 72%; } .tx73 { left: 73%; } .tx74 { left: 74%; } .tx75 { left: 75%; } .tx76 { left: 76%; } .tx77 { left: 77%; } .tx78 { left: 78%; } .tx79 { left: 79%; } .tx80 { left: 80%; } .tx81 { left: 81%; } .tx82 { left: 82%; } .tx83 { left: 83%; } .tx84 { left: 84%; } .tx85 { left: 85%; } .tx86 { left: 86%; } .tx87 { left: 87%; } .tx88 { left: 88%; } .tx89 { left: 89%; } .tx90 { left: 90%; } .tx91 { left: 91%; } .tx92 { left: 92%; } .tx93 { left: 93%; } .tx94 { left: 94%; } .tx95 { left: 95%; } .tx96 { left: 96%; } .tx97 { left: 97%; } .tx98 { left: 98%; } .tx99 { left: 99%; } .tx100 { left: 100%; }
.note.ev { display: block; max-width: 40ch; white-space: normal; }   /* E2: split/bonus sentence under a movers row */
.lift:not(:has(.showall[open])) tbody tr:nth-child(n+26) { display: none; }   /* a big scheme (scheme_lift): "Show the first 25" folds the loaded rows */
abbr.pp { text-decoration: none; cursor: help; }   /* lane F 10-21: "pp" says "percentage points" on hover, no underline clutter */
/* hero 10-22 (owner): tagline h1, one sentence, search, then three plain large entry links (one row on laptop, stacked on phone) */
.hero .head .lede { font-size: 16px; line-height: 24px; color: var(--ink2); }

/* design 10-22 (owner iPhone: "See the alignment … not AI-generic … clean and simple"): the first screen is one
   left-aligned column at every width, on one rhythm: h1 → line 8 px, line → search → links 16 px, then head → tiles →
   strip --sec apart, the dates line 16 px under the tiles. Type carries the hierarchy (a large tight h1, the figures),
   the entry links are one plain line with hairline dividers, never pills with arrows. */
.hero .head { gap: 16px; }
.hero > .head { max-width: 760px; }
.hero .head h1 { font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.hero .head h1 + .lede { margin-top: -8px; }
.hero .head h1, .hero .head .lede { text-wrap: balance; }
.hero .searchbig { margin-top: 0; }
.hero-go { display: flex; flex-wrap: nowrap; gap: 0 25px; font-size: 15px; line-height: 20px; }
.hero-go a { position: relative; display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.hero-go a + a::before { content: ""; position: absolute; left: -13px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.hero .clocks { margin-top: calc(16px - var(--sec)); }      /* the dates line belongs to the tiles above it */
.tile .note :is(.fig, .nowrap) { white-space: nowrap; }      /* "−₹49,457 cr" never splits after its sign; "· AMFI" never alone (phone turns .nowrap off elsewhere) */
@media (max-width: 767px) { .hero .head h1 { font-size: 30px; line-height: 34px; } }
/* owner 10-23 (laptop): "Previous layout was good": from 900 px the hero is centred again (h1, line, the search box across
   the column, the quiet links), the tiles and dates line under it; the phone keeps the left-aligned stack */
@media (min-width: 900px) {
  .hero > .head { max-width: 880px; align-self: center; align-items: center; text-align: center; }
  .hero-go { justify-content: center; }
  .hero .clocks { text-align: center; }
}

/* tables 10-22 */
/* owner 10-22: the monthly-changes tables (movers, house, manager, screens) calm: one Price cell on one line, one thin
   60x16 line beside it (teal up, coral down, teal faint when flat), none on a phone; the Activity pill smaller and quieter */
.rowspark { display: inline-block; width: 60px; height: 16px; margin-left: 8px; vertical-align: -3px; color: var(--up); }
.rowspark.t-dn { color: var(--down); } .rowspark.t-flat { opacity: .5; }
.rowspark .px { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; }
table.grid:has(td.pxcell) th[scope="row"] > a + .note { display: none; }   /* the company name: on the symbol's hover title, so the row stays one line */
td.pxcell > span { white-space: nowrap; }   /* "▼ −52.5%" wraps as one, never leaving its arrow behind */
table.grid td .pill { min-height: 18px; padding: 0 6px; font-size: 12px; line-height: 18px; font-weight: 500; }
@media (max-width: 640px) {
  table.grid.tcards .rowspark { display: none; }
  table.grid.tcards:has(td.pxcell) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* three equal columns, never wider than the card */
  table.grid.tcards:has(td.pxcell) td.num { display: block; }   /* a flex column stacked "▲" over "+0.30" over "pp": text runs, wrapping at a space only */
  table.grid.tcards:has(td.pxcell) td.num::before { display: block; }
}

/* design 10-22b (owner iPhone): the phone header's Guide and light/dark buttons were boxed at two heights (36 and 44 px)
   beside an unboxed search icon (the .themebtn rule after the phone block won); now all three unboxed, 44 px. A wrapped
   footer row left "LinkedIn" alone on its line: below 1024 px the footer links are an even grid. */
@media (max-width: 767px) {
  .themebtn, .guidebtn { border: 0; background: none; }
  .guidebtn { height: 44px; padding: 0 10px; font-size: 14px; }
}
.secbar + .panel { border-top-color: transparent; }   /* the strip's own rule is the line above the first section: one rule, not two 24 px apart */
@media (max-width: 1023px) { .footnav { display: grid; width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; } .footnav .report { grid-column: 1 / -1; } }   /* the page's "Report a wrong number" is its own row */   /* width: a flex item, auto-fill gave one column */
@media (min-width: 768px) and (max-width: 1023px) { .footnav[aria-label="Sections"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* sitelinks 10-24: six sections, two full rows, no orphan */
@media (max-width: 767px) { .footnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footnav a { min-height: 28px; } }   /* 5 rows x 28 = the old 3 wrapped rows; 28 >= the 24 px target */
/* owner 10-22: the search words name what the site has ("Search anything" was vague); the short form under 600 px fits 375 */
.searchbig .ph-short { display: none; }
@media (max-width: 599px) { .searchbig .ph-long { display: none; } .searchbig .ph-short { display: inline; } }
/* the words need ~200 px; beside Guide and light/dark they fit from 1440 px (with ⌘K), below that the pill is the icon */
@media (max-width: 1439px) { .searchbtn { width: 44px; padding: 0; justify-content: center; } .searchbtn-text { display: none; } }
@media (min-width: 1440px) { .searchbtn:not(.icon) { min-width: max-content; } }

.page > .head .lede-note { max-width: none; }   /* owner 10-23: a head's line spans the column (no empty right side beside a 90ch block) */
/* owner 10-23 ("When you open a stock page the right side is empty"): a page head is two-sided from 1024 px: the name,
   price, Follow and actions on the left (owner 10-23: "I didn't like the price aligned right"), the description on the right
   from the name's line down; stacked below 1024 px. The description sits right after the h1 in the HTML (the first
   paragraph, for search) and the grid places it on the right; the last row is 1fr so a tall side grows that row, never
   a gap between the name and the price. 38 %: at 44 % a one-line description left a third of the head empty */
.head-main, .head-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (min-width: 1024px) {
  .head.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); grid-template-rows: auto auto 1fr;
    column-gap: 48px; row-gap: 8px; align-items: start; }
  .head.split > :not(.head-side) { grid-column: 1; }
  .head-side { grid-column: 2; grid-row: 2 / -1; }   /* from the name's line down */
  .head-main .searchbig { max-width: 420px; }
  .head-side .lede-note, .head-side .about { font-size: 14px; line-height: 22px; color: var(--ink2); }
}
/* owner 10-23: "What changed" sentences in two columns from 1024 px (an 80ch block left the right third empty);
   11-02: a grid of two blocks, not CSS columns (Safari started the right column lower) */
.facts-cols, .facts-cols > div { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) {
  .facts-cols:has(> div + div) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .facts-cols p { max-width: none; }
}
/* R11 (audit 10-23): the stock search leads, one real stock's holders under it */
.hero .searchbig { border-color: var(--axis); color: var(--ink2); font-size: 16px; min-height: 52px; }
/* interpretation layer 10-31 (fundtracker/interp/, templates/_interp.html): the (i) glossary expander and the
   "How to read this" box. Site tokens only (dark mode follows them); hairlines, not boxed cards, like .card. */
.info { display: inline-block; vertical-align: middle; }
.card-head > .info, .section-head > .info, .panel-bar > .info { margin-right: auto; }   /* sits by the heading, not mid-row */
.card-head:has(> .info), .section-head:has(> .info), .panel-bar:has(> .info), .read-head { position: relative; }
.info > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; background: var(--chip); color: var(--ink2);
  font: 500 12px/24px var(--ui); text-align: center; user-select: none; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { color: var(--ink); }
.info > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info[open] > summary { background: var(--ink2); color: var(--bg); }
.info-body { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 4; max-width: 64ch; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--rin); box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  font-size: 13px; line-height: 20px; font-weight: 400; color: var(--ink2); text-align: left; letter-spacing: 0; }
.info-body strong { font-weight: 600; color: var(--ink); }
.info-body p + p { margin-top: 6px; }
.read { display: flex; flex-direction: column; gap: 0; }
.read > .section-head { margin-bottom: 8px; }
.read-sum { font-size: 15px; line-height: 24px; color: var(--ink2); max-width: 72ch; margin-bottom: 8px; }
.read:not(:has(.showall[open])) .read-item:nth-of-type(n+4) { display: none; }   /* tidy 10-31: top 3, "Show all" for the rest */
.read-item { border-top: 1px solid var(--line); padding: 16px 0; display: flex; flex-direction: column; gap: 8px; }
.read-head { display: flex; align-items: center; gap: 8px; }
.read-head h3 { font-size: 15px; line-height: 24px; font-weight: 600; }
.read-lead { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--ink); max-width: 72ch; }
.read-item p { font-size: 14px; line-height: 22px; color: var(--ink2); max-width: 72ch; }
.read-item p.note { font-size: 12px; line-height: 18px; color: var(--muted); }
.read-more > summary { display: inline-flex; align-items: center; min-height: 32px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--accent); }
.read-more[open] > summary { margin-bottom: 4px; }
.read-more > p + p { margin-top: 6px; }
.read-table { width: 100%; max-width: 640px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.read-table th, .read-table td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.read-table th:first-child { text-align: left; font-weight: 400; color: var(--ink2); white-space: normal; padding-left: 0; }
.read-table thead th { font-weight: 500; color: var(--muted); font-size: 12px; white-space: normal; vertical-align: bottom; }
.read-table tbody tr > * { border-top: 1px solid var(--line2); }
.read > .showrow { border-top: 1px solid var(--line); }
.read-foot { padding-top: 4px; }
/* tidy 10-31: from 1024 px the words sit left at a reading width and the table right, so neither runs the full width
   and the right side is not left empty (owner 10-23) */
@media (min-width: 1024px) {
  .read-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 8px; align-content: start; }
  .read-item > * { grid-column: 1; }
  .read-item > .tablewrap { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
  .read-table { max-width: none; }
}
@media (max-width: 640px) { .read-table { font-size: 13px; } .read-table th, .read-table td { padding: 6px 4px; } .info-body { max-width: none; } }

/* /stock/X/delivery (owner 10-31): one seamless row per period, delivered (teal) inside traded (track) */
.dl-key { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.dl-sw-d { background: var(--up); } .dl-sw-t { background: var(--track); box-shadow: inset 0 0 0 1px var(--line); }
.dl-ph { padding: 12px 0 4px; }
.dl-seg label { display: flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: calc(var(--rseg) - 2px); font-size: 14px; font-weight: 500; color: var(--muted-chip); cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.dl-seg label:has(:checked) { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px var(--line2); }
.dl-seg label:has(:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.dl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
[data-dl]:has([value=d]:checked) [data-per-panel]:not([data-per-panel=d]), [data-dl]:has([value=w]:checked) [data-per-panel]:not([data-per-panel=w]),
[data-dl]:has([value=m]:checked) [data-per-panel]:not([data-per-panel=m]) { display: none; }
[data-dl]:has([value=nse]:checked) [data-src-panel]:not([data-src-panel=nse]), [data-dl]:has([value=bse]:checked) [data-src-panel]:not([data-src-panel=bse]),
[data-dl]:has([value=both]:checked) [data-src-panel]:not([data-src-panel=both]) { display: none; }
.dl-seg + .dl-seg { margin-left: 8px; }
.dl-seg:empty { display: none; }
@media (max-width: 767px) { .dl-seg label { min-height: 44px; } }   /* = .seg button on phones */
.dl-rows { list-style: none; margin: 0; padding: 0; }
.dl-row { display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr) minmax(112px, auto); grid-template-areas: "when bar px" ". qty ."; column-gap: 16px; row-gap: 2px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 14px; }
.dl-row:last-child { border-bottom: 0; }
.dl-when { grid-area: when; color: var(--ink2); white-space: nowrap; }
.dl-bar { grid-area: bar; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dl-track { display: block; flex: 0 0 calc(100% - 60px); min-width: 0; }   /* 60px: the % sits beside, in flow (layout audit) */
.dl-t { display: block; height: 14px; border-radius: 4px; background: var(--track); box-shadow: inset 0 0 0 1px var(--line); min-width: 2px; }
.dl-d { display: block; height: 100%; border-radius: 4px; background: var(--up); }
.dl-pct { flex: 1; text-align: right; font-weight: 600; font-size: 13px; white-space: nowrap; }   /* right edge = the close's right edge */
.dl-px { grid-area: px; text-align: right; white-space: nowrap; }
.dl-qty { grid-area: qty; }
.dl-left { padding-top: 8px; }
.grid tr.dl-me > * { background: var(--hover); font-weight: 600; }
@media (max-width: 640px) {   /* phone cards: your own row is the same card as its peers, only tinted (owner 11-03: taller, bold figures) */
  table.grid.tcards tr.dl-me > :not(:first-child) { font-weight: 400; }
  table.grid.tcards tr.dl-me { background: var(--hover); }
  table.grid.tcards th > span.num > a { min-height: 26px; padding: 0; display: inline-flex; align-items: center; }   /* the auto-linked name inside a plain span kept the 44 px tap box (padding 5 px), not the 26 px of a peer's link */
}
@media (max-width: 640px) {
  .dl-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when px" "bar bar" "qty qty"; column-gap: 8px; }
}

/* layout pass 10-31 (owner: "few spaces, font clear, every tab clean") */
.tabs .t-flat, .seg .t-flat { color: var(--muted-chip); }   /* a count on the chip track: --muted there is 4.23:1 */
:is(.two, .pair) > details.panel[open]::details-content { flex: 1; display: flex; flex-direction: column; }   /* paired folds: footers on one line, as paired sections */
.why + .pb:has(> .axchart:first-child) { padding-top: 12px; }   /* a chart right under a paragraph: its top label stays inside the card */
:is(td, th) a.num, a.note { padding-block: 4px; min-width: 24px; }   /* tap box >= 24 px (inline padding: no line moves; min-width only bites when the link is a box) */
table.grid.tcards :is(td, th) > a { min-height: 24px; min-width: 24px; display: inline-flex; align-items: center; }   /* phone cards: the cell is a flex column, so its link is a box */
main section[id] { scroll-margin-top: calc(var(--toph) + 64px); }   /* a tab to a plain section (fii-dii #daily) lands below the sticky bars */
@media (max-width: 1023px) { .tabs button { padding: 0 12px; } }   /* /stock/X/mf: 7 bucket tabs on one line at 768 */
.rank .who > a, .head .meta a { padding-block: 2px; margin-block: -2px; }   /* block links: 24 px tap box, same line box */
.mmnav a, .pf a { padding-block: 5px; }   /* inline links outside running text: 24 px tap box */
th > a { min-width: 24px; }   /* a short symbol ("LT") still gets a 24 px wide tap box */
/* 11-03 audit (WCAG 2.2 2.5.8): the home page's "Data dates" link was 15 px tall; a 24 px target without moving the line */
.clocks a { display: inline-flex; align-items: center; min-height: 24px; }
.hero-guide a { display: inline-flex; align-items: center; min-height: 24px; }
/* align 11-03 (owner phone screenshot): one rhythm for stat tiles, fold headers, section gaps and fold toggles on a phone */
@media (max-width: 767px) {
  /* two-column tiles: the hairline is the divider BETWEEN the columns, centred in the gutter; the left column starts on the
     page edge like the text above it, so rule and padding are the same distance on both sides of the divider */
  .strip, .strip.five { column-gap: 0; }
  .strip > .tile:nth-child(odd) { border-left-width: 0; padding-left: 0; padding-right: 16px; }
  .strip > .tile:nth-child(even) { padding-left: 16px; }
  .strip > .tile:last-child:nth-child(odd) { padding-right: 0; }
  /* fold headers: a long title wraps tight, its note sits right under it (never a 12 px gap), and the chevron stays on the last line */
  .fold > summary.panel-bar { align-items: flex-start; row-gap: 2px; padding: 12px 0; }
  .fold > summary.panel-bar .h2 { font-size: 17px; line-height: 22px; }
  .fold > summary.panel-bar .note { flex: 1 0 100%; }
  .fold[open] > summary.panel-bar { margin-bottom: 8px; }
  .fold:not([open]) > summary.panel-bar { border-bottom: 0; }   /* a shut fold is one header between two rules, not a header with a rule under it and another 24 px on */
  /* sections stack on the same 24 px as every other block (--sec), not 28 */
  .cards, .two, .multiples { gap: var(--sec); }
  /* fold toggles are real 44 px targets (the footer's text links stay at the 24 px minimum) */
  details.how > summary, details.howto > summary, details.read-more > summary, details.tfx > summary { min-height: 44px; }
  details:not([class]) > summary { padding-block: 10px; }   /* padding, not flex: the native marker stays */
}