/* css/skin1.css: THE one skin layer (Anand, 8-Nov-2026): black and white with a subtle purple accent, the cp2 elements (black chips, one segmented control, Inter, dark mode).
   LIVE for everyone since 10-Nov-2026: every page links it in <head> and its head script sets data-skin1 on <html> unless the visitor opened ?preview=0 or ?skin1=0 (kept for the tab in sessionStorage fvz_skin1=0, testing only).
   Every rule below starts with html[data-skin1], so with the switch off the file changes nothing. Light touch by order: same content, layout and features; only colour, type, chips, controls, tables, cards.
   Colours are the toolkit tokens (--tk-*) on toolkit pages and the site tokens (--accent, --bg-surface ...) on the public pages; dark mode follows the tokens.
   Sections: 1 toolkit chart tools (.tkh-*)  2 toolkit shared pieces  3 mutual fund and ETF pages  4 other toolkit pages  5 public site tokens  6 public page parts */

/* ============ 1. toolkit chart tools: Day-wise Futures Build-up, PCR Trend, Stock Options Max Pain Trend, Open Interest Analysis (js/toolkit-chrome.js) ============ */
html[data-skin1] .tkh-toolhead { background:none; border:0; border-radius:0; box-shadow:none; padding:0; margin-bottom:0; }
html[data-skin1] .tkh-toolhead-top { display:block; }
html[data-skin1] .tkh-toolhead-top .tks-g2-top { max-width:none; margin:0 0 20px; }
html[data-skin1] .tkh-toolhead .tkh-controls--in { margin-top:0; padding-top:0; border-top:0; }
html[data-skin1] .tkh-seg { border:0; background:var(--tk-surface-2,#F4F4F5); box-shadow:inset 0 0 0 1px var(--tk-line,#E4E4E7); border-radius:50px; padding:3px; gap:0; overflow:visible; }
html[data-skin1] .tkh-seg button { border:0; border-radius:50px; background:none; color:var(--tk-ink-2,#52525B); padding:0 14px; height:30px; font-weight:600; }
html[data-skin1] .tkh-seg button:hover:not(.on) { color:var(--tk-ink,#111); }
html[data-skin1] .tkh-seg button.on { background:var(--tk-ink,#111); color:var(--tk-surface,#fff); }
html[data-skin1] .tkh-seg button:focus-visible { outline:2px solid var(--tk-accent,#863EA2); outline-offset:1px; }
html[data-skin1] .tkh-cta { background:var(--tk-surface-2,#F4F4F5); border-color:var(--tk-line,#E4E4E7); box-shadow:none; }
html[data-skin1] .tkh-cta .t { color:var(--tk-ink,#111); }
html[data-skin1] .tkh-lockbox { border:1px solid var(--tk-line-strong,#D4D4D8); color:var(--tk-ink,#111); }
html[data-skin1] .tkh-lockcard .ic { background:var(--tk-surface-2,#F4F4F5); color:var(--tk-ink,#111); }
html[data-skin1] .tkh-lockcard .t { color:var(--tk-ink,#111); }
html[data-skin1] .tkh-card, html[data-skin1] .tkh-metrics, html[data-skin1] .tkh-section, html[data-skin1] .tkh-table-wrap { box-shadow:none; }
html[data-skin1] .tkh-section h3 { color:var(--tk-ink,#111); }
html[data-skin1] .tkh-date:focus { border-color:var(--tk-ink-3,#71717A); box-shadow:0 0 0 3px var(--tk-accent-soft,rgba(17,17,17,.08)); }

/* ============ 2. toolkit shared pieces used by the pages below ============ */
/* one "selected" look for every chip, tab pill and timeframe button: the ink colour (black in light, white in dark), like the watchlist and the G2 pages */
html[data-skin1] .tkfa-nav button[aria-current="true"],
html[data-skin1] .tkfa-tabs button[aria-pressed="true"],
html[data-skin1] .fc-chip.on,
html[data-skin1] .fx-tf button.on,
html[data-skin1] .fx-fam.on,
html[data-skin1] .etfhome .eh-fam[aria-checked="true"] { background:var(--tk-ink,#111); border-color:var(--tk-ink,#111); color:var(--tk-surface,#fff); }
html[data-skin1] .fx-cat.on,
html[data-skin1] .etfhome .eh-cat[aria-checked="true"],
html[data-skin1] .ehto-cat.ehto-on { border-color:var(--tk-ink,#111); color:var(--tk-ink,#111); }
html[data-skin1] .tkfa-nav button:hover, html[data-skin1] .tkfa-tabs button:hover,
html[data-skin1] .fc-chip:hover, html[data-skin1] .fx-tf button:hover, html[data-skin1] .fx-fam:hover, html[data-skin1] .fx-cat:hover,
html[data-skin1] .etfhome .eh-fam:hover, html[data-skin1] .etfhome .eh-cat:hover, html[data-skin1] .fc-more button:hover { border-color:var(--tk-ink-3,#71717A); color:var(--tk-ink,#111); }
html[data-skin1] .fx-secnav a.on { color:var(--tk-ink,#111); border-bottom-color:var(--tk-ink,#111); }
html[data-skin1] .fc-pick.open .fc-pick__in, html[data-skin1] .fc-pick__in:focus, html[data-skin1] .fx-combo-btn[aria-expanded="true"],
html[data-skin1] .etfhome .eh-field:focus-within, html[data-skin1] .fx-search input:focus, html[data-skin1] .fx-pick select:focus, html[data-skin1] .fc-in:focus { border-color:var(--tk-ink-3,#71717A); box-shadow:0 0 0 3px var(--tk-accent-soft,rgba(17,17,17,.08)); }
html[data-skin1] .fx-comparebtn, html[data-skin1] .fc-open a, html[data-skin1] .fc-open button { border-color:var(--tk-ink,#111); color:var(--tk-ink,#111); }
html[data-skin1] .fc-card.on { border-color:var(--tk-ink,#111); box-shadow:inset 0 0 0 1px var(--tk-ink,#111); }
html[data-skin1] .fc-card:hover { border-color:var(--tk-ink-3,#71717A); transform:none; }
html[data-skin1] .fc-stat, html[data-skin1] .fc-card { box-shadow:none; }

/* ============ 3. mutual fund and ETF pages ============ */
/* the calculator pages (SIP Returns, Rolling Returns, Overlap): the boxed gradient band becomes the flat G2 heading (js/toolkit-skin1-kit.js skinFc) */
html[data-skin1] .fc-phead { background:none; border:0; border-radius:0; padding:0; margin-bottom:0; }
html[data-skin1] .fc-phead__top { display:block; }
html[data-skin1] .fc-phead__top .tks-g2-top { max-width:none; margin:0 0 20px; }
html[data-skin1] .fcx .tks-g2-top h1 { font-size:28px; line-height:34px; font-weight:700; letter-spacing:-.02em; margin:0; }
@media (max-width:640px) { html[data-skin1] .fcx .tks-g2-top h1 { font-size:var(--tk-fs-h1-m,20px); line-height:26px; } }
html[data-skin1] .fc-phead .fc-lab { color:var(--tk-ink-2,#52525B); }
html[data-skin1] .fc-phead .fc-pick__in, html[data-skin1] .fc-pick__in { border-color:var(--tk-line-strong,#D4D4D8); }
html[data-skin1] .fc-phead__r { margin-top:0; }
/* Mutual Fund Activity: the band becomes the heading (skinFa) */
html[data-skin1] .tkfa-head { background:none; border:0; border-radius:0; padding:0; margin-bottom:0; }
html[data-skin1] .tkfa-head .tks-g2-top { max-width:none; margin:0 0 20px; }

/* ============ 5. public site, research and member pages: the tokens (loaded on every page whose head carries the skin1 script) ============
   These pages already read one shared set of variables, so the whole change is the tints: the lavender washes and tinted chips become neutral greys, the deep purple text becomes
   a dark grey, the purple-tinted shadows become neutral. --accent itself (#863EA2) stays: it is the one subtle purple, on links, the primary action, focus and the brand marks.
   --text-tertiary DOES change (QA 9-Nov: #9CA3AF is 2.4:1): the SEBI RA line and the disclosure blocks are set in it, so they get darker grey text and nothing else: same words, same place, same size and weight. One line to revert (this file, --text-tertiary). */
html[data-skin1] {
  --accent-bg:#F8F8F9;
  --accent-text:#3F3F46;
  --pro-tint:#EDEDEF;
  /* CONTRAST (QA 9-Nov): muted text, the up and down colours are at least 4.5:1 on white AND on the grey chips and panels. #9CA3AF was 2.4:1; #16A34A was 3.3:1. */
  --text-tertiary:#666D7A;
  --gain:#15803D;
  --loss:#C62828;
  --bg-border:#E4E4E7;
  --text-secondary:#52525B;
  --wash-purple:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%);
  --grad-cta:linear-gradient(180deg,#863EA2 0%,#863EA2 100%);
  --shadow-card:0 1px 3px rgba(0,0,0,.06);
  --shadow-raised:0 8px 24px rgba(0,0,0,.10);
}

/* ============ 4. other toolkit pages: Notifications, Usage and Credits, Feature requests, Earnings Calls, the legacy .tkh-head band (Portfolio gate) ============ */
/* the boxed gradient band becomes a flat heading with the full-width hairline */
html[data-skin1] .tknp-head, html[data-skin1] .tkuc__head, html[data-skin1] .tkfr-hero, html[data-skin1] .tkh-head
  { background:none; border:0; border-bottom:1px solid var(--tk-line,#E4E4E7); border-radius:0; box-shadow:none; padding:0 0 20px; margin-bottom:24px; }
html[data-skin1] .tkh-head .tkh-upd, html[data-skin1] .tkh-head .tkh-yt { background:none; border-color:var(--tk-line,#E4E4E7); color:var(--tk-ink-2,#52525B); }
html[data-skin1] .tknp-bar { border-top:0; padding-top:8px; }
html[data-skin1] .tknp-h1, html[data-skin1] .tkuc__h1 { color:var(--tk-ink,#111); }
html[data-skin1] .tknp-qs { background:none; border-color:var(--tk-line,#E4E4E7); }
html[data-skin1] .tknp-chip.on, html[data-skin1] .tkfr-chip.on { background:var(--tk-ink,#111); border-color:var(--tk-ink,#111); color:var(--tk-surface,#fff); }
html[data-skin1] .tknp-chip:hover, html[data-skin1] .tkfr-chip:hover { border-color:var(--tk-ink-3,#71717A); color:var(--tk-ink,#111); }
html[data-skin1] .tknp-mark, html[data-skin1] .tknp-rows-btn, html[data-skin1] .tknp-more, html[data-skin1] .tkfr-btn:not(.tkfr-btn--prim) { border-color:var(--tk-line-strong,#D4D4D8); color:var(--tk-ink,#111); }
html[data-skin1] .tknp-more:hover, html[data-skin1] .tkfr-btn:not(.tkfr-btn--prim):hover { background:var(--tk-surface-2,#F4F4F5); border-color:var(--tk-ink-3,#71717A); }
html[data-skin1] .tkfr-btn--prim { background:var(--tk-ink,#111); border-color:var(--tk-ink,#111); color:var(--tk-surface,#fff); }
html[data-skin1] .tkfr-btn--prim:disabled { background:var(--tk-tint-3,#D4D4D8); border-color:var(--tk-tint-3,#D4D4D8); color:var(--tk-ink-3,#71717A); }
html[data-skin1] .tkfr-card, html[data-skin1] .tkfr-railcard, html[data-skin1] .tkfr-vote { border-color:var(--tk-line,#E4E4E7); box-shadow:none; }
html[data-skin1] .tkfr-vote:hover { background:var(--tk-surface-2,#F4F4F5); border-color:var(--tk-ink-3,#71717A); }
html[data-skin1] .tkfr-note { background:var(--tk-surface-2,#F4F4F5); border-color:var(--tk-line,#E4E4E7); border-left-color:var(--tk-ink,#111); }
html[data-skin1] .tkfr-more { border-color:var(--tk-line-strong,#D4D4D8); color:var(--tk-ink,#111); }
html[data-skin1] .tknp-card, html[data-skin1] .tknp-card .tkn__item { border-color:var(--tk-line,#E4E4E7); }
/* Earnings Calls: the selected tab is the ink (links keep the accent) */
html[data-skin1] .tkec-tab.on { color:var(--tk-ink,#111); border-bottom-color:var(--tk-ink,#111); }
html[data-skin1] .tkec-box { border-color:var(--tk-line,#E4E4E7); box-shadow:none; }
/* the page wash (the lavender gradient on <body>, home and research pages) is plain white */
html[data-skin1] body { background-image:none !important; }
html[data-skin1] .etfhome .eh-fam[aria-checked="true"] .eh-n { color:inherit; opacity:.7; }
/* Portfolio X-ray: the heading band of the page and its sign-in gate */
html[data-skin1] .pf-head { background:none; border:0; border-bottom:1px solid var(--tk-line,#E4E4E7); border-radius:0; box-shadow:none; padding:0 0 20px; margin-bottom:24px; }

/* ============ 6. public page parts ============ */
/* a selected filter chip is black, like every other chip (the cp2 rule); the active item of a side rail stays the accent */
html[data-skin1] .filter-item.is-active, html[data-skin1] .rep-tab.is-active, html[data-skin1] .chip.on, html[data-skin1] .tf button.on, html[data-skin1] .lang-btn.is-active
  { background:#111111; border-color:#111111; color:#FFFFFF; }
html[data-skin1] .filter-item:hover:not(.is-active), html[data-skin1] .rep-tab:hover:not(.is-active) { border-color:#71717A; color:#111111; }

/* ============ 7. contrast tokens for the toolkit, light theme (dark already passes) ============ */
html[data-skin1]:not([data-theme="dark"]) { --tk-ink-3:#63636D; --tk-ink-muted-brand:#63636D; --tk-gain:#15803D; --tk-loss:#C62828; }

/* ============ 8. phone: nothing scrolls sideways ============ */
@media (max-width:640px) {
  html[data-skin1] .flow-nav__row { overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch; }
  html[data-skin1] .sfoot__comp-wrap { overflow-x:auto; max-width:100%; }
}

/* contrast leftovers on single components (QA 9-Nov) */
html[data-skin1] .flow-nav__num { opacity:1; }
html[data-skin1] .rrow__chip--default { color:#5B6270; }
html[data-skin1] .feat-rail__num { color:var(--accent-text); }
html[data-skin1] .pk-cap--s, html[data-skin1] .cap-card__tier--s { background:#8E4FA6; }
@media (max-width:640px) { html[data-skin1] .overlap-layout > * { min-width:0; } }
@media (max-width:640px) { html[data-skin1] .dir > * { min-width:0; } html[data-skin1] .dir .chips { flex-wrap:wrap; } }
/* the toolkit sidebar group labels (QA 9-Nov: #71717A on #F4F4F5 is 4.4:1) */
html[data-skin1]:not([data-theme="dark"]) .fr-gt { color:#63636D; }
html[data-skin1] .fx-amc { color:var(--tk-ink-3,#63636D); }

/* ============ 9. REPORTS LIST only (Anand 10-Nov-2026): one neutral style for the category chips ============
   The list used six colours (purple, teal, amber, green, greys). Every category chip is now the same neutral grey; the selected filter chip is black (section 6).
   Nothing else is changed: the home page and the report pages keep the skin1 look as it was. */
html[data-skin1]:has(.rrow) .rrow__chip,
html[data-skin1]:has(.rrow) .rrow__chip--stocks,
html[data-skin1]:has(.rrow) .rrow__chip--funds,
html[data-skin1]:has(.rrow) .rrow__chip--markets,
html[data-skin1]:has(.rrow) .rrow__chip--options,
html[data-skin1]:has(.rrow) .rrow__chip--money,
html[data-skin1]:has(.rrow) .rrow__chip--default { background:#F4F4F5; color:#3F3F46; box-shadow:inset 0 0 0 1px #E4E4E7; }