MediaWiki:Common.css: Difference between revisions

Line 1:

/* ═══════════════════════════════════════════════════════════════════

MediaWiki:Common.css — grantha.io (v6 additions)

Paste this entire block INTO your existing Common.css, replacing

or appending as appropriate. Sections marked NEW are net additions.

═══════════════════════════════════════════════════════════════════ */

Line 84:

Line 86:

.adhyaya-block .mw-editsection { display: none !important; }

.mw-parser-output p { margin: 0 0 0.~~35rem~~; }

.mw-parser-output p { margin: 0 0 0.6rem; } /* REDUCED */

.mw-parser-output p:empty,

.mw-parser-output > div > p:empty,

Line 94:

Line 96:

}

/* ── Verse blocks ~~──────────────────────────────────────────────~~ */

/* ── Verse blocks — tightened spacing ────────────────────────── */

.shloka-block {

display: block;

Line 111:

Line 113:

.verse-block {

display: block;

margin: ~~3px~~ 0 0;

margin: 6px 0 0; /* REDUCED from 10px */

text-align: left;

}

Line 155:

Line 157:

}

/* ── Prateeka ~~──────────────────────────────────────────────────~~ */

/* ── Prateeka (inline bold lemma) ────────────────────────────── */

.gr-prateeka { font-weight: bold; font-style: normal; color: #333; }

/* ── Mulaprateeka ~~──────────────────────────────────────────────~~ */

/* ── Mulaprateeka (block-level centered bold) ────────────────── */

.gr-mulaprateeka-block {

display: block; font-weight: bold; font-style: normal;

Line 165:

Line 167:

}

/* ── Moola ~~─────────────────────────────────────────────────────~~ */

/* ── Moola (inline highlighted source text) ──────────────────── */

.gr-moola { font-weight: bold; font-style: italic; color: #c65; }

/* ── Teeka ────────────────────────────────────────────────────── */

/* NEW — teeka now has a subtle warm background (was unstyled) */

.teeka-block {

border-radius: 5px;

Line 187:

Line 190:

}

.teeka-body { font-family: inherit; margin: 0; }

.teeka-block .shloka-block { margin: 0 0 0.35em; text-align: left; padding: 0; }

.teeka-block .shloka-block {

margin: 0 0 0.35em;

text-align: left;

padding: 0;

}

.teeka-block .shloka-line {

display: block; font-style: italic; color: #be100e;

line-height: 1.4; font-size: 0.97em; margin: 0;

}

/* Vyakhya sub-headings rendered as h4 (wikitext === not parsed inside divs) */

.gr-vyakhya-head, .gr-section-head {

font-size: 0.~~9em~~; font-weight: 700;

font-size: 0.88em; font-weight: 700;

color: #6a3e00; margin: 0.~~35em~~ 0 0.~~15em~~;

color: #6a3e00; margin: 0.4em 0 0.2em;

font-family: inherit; border: none~~; padding: 0~~;

font-family: inherit;

border: none;

}

Line 234:

Line 243:

}

.verse-action-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.05); }

.icon {

display: inline-block; width: 18px; height: 18px;

Line 242:

Line 252:

.icon-copy { background-image: url('/images/copy.svg'); }

.icon-commentary { background-image: url('/images/commentary.svg'); }

.copy-tooltip {

position: absolute; bottom: calc(100% + 8px); left: 50%;

Line 263:

Line 274:

padding: 0.3em 0 !important; line-height: 1.65;

}

.mw-collapsible, .mw-collapsible-content, blockquote, .quotebox {

background-color: transparent !important; border: none !important;

font-style: normal !important; padding: 0 !important; margin-left: 0 !important;

}

.cargo-store-only { display: none !important; }

Line 294:

Line 307:

/* ── Vector 2022 sidebar TOC ──────────────────────────────────── */

.vector-toc { font-size: 0.95em !important; line-height: 1.6 !important; }

/* Only override colours, sizes, and chevron styling.

* Never override display/flex/layout — Vector 2022 manages its own

* TOC layout and overriding it breaks multi-script rendering. */

.vector-toc {

font-size: 0.95em !important;

line-height: 1.6 !important;

}

/* "Contents" heading */

.vector-toc .vector-toc-title {

font-size: 0.72em !important; font-weight: 700 !important;

font-size: 0.72em !important;

text-transform: uppercase; letter-spacing: 0.08em;

font-weight: 700 !important;

color: #b07040 !important; font-family: system-ui, sans-serif !important;

text-transform: uppercase;

letter-spacing: 0.08em;

color: #b07040 !important;

font-family: system-ui, sans-serif !important;

margin-bottom: 2px !important;

}

/* Chevron toggle button — colour and size only, no layout override */

.vector-toc .cdx-button.vector-toc-toggle {

background: none !important; border: none !important;

background: none !important;

box-shadow: none !important; color: #9a6030 !important;

border: none !important;

opacity: 1 !important; transition: color 0.15s !important;

box-shadow: none !important;

color: #9a6030 !important;

opacity: 1 !important;

transition: color 0.15s !important;

}

.vector-toc .cdx-button.vector-toc-toggle:hover {

color: #f57c00 !important; background: none !important;

color: #f57c00 !important;

background: none !important;

}

.vector-toc .cdx-button.vector-toc-toggle svg {

fill: currentColor !important;

}

/* Hide section numbers in TOC — consistent across all scripts */

.vector-toc .vector-toc-numb {

display: none !important;

}

.~~vector-toc .cdx-button~~.~~vector-toc-toggle svg { fill: currentColor !important; }~~

~~.vector~~-~~toc~~ .~~vector-toc-numb { display: none !important; }~~

/* Allow long section names (Kannada, Tamil, etc.) to wrap rather than

* overflow or overlap. Vector sets nowrap by default which causes

* multi-script long titles to bleed out of the sidebar column. */

.vector-toc .vector-toc-text {

white-space: normal !important; word-break: break-word !important;

white-space: normal !important;

overflow-wrap: anywhere !important; line-height: 1.35 !important;

word-break: break-word !important;

overflow-wrap: anywhere !important;

line-height: 1.35 !important;

display: inline !important;

}

.vector-toc a,

.vector-toc .vector-toc-link { color: #5a3a00 !important; text-decoration: none !important; }

Line 321:

Line 366:

.vector-toc .vector-toc-link:hover { color: #f57c00 !important; }

/* ── TOC ~~active item highlight ──────────────────────────────────~~ */

/* ── TOC ACTIVE ITEM — fixed for Vector 2022 + Common.js span wrapping ─

*

* Common.js wraps every text node (including TOC link text) inside a

* <span data-deva="…"> for transliteration. This means the direct >a

* child selector fails — we need descendant selectors that reach into

* the link regardless of span nesting.

*

* We also target BOTH the <a> element AND any [data-deva] span inside

* it to ensure the colour propagates regardless of how deep the span is.

* ──────────────────────────────────────────────────────────────────── */

.vector-toc .vector-toc-list-item-active .vector-toc-link,

.vector-toc .vector-toc-list-item-active .vector-toc-link *,

Line 328:

Line 382:

.vector-toc .vector-toc-level-1-active .vector-toc-link,

.vector-toc .vector-toc-level-1-active .vector-toc-link * {

color: #f57c00 !important; font-weight: 700 !important;

color: #f57c00 !important;

font-weight: 700 !important;

}

.vector-toc .vector-toc-level-1 > .vector-toc-link,

.vector-toc .vector-toc-level-1 > .vector-toc-link * {

Line 340:

Line 396:

color: #7a5010 !important; font-size: 0.95em !important;

}

/* Override for active: must come AFTER level rules */

.vector-toc .vector-toc-list-item-active .vector-toc-level-1 > .vector-toc-link,

.vector-toc .vector-toc-list-item-active .vector-toc-level-2 > .vector-toc-link,

Line 395:

Line 452:

.gm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

/* ── Main page sidebar~~/footer~~ hide ~~─────────────────────────────~~ */

/* ── Main page sidebar hide ───────────────────────────────────── */

body.page-Main_Page #mw-panel,

body.page-Main_Page .vector-sidebar-container { display: none !important; }

Line 446:

Line 503:

.mw-logo-wordmark { color: #ffffff !important; font-weight: 700; font-size: 18px; }

.mw-logo-icon { content: url('/favicon.ico'); width: 24px; height: 24px; }

/* Invert header icons to white — but NOT the user-links area icons

* (user menu chevron, login button) which need to remain visible) */

.vector-header .vector-icon:not(.vector-user-links .vector-icon):not(#vector-user-links-dropdown .vector-icon) {

filter: invert(1); opacity: 0.9;

filter: invert(1);

opacity: 0.9;

}

/* Keep user-links icons visible at full opacity */

.vector-user-links .vector-icon,

#vector-user-links-dropdown .vector-icon,

.vector-user-menu-container .vector-icon { filter: none !important; opacity: 1 !important; }

.vector-user-menu-container .vector-icon {

filter: none !important;

opacity: 1 !important;

}

.cdx-search-input .vector-icon, .cdx-search-input svg, .cdx-search-input path,

.cdx-search-input__end-button .vector-icon, .cdx-search-input__end-button svg,

Line 458:

Line 522:

.vector-user-links a { color: rgba(255,255,255,0.9) !important; }

/* ── ~~Header~~: ~~hide~~ watchlist, appearance~~; fix~~ dropdown text ~~─────~~ */

/* ── Hide: Watchlist, Appearance, fix user-menu dropdown text ──

*

* Vector 2022 header (right side, between username and chevron):

* .mw-portlet-vector-user-menu-overflow — overflow strip (watchlist ≡★)

* #vector-appearance / pinned/unpinned containers — appearance panel

*

* The user-menu dropdown text must be dark (not inherit the white

* header colour) because it renders on a white card background.

* ──────────────────────────────────────────────────────────────── */

/* 1. Watchlist icon — hide by specific item ID only.

* Do NOT hide .mw-portlet-vector-user-menu-overflow by class — on some

* Vector versions that portlet contains the profile/logout links too. */

li#pt-watchlist,

li#pt-watchlist-kbd { display: none !important; }

/* 2. Appearance panel — every container Vector 2022 might use */

#vector-appearance,

#vector-appearance-pinned-container,

Line 468:

Line 545:

#p-appearance,

.vector-appearance-pinnable-element,

/* The toggle BUTTON that opens the appearance panel (page-tools area) */

.vector-page-tools [aria-controls="vector-appearance"],

/* Appearance inside the right-side sticky header overflow */

.vector-sticky-header [aria-controls="vector-appearance"] { display: none !important; }

/* 3. User-menu dropdown card — force dark text on white background */

/* The chevron (▾) opens .vector-user-menu which has a white card;

* the inherited header color: white must be overridden here. */

.vector-user-menu .mw-list-item a,

.vector-user-menu .vector-menu-content-list a,

#p-personal .vector-menu-content a,

.mw-portlet-personal .vector-menu-content a,

#vector-user-menu-overflow .vector-menu-content a { color: #202122 !important; }

.vector-user-menu .mw-list-item a:hover,

.vector-user-menu .vector-menu-content-list a:hover { color: #f57c00 !important; }

/* ── User dropdown — fix white text inside the menu ───────────── */

/* The dropdown card itself has a white/light background so links

must be dark, not the header-inherited white. */

.vector-user-menu .vector-menu-content,

.vector-user-menu .vector-menu-content a,

.vector-user-menu .vector-menu-content .mw-list-item a,

#p-~~personal .vector~~-~~menu-content~~ a,

#pt-userpage, #pt-userpage a,

.mw-portlet-personal .vector-menu-content a,

~~#pt-userpage, #pt-userpage a,~~

/* OOUI dropdown items */

~~#vector-user-menu-overflow .vector-menu-content a,~~

.oo-ui-menuSelectWidget a,

.oo-ui-menuSelectWidget a, .oo-ui-menuOptionWidget,

.oo-ui-menuOptionWidget,

/* Codex menu */

.cdx-menu__listbox .cdx-menu-item__content,

.cdx-menu__listbox a { color: #202122 !important; }

.cdx-menu__listbox a {

~~.vector-user-menu .mw-list-item a:hover,~~

color: #202122 !important;

.vector-user-menu .vector-menu-content~~-list~~ a:hover,

}

.mw-portlet-personal .vector-menu-content a:hover { color: #f57c00 !important; background: #fdf3ed !important; }

.vector-user-menu .vector-menu-content a:hover,

.mw-portlet-personal .vector-menu-content a:hover {

color: #f57c00 !important;

background: #fdf3ed !important;

}

~~/* ── Search box ───────────────────────────────────────────────── */~~

#p-search { margin-left: 8px; }

.vector-search-box, .vector-search-box-expanded, .vector-search-box-auto-expand-width {

Line 510:

Line 606:

.cdx-menu-item__icon path { fill: #202124 !important; filter: none !important; }

/* ── Gadya ~~──────────────────────────────────────────────────────~~ */

/* ── Gadya — styled as a sub-subheading (NOT adhyaya-title level) ─

*

* Previously gadya used adhyaya-title styles which was too prominent.

* Now it renders as a modest bold sub-heading, similar to h3 but

* without the dotted border, clearly below chapter level.

* ──────────────────────────────────────────────────────────────── */

.gr-gadya,

.verse-line.gr-gadya,

.gr-verse-text.gr-gadya {

display: block !important; font-size: 0.96em !important;

display: block !important;

font-weight: 600 !important; font-style: normal !important;

font-size: 0.96em !important;

color: #555 !important; margin: 16px 0 4px !important;

font-weight: 600 !important;

border-bottom: 1px solid #ddd !important; width: 60%;

font-style: normal !important;

line-height: 1.5 !important; letter-spacing: 0.01em;

color: #555 !important; /* muted — not as loud as orange heading */

margin: 16px 0 4px !important;

border-bottom: 1px solid #ddd !important;

width: 60%;

line-height: 1.5 !important;

letter-spacing: 0.01em;

}

Line 524:

Line 630:

.gr-avataranika {

font-style: italic; color: #444;

margin: 0~~.2em~~ 0 0.5em 0.5em; padding-left: 0.6em;

margin: 0 0 0.5em 0.5em; padding-left: 0.6em;

border-left: 2px solid #c9a96e; line-height: 1.6;

}

Line 539:

Line 645:

.gr-vyakhya-gadya {

font-weight: bold; font-size: 0.95em; text-align: center;

color: #8b1a1a; margin: 0.~~2em~~ 0~~; line-height: 1~~.6; letter-spacing: 0.03em;

color: #8b1a1a; margin: 0.8em 0 0.3em 0; letter-spacing: 0.03em;

}

Line 552:

Line 658:

.gr-leading-bhashya { font-style: italic; color: #555; margin: 0.4em 0 0.5em 0; }

/* ── Verse text ~~─────────────────────────────────────────────────~~ */

/* ── Verse text (general) ─────────────────────────────────────── */

.gr-verse-text, .verse-line, .verse-text {

color: #b5451b; font-style: italic; line-height: 1.5;

color: #b5451b; font-style: italic; line-height: 1.5; /* REDUCED */

display: block; margin: 0.1em 0;

}

Line 591:

Line 697:

}

/* ── Vyakhya prose paragraphs ~~───────────────────────────────────~~ */

.gr-vyakhya-para { margin: 0 0 0.5em 0; line-height: 1.65; color: #444; }

/* ── Global spacing tightening ────────────────────────────────── */

.mw-parser-output p { margin-bottom: 0.35rem !important; }

.mw-parser-output .verse-block,

.mw-parser-output .shloka-block { margin-top: 2px !important; margin-bottom: 2px !important; }

/* ── Vyakhya sub-headings (h4 replaces === which breaks inside divs) */

.gr-vyakhya-head, .gr-section-head {

font-size: 0.9em;

font-weight: 700;

color: #6a3e00;

margin: 0.35em 0 0.15em;

font-family: inherit;

border: none;

padding: 0;

}

/* ── Vyakhya page layout ──────────────────────────────────────── */

.gr-vyakhya-gadya { margin: 0.2em 0; line-height: 1.6; }

.gr-avataranika { margin: 0.2em 0; line-height: 1.6; color: #555; }

.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }

/* ── Individual vyakhya prose paragraphs ─────────────────────── */

.gr-vyakhya-para {

margin: 0 0 0.5em 0;

line-height: 1.65;

color: #444;

}

.gr-vyakhya-para:last-child { margin-bottom: 0; }

~~.gr~~-~~embedded~~-~~bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }~~

/* Shloka-lines inside teeka-block (quoted verses within commentary) */

.teeka-body .shloka-block {

margin: 0.4em 0; padding: 0.3em 0.6em;

margin: 0.4em 0;

border-left: 3px solid #e8c88a; background: transparent;

padding: 0.3em 0.6em;

border-left: 3px solid #e8c88a;

background: transparent;

}

.teeka-body .shloka-line {

color: #8a4a00;

font-style: italic;

font-size: 0.97em;

}

~~.teeka-body .shloka-line { color: #8a4a00; font-style: italic; font-size: 0.97em; }~~

/* ~~── Inline bhashya paragraphs ────────────────────────────────── */~~

/* ══════════════════════════════════════════════════════════════════

~~.gr-inlinepara-run { margin: 0.5rem 0; line-height: 1.75; position: relative; }~~

TEEKA VIEW MODES

~~.gr-bhashya-anchor { cursor: pointer; border-bottom: 1px dotted #bbb; transition: background 0.1s; }~~

Applied to <body> by Common.js based on referrer / ?ref= param.

.~~gr-bhashya-anchor:hover { background: rgba(245,124,0,0~~.~~07); border-bottom-color: #f57c00; }~~

~~/* ── Teeka view modes ─────────────────────────────────────────── */~~

gr-standalone — direct URL access: plain reading view

~~body.~~gr-standalone ~~.gr-page-nav { display~~: ~~block; }~~

gr-ref-mode — navigated from main doc: styled embedded view

~~body.gr-standalone .teeka-block { background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }~~

══════════════════════════════════════════════════════════════════ */

~~body.gr-standalone .teeka-title { display: none !important; }~~

~~body.gr-standalone .gr-teeka-entry { border-bottom: 1px solid #f0e8d8; padding-bottom: 0.8em; margin-bottom: 0.8em; }~~

~~body.gr-standalone .gr-teeka-entry:last-of-type { border-bottom: none; }~~

~~body.gr-standalone .teeka-body .shloka-block { border-left: none; padding-left: 0; background: none; }~~

~~body.gr-standalone .teeka-body .shloka-line { color: #be100e; font-style: italic; }~~

~~body.gr-standalone .gr-vyakhya-head { color: #a07040; font-size: 0.95em; margin-top: 0.8em; }~~

~~body.~~gr-ref-mode ~~.teeka-block { background~~: ~~#fffdf5 !important; border: 1px solid #f0e0b0 !important; padding: 6px 10px 8px !important; border-radius: 5px !important; }~~

~~body.gr-ref-mode .teeka-title { display: block !important; }~~

~~body.gr-ref-mode .gr-page-nav { display: none; }~~

~~.gr-teeka-page .teeka-block { background: #fffdf5; border: 1px solid #f0e0b0; }~~

/* ~~══════════════════════════════════════════════════════════════~~

/* ── Standalone mode: strip all container chrome ──────────────── */

~~SITEWIDE CHROME CLEANUP~~

/* The gr-page-nav back-link is useful in standalone, keep it */

~~══════════════════════════════════════════════════════════════~~ */

body.gr-standalone .gr-page-nav {

display: block;

}

/* Remove coloured box — show as plain flowing text */

body.gr-standalone .teeka-block {

background: none !important;

border: none !important;

padding: 0 !important;

border-radius: 0 !important;

}

body.gr-standalone .teeka-title {

display: none !important;

}

/* Each entry flows naturally, small separator between descriptors */

body.gr-standalone .gr-teeka-entry {

border-bottom: 1px solid #f0e8d8;

padding-bottom: 0.8em;

margin-bottom: 0.8em;

}

body.gr-standalone .gr-teeka-entry:last-of-type {

border-bottom: none;

}

/* Shlokas in standalone get the normal verse color, no extra indent */

body.gr-standalone .teeka-body .shloka-block {

border-left: none;

padding-left: 0;

background: none;

}

body.gr-standalone .teeka-body .shloka-line {

color: #be100e;

font-style: italic;

}

/* Vyakhya headings still show, but lighter */

body.gr-standalone .gr-vyakhya-head {

color: #a07040;

font-size: 0.95em;

margin-top: 0.8em;

}

/* ~~Hide category links box~~ */

/* ── Ref mode: full styled embedded view (default teeka-block look) ── */

#~~catlinks,~~ .~~catlinks,~~

/* This is already the default from .teeka-block rules above.

.mw-~~normal~~-~~catlinks,~~ .mw-~~hidden~~-~~catlinks~~ { display: none ~~!important~~; }

Explicit declarations here for clarity and override safety. */

body.gr-ref-mode .teeka-block {

background: #fffdf5 !important;

border: 1px solid #f0e0b0 !important;

padding: 6px 10px 8px !important;

border-radius: 5px !important;

}

body.gr-ref-mode .teeka-title {

display: block !important;

}

/* The page-nav back-link is redundant when embedded in main doc */

body.gr-ref-mode .gr-page-nav {

display: none;

}

/* ~~Hide MediaWiki footer~~ */

/* ── Default (no body class yet — JS may not have run) ────────── */

~~#footer, .mw-footer, footer.mw-footer { display: none !important; }~~

/* Show styled until JS classifies */

.gr-teeka-page .teeka-block {

/* ~~Hide Page/Discussion/View history/View source/Tools tab bar~~ */

background: #fffdf5;

~~#p-views, #p-cactions,~~

border: 1px solid #f0e0b0;

.~~vector-page~~-~~toolbar, .vector~~-page~~-toolbar-container,~~

~~#vector-page-toolbar,~~ .mw-~~portlet-views,~~

~~.vector-tab-noaction, #left-navigation, #right-navigation,~~

~~.page-actions, .vector-page-titlebar-toc { display: none !important; }~~

~~#mw-content-text { margin-top: 0 !important; }~~

~~/* ── Quick-select comment chips ────────────────────────────────── */~~

~~.gra-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }~~

~~.gra-chip~~ {

background: #~~f1f3f4~~; border: ~~1.5px~~ solid #~~e0e0e0; border-radius: 999px;~~

~~color: #444; font-size: 12px; font-family: inherit;~~

~~padding: 4px 12px; cursor: pointer;~~

~~transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap~~;

}

~~.gra-chip:hover { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }~~

~~.gra-chip.gra-chip-active { background: #1a73e8; border-color: #1a73e8; color: #fff; }~~

@@ Line 1: / Line 1: @@
 /* ═══════════════════════════════════════════════════════════════════
     MediaWiki:Common.css  —  grantha.io  (v6 additions)
+   Paste this entire block INTO your existing Common.css, replacing
+   or appending as appropriate. Sections marked NEW are net additions.
     ═══════════════════════════════════════════════════════════════════ */
@@ Line 84: / Line 86: @@
 .adhyaya-block .mw-editsection { display: none !important; }
-.mw-parser-output p { margin: 0 0 0.35rem; }
+.mw-parser-output p { margin: 0 0 0.6rem; }       /* REDUCED */
 .mw-parser-output p:empty,
 .mw-parser-output > div > p:empty,
@@ Line 94: / Line 96: @@
 }
-/* ── Verse blocks ────────────────────────────────────────────── */
+/* ── Verse blocks — tightened spacing ────────────────────────── */
 .shloka-block {
    display: block;
@@ Line 111: / Line 113: @@
 .verse-block {
    display: block;
-   margin: 3px 0 0;
+   margin: 6px 0 0;            /* REDUCED from 10px */
    text-align: left;
 }
@@ Line 155: / Line 157: @@
 }
-/* ── Prateeka ────────────────────────────────────────────────── */
+/* ── Prateeka (inline bold lemma) ────────────────────────────── */
 .gr-prateeka { font-weight: bold; font-style: normal; color: #333; }
-/* ── Mulaprateeka ────────────────────────────────────────────── */
+/* ── Mulaprateeka (block-level centered bold) ────────────────── */
 .gr-mulaprateeka-block {
    display: block; font-weight: bold; font-style: normal;
@@ Line 165: / Line 167: @@
 }
-/* ── Moola ───────────────────────────────────────────────────── */
+/* ── Moola (inline highlighted source text) ──────────────────── */
 .gr-moola { font-weight: bold; font-style: italic; color: #c65; }
 /* ── Teeka ────────────────────────────────────────────────────── */
+/* NEW — teeka now has a subtle warm background (was unstyled) */
 .teeka-block {
    border-radius: 5px;
@@ Line 187: / Line 190: @@
 }
 .teeka-body { font-family: inherit; margin: 0; }
-.teeka-block .shloka-block { margin: 0 0 0.35em; text-align: left; padding: 0; }
+.teeka-block .shloka-block {
+  margin: 0 0 0.35em;
+  text-align: left;
+  padding: 0;
+}
 .teeka-block .shloka-line {
    display: block; font-style: italic; color: #be100e;
    line-height: 1.4; font-size: 0.97em; margin: 0;
 }
+/* Vyakhya sub-headings rendered as h4 (wikitext === not parsed inside divs) */
 .gr-vyakhya-head, .gr-section-head {
-   font-size: 0.9em; font-weight: 700;
+   font-size: 0.88em; font-weight: 700;
-   color: #6a3e00; margin: 0.35em 0 0.15em;
+   color: #6a3e00; margin: 0.4em 0 0.2em;
-   font-family: inherit; border: none; padding: 0;
+   font-family: inherit;
+  border: none;
 }
@@ Line 234: / Line 243: @@
 }
 .verse-action-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.05); }
 .icon {
    display: inline-block; width: 18px; height: 18px;
@@ Line 242: / Line 252: @@
 .icon-copy       { background-image: url('/images/copy.svg'); }
 .icon-commentary { background-image: url('/images/commentary.svg'); }
 .copy-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
@@ Line 263: / Line 274: @@
    padding: 0.3em 0 !important; line-height: 1.65;
 }
 .mw-collapsible, .mw-collapsible-content, blockquote, .quotebox {
    background-color: transparent !important; border: none !important;
    font-style: normal !important; padding: 0 !important; margin-left: 0 !important;
 }
 .cargo-store-only { display: none !important; }
@@ Line 294: / Line 307: @@
 /* ── Vector 2022 sidebar TOC ──────────────────────────────────── */
-.vector-toc { font-size: 0.95em !important; line-height: 1.6 !important; }
+/* Only override colours, sizes, and chevron styling.
+ * Never override display/flex/layout — Vector 2022 manages its own
+ * TOC layout and overriding it breaks multi-script rendering. */
+.vector-toc {
+  font-size: 0.95em !important;
+  line-height: 1.6 !important;
+}
+/* "Contents" heading */
 .vector-toc .vector-toc-title {
-   font-size: 0.72em !important; font-weight: 700 !important;
+   font-size: 0.72em !important;
-   text-transform: uppercase; letter-spacing: 0.08em;
+  font-weight: 700 !important;
-   color: #b07040 !important; font-family: system-ui, sans-serif !important;
+   text-transform: uppercase;
+  letter-spacing: 0.08em;
+   color: #b07040 !important;
+  font-family: system-ui, sans-serif !important;
    margin-bottom: 2px !important;
 }
+/* Chevron toggle button — colour and size only, no layout override */
 .vector-toc .cdx-button.vector-toc-toggle {
-   background: none !important; border: none !important;
+   background: none !important;
-   box-shadow: none !important; color: #9a6030 !important;
+  border: none !important;
-   opacity: 1 !important; transition: color 0.15s !important;
+   box-shadow: none !important;
+  color: #9a6030 !important;
+   opacity: 1 !important;
+  transition: color 0.15s !important;
 }
 .vector-toc .cdx-button.vector-toc-toggle:hover {
-   color: #f57c00 !important; background: none !important;
+   color: #f57c00 !important;
+  background: none !important;
+}
+.vector-toc .cdx-button.vector-toc-toggle svg {
+  fill: currentColor !important;
+}
+/* Hide section numbers in TOC — consistent across all scripts */
+.vector-toc .vector-toc-numb {
+  display: none !important;
 }
-.vector-toc .cdx-button.vector-toc-toggle svg { fill: currentColor !important; }
-.vector-toc .vector-toc-numb { display: none !important; }
+/* Allow long section names (Kannada, Tamil, etc.) to wrap rather than
+ * overflow or overlap. Vector sets nowrap by default which causes
+ * multi-script long titles to bleed out of the sidebar column. */
 .vector-toc .vector-toc-text {
-   white-space: normal !important; word-break: break-word !important;
+   white-space: normal !important;
-   overflow-wrap: anywhere !important; line-height: 1.35 !important;
+  word-break: break-word !important;
+   overflow-wrap: anywhere !important;
+  line-height: 1.35 !important;
    display: inline !important;
 }
 .vector-toc a,
 .vector-toc .vector-toc-link { color: #5a3a00 !important; text-decoration: none !important; }
@@ Line 321: / Line 366: @@
 .vector-toc .vector-toc-link:hover { color: #f57c00 !important; }
-/* ── TOC active item highlight ────────────────────────────────── */
+/* ── TOC ACTIVE ITEM — fixed for Vector 2022 + Common.js span wrapping ─
+ *
+ * Common.js wraps every text node (including TOC link text) inside a
+ * <span data-deva="…"> for transliteration. This means the direct >a
+ * child selector fails — we need descendant selectors that reach into
+ * the link regardless of span nesting.
+ *
+ * We also target BOTH the <a> element AND any [data-deva] span inside
+ * it to ensure the colour propagates regardless of how deep the span is.
+ * ──────────────────────────────────────────────────────────────────── */
 .vector-toc .vector-toc-list-item-active .vector-toc-link,
 .vector-toc .vector-toc-list-item-active .vector-toc-link *,
@@ Line 328: / Line 382: @@
 .vector-toc .vector-toc-level-1-active .vector-toc-link,
 .vector-toc .vector-toc-level-1-active .vector-toc-link * {
-   color: #f57c00 !important; font-weight: 700 !important;
+   color: #f57c00 !important;
+  font-weight: 700 !important;
 }
 .vector-toc .vector-toc-level-1 > .vector-toc-link,
 .vector-toc .vector-toc-level-1 > .vector-toc-link * {
@@ Line 340: / Line 396: @@
    color: #7a5010 !important; font-size: 0.95em !important;
 }
+/* Override for active: must come AFTER level rules */
 .vector-toc .vector-toc-list-item-active .vector-toc-level-1 > .vector-toc-link,
 .vector-toc .vector-toc-list-item-active .vector-toc-level-2 > .vector-toc-link,
@@ Line 395: / Line 452: @@
 .gm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
-/* ── Main page sidebar/footer hide ───────────────────────────── */
+/* ── Main page sidebar hide ───────────────────────────────────── */
 body.page-Main_Page #mw-panel,
 body.page-Main_Page .vector-sidebar-container { display: none !important; }
@@ Line 446: / Line 503: @@
 .mw-logo-wordmark { color: #ffffff !important; font-weight: 700; font-size: 18px; }
 .mw-logo-icon { content: url('/favicon.ico'); width: 24px; height: 24px; }
+/* Invert header icons to white — but NOT the user-links area icons
+ * (user menu chevron, login button) which need to remain visible) */
 .vector-header .vector-icon:not(.vector-user-links .vector-icon):not(#vector-user-links-dropdown .vector-icon) {
-   filter: invert(1); opacity: 0.9;
+   filter: invert(1);
+  opacity: 0.9;
 }
+/* Keep user-links icons visible at full opacity */
 .vector-user-links .vector-icon,
 #vector-user-links-dropdown .vector-icon,
-.vector-user-menu-container .vector-icon { filter: none !important; opacity: 1 !important; }
+.vector-user-menu-container .vector-icon {
+  filter: none !important;
+  opacity: 1 !important;
+}
 .cdx-search-input .vector-icon, .cdx-search-input svg, .cdx-search-input path,
 .cdx-search-input__end-button .vector-icon, .cdx-search-input__end-button svg,
@@ Line 458: / Line 522: @@
 .vector-user-links a { color: rgba(255,255,255,0.9) !important; }
-/* ── Header: hide watchlist, appearance; fix dropdown text ───── */
+/* ── Hide: Watchlist, Appearance, fix user-menu dropdown text ──
+ *
+ * Vector 2022 header (right side, between username and chevron):
+ *   .mw-portlet-vector-user-menu-overflow  — overflow strip (watchlist ≡★)
+ *   #vector-appearance / pinned/unpinned containers — appearance panel
+ *
+ * The user-menu dropdown text must be dark (not inherit the white
+ * header colour) because it renders on a white card background.
+ * ──────────────────────────────────────────────────────────────── */
+/* 1. Watchlist icon — hide by specific item ID only.
+ * Do NOT hide .mw-portlet-vector-user-menu-overflow by class — on some
+ * Vector versions that portlet contains the profile/logout links too. */
 li#pt-watchlist,
 li#pt-watchlist-kbd { display: none !important; }
+/* 2. Appearance panel — every container Vector 2022 might use */
 #vector-appearance,
 #vector-appearance-pinned-container,
@@ Line 468: / Line 545: @@
 #p-appearance,
 .vector-appearance-pinnable-element,
+/* The toggle BUTTON that opens the appearance panel (page-tools area) */
 .vector-page-tools [aria-controls="vector-appearance"],
+/* Appearance inside the right-side sticky header overflow */
 .vector-sticky-header [aria-controls="vector-appearance"] { display: none !important; }
+/* 3. User-menu dropdown card — force dark text on white background */
+/* The chevron (▾) opens .vector-user-menu which has a white card;
+ * the inherited header color: white must be overridden here. */
 .vector-user-menu .mw-list-item a,
 .vector-user-menu .vector-menu-content-list a,
+#p-personal .vector-menu-content a,
+.mw-portlet-personal .vector-menu-content a,
+#vector-user-menu-overflow .vector-menu-content a { color: #202122 !important; }
+.vector-user-menu .mw-list-item a:hover,
+.vector-user-menu .vector-menu-content-list a:hover { color: #f57c00 !important; }
+/* ── User dropdown — fix white text inside the menu ───────────── */
+/* The dropdown card itself has a white/light background so links
+   must be dark, not the header-inherited white. */
+.vector-user-menu .vector-menu-content,
 .vector-user-menu .vector-menu-content a,
 .vector-user-menu .vector-menu-content .mw-list-item a,
-#p-personal .vector-menu-content a,
+#pt-userpage, #pt-userpage a,
 .mw-portlet-personal .vector-menu-content a,
-#pt-userpage, #pt-userpage a,
+/* OOUI dropdown items */
-#vector-user-menu-overflow .vector-menu-content a,
+.oo-ui-menuSelectWidget a,
-.oo-ui-menuSelectWidget a, .oo-ui-menuOptionWidget,
+.oo-ui-menuOptionWidget,
+/* Codex menu */
 .cdx-menu__listbox .cdx-menu-item__content,
-.cdx-menu__listbox a { color: #202122 !important; }
+.cdx-menu__listbox a {
-.vector-user-menu .mw-list-item a:hover,
+  color: #202122 !important;
-.vector-user-menu .vector-menu-content-list a:hover,
+}
-.mw-portlet-personal .vector-menu-content a:hover { color: #f57c00 !important; background: #fdf3ed !important; }
+.vector-user-menu .vector-menu-content a:hover,
+.mw-portlet-personal .vector-menu-content a:hover {
+  color: #f57c00 !important;
+  background: #fdf3ed !important;
+}
-/* ── Search box ───────────────────────────────────────────────── */
 #p-search { margin-left: 8px; }
 .vector-search-box, .vector-search-box-expanded, .vector-search-box-auto-expand-width {
@@ Line 510: / Line 606: @@
 .cdx-menu-item__icon path { fill: #202124 !important; filter: none !important; }
-/* ── Gadya ────────────────────────────────────────────────────── */
+/* ── Gadya — styled as a sub-subheading (NOT adhyaya-title level) ─
+ *
+ * Previously gadya used adhyaya-title styles which was too prominent.
+ * Now it renders as a modest bold sub-heading, similar to h3 but
+ * without the dotted border, clearly below chapter level.
+ * ──────────────────────────────────────────────────────────────── */
 .gr-gadya,
 .verse-line.gr-gadya,
 .gr-verse-text.gr-gadya {
-   display: block !important; font-size: 0.96em !important;
+   display: block !important;
-   font-weight: 600 !important; font-style: normal !important;
+  font-size: 0.96em !important;
-   color: #555 !important; margin: 16px 0 4px !important;
+   font-weight: 600 !important;
-   border-bottom: 1px solid #ddd !important; width: 60%;
+  font-style: normal !important;
-   line-height: 1.5 !important; letter-spacing: 0.01em;
+   color: #555 !important;        /* muted — not as loud as orange heading */
+  margin: 16px 0 4px !important;
+   border-bottom: 1px solid #ddd !important;
+  width: 60%;
+   line-height: 1.5 !important;
+  letter-spacing: 0.01em;
 }
@@ Line 524: / Line 630: @@
 .gr-avataranika {
    font-style: italic; color: #444;
-   margin: 0.2em 0 0.5em 0.5em; padding-left: 0.6em;
+   margin: 0 0 0.5em 0.5em; padding-left: 0.6em;
    border-left: 2px solid #c9a96e; line-height: 1.6;
 }
@@ Line 539: / Line 645: @@
 .gr-vyakhya-gadya {
    font-weight: bold; font-size: 0.95em; text-align: center;
-   color: #8b1a1a; margin: 0.2em 0; line-height: 1.6; letter-spacing: 0.03em;
+   color: #8b1a1a; margin: 0.8em 0 0.3em 0; letter-spacing: 0.03em;
 }
@@ Line 552: / Line 658: @@
 .gr-leading-bhashya { font-style: italic; color: #555; margin: 0.4em 0 0.5em 0; }
-/* ── Verse text ───────────────────────────────────────────────── */
+/* ── Verse text (general) ─────────────────────────────────────── */
 .gr-verse-text, .verse-line, .verse-text {
-   color: #b5451b; font-style: italic; line-height: 1.5;
+   color: #b5451b; font-style: italic; line-height: 1.5;  /* REDUCED */
    display: block; margin: 0.1em 0;
 }
@@ Line 591: / Line 697: @@
 }
-/* ── Vyakhya prose paragraphs ─────────────────────────────────── */
-.gr-vyakhya-para { margin: 0 0 0.5em 0; line-height: 1.65; color: #444; }
+/* ── Global spacing tightening ────────────────────────────────── */
+.mw-parser-output p { margin-bottom: 0.35rem !important; }
+.mw-parser-output .verse-block,
+.mw-parser-output .shloka-block { margin-top: 2px !important; margin-bottom: 2px !important; }
+/* ── Vyakhya sub-headings (h4 replaces === which breaks inside divs) */
+.gr-vyakhya-head, .gr-section-head {
+  font-size: 0.9em;
+  font-weight: 700;
+  color: #6a3e00;
+  margin: 0.35em 0 0.15em;
+  font-family: inherit;
+  border: none;
+  padding: 0;
+}
+/* ── Vyakhya page layout ──────────────────────────────────────── */
+.gr-vyakhya-gadya { margin: 0.2em 0; line-height: 1.6; }
+.gr-avataranika   { margin: 0.2em 0; line-height: 1.6; color: #555; }
+.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }
+/* ── Individual vyakhya prose paragraphs ─────────────────────── */
+.gr-vyakhya-para {
+  margin: 0 0 0.5em 0;
+  line-height: 1.65;
+  color: #444;
+}
 .gr-vyakhya-para:last-child { margin-bottom: 0; }
-.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }
+/* Shloka-lines inside teeka-block (quoted verses within commentary) */
 .teeka-body .shloka-block {
-   margin: 0.4em 0; padding: 0.3em 0.6em;
+   margin: 0.4em 0;
-   border-left: 3px solid #e8c88a; background: transparent;
+  padding: 0.3em 0.6em;
+   border-left: 3px solid #e8c88a;
+  background: transparent;
+}
+.teeka-body .shloka-line {
+  color: #8a4a00;
+  font-style: italic;
+  font-size: 0.97em;
 }
-.teeka-body .shloka-line { color: #8a4a00; font-style: italic; font-size: 0.97em; }
-/* ── Inline bhashya paragraphs ────────────────────────────────── */
+/* ══════════════════════════════════════════════════════════════════
-.gr-inlinepara-run { margin: 0.5rem 0; line-height: 1.75; position: relative; }
+   TEEKA VIEW MODES
-.gr-bhashya-anchor { cursor: pointer; border-bottom: 1px dotted #bbb; transition: background 0.1s; }
+   Applied to <body> by Common.js based on referrer / ?ref= param.
-.gr-bhashya-anchor:hover { background: rgba(245,124,0,0.07); border-bottom-color: #f57c00; }
-/* ── Teeka view modes ─────────────────────────────────────────── */
+   gr-standalone  — direct URL access: plain reading view
-body.gr-standalone .gr-page-nav { display: block; }
+   gr-ref-mode    — navigated from main doc: styled embedded view
-body.gr-standalone .teeka-block { background: none !important; border: none !important; padding: 0 !important; border-radius: 0 !important; }
+   ══════════════════════════════════════════════════════════════════ */
-body.gr-standalone .teeka-title { display: none !important; }
-body.gr-standalone .gr-teeka-entry { border-bottom: 1px solid #f0e8d8; padding-bottom: 0.8em; margin-bottom: 0.8em; }
-body.gr-standalone .gr-teeka-entry:last-of-type { border-bottom: none; }
-body.gr-standalone .teeka-body .shloka-block { border-left: none; padding-left: 0; background: none; }
-body.gr-standalone .teeka-body .shloka-line { color: #be100e; font-style: italic; }
-body.gr-standalone .gr-vyakhya-head { color: #a07040; font-size: 0.95em; margin-top: 0.8em; }
-body.gr-ref-mode .teeka-block { background: #fffdf5 !important; border: 1px solid #f0e0b0 !important; padding: 6px 10px 8px !important; border-radius: 5px !important; }
-body.gr-ref-mode .teeka-title { display: block !important; }
-body.gr-ref-mode .gr-page-nav { display: none; }
-.gr-teeka-page .teeka-block { background: #fffdf5; border: 1px solid #f0e0b0; }
-/* ══════════════════════════════════════════════════════════════
+/* ── Standalone mode: strip all container chrome ──────────────── */
-   SITEWIDE CHROME CLEANUP
+/* The gr-page-nav back-link is useful in standalone, keep it */
-   ══════════════════════════════════════════════════════════════ */
+body.gr-standalone .gr-page-nav {
+  display: block;
+}
+/* Remove coloured box — show as plain flowing text */
+body.gr-standalone .teeka-block {
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
+body.gr-standalone .teeka-title {
+  display: none !important;
+}
+/* Each entry flows naturally, small separator between descriptors */
+body.gr-standalone .gr-teeka-entry {
+  border-bottom: 1px solid #f0e8d8;
+  padding-bottom: 0.8em;
+  margin-bottom: 0.8em;
+}
+body.gr-standalone .gr-teeka-entry:last-of-type {
+  border-bottom: none;
+}
+/* Shlokas in standalone get the normal verse color, no extra indent */
+body.gr-standalone .teeka-body .shloka-block {
+  border-left: none;
+  padding-left: 0;
+  background: none;
+}
+body.gr-standalone .teeka-body .shloka-line {
+  color: #be100e;
+  font-style: italic;
+}
+/* Vyakhya headings still show, but lighter */
+body.gr-standalone .gr-vyakhya-head {
+  color: #a07040;
+  font-size: 0.95em;
+  margin-top: 0.8em;
+}
-/* Hide category links box */
+/* ── Ref mode: full styled embedded view (default teeka-block look) ── */
-#catlinks, .catlinks,
+/* This is already the default from .teeka-block rules above.
-.mw-normal-catlinks, .mw-hidden-catlinks { display: none !important; }
+   Explicit declarations here for clarity and override safety. */
+body.gr-ref-mode .teeka-block {
+  background: #fffdf5 !important;
+  border: 1px solid #f0e0b0 !important;
+  padding: 6px 10px 8px !important;
+  border-radius: 5px !important;
+}
+body.gr-ref-mode .teeka-title {
+  display: block !important;
+}
+/* The page-nav back-link is redundant when embedded in main doc */
+body.gr-ref-mode .gr-page-nav {
+  display: none;
+}
-/* Hide MediaWiki footer */
+/* ── Default (no body class yet — JS may not have run) ────────── */
-#footer, .mw-footer, footer.mw-footer { display: none !important; }
+/* Show styled until JS classifies */
+.gr-teeka-page .teeka-block {
-/* Hide Page/Discussion/View history/View source/Tools tab bar */
+   background: #fffdf5;
-#p-views, #p-cactions,
+  border: 1px solid #f0e0b0;
-.vector-page-toolbar, .vector-page-toolbar-container,
-#vector-page-toolbar, .mw-portlet-views,
-.vector-tab-noaction, #left-navigation, #right-navigation,
-.page-actions, .vector-page-titlebar-toc { display: none !important; }
-#mw-content-text { margin-top: 0 !important; }
-/* ── Quick-select comment chips ────────────────────────────────── */
-.gra-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
-.gra-chip {
-   background: #f1f3f4; border: 1.5px solid #e0e0e0; border-radius: 999px;
-  color: #444; font-size: 12px; font-family: inherit;
-  padding: 4px 12px; cursor: pointer;
-  transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap;
 }
-.gra-chip:hover { background: #e8f0fe; border-color: #1a73e8; color: #1a73e8; }
-.gra-chip.gra-chip-active { background: #1a73e8; border-color: #1a73e8; color: #fff; }