MediaWiki:Common.css: Difference between revisions

(143 intermediate revisions by 2 users not shown)

Line 1:

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

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

MediaWiki:Common.css — Anandamakaranda

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

Clean rebuild — works on Vector (desktop) + Minerva (mobile)

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

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

/* ── ~~Fonts ──────────────────────────────────────────────────────~~ */

/* ── 1. CSS VARIABLES ──────────────────────────────────────────── */

:root {

--maroon: #be100e;

--orange: #e65100;

--light-orange: #f57c00;

--dark-gray: #555;

--light-gray: #eee;

--muted-gray: #888;

--text: #1a1a1a;

--brown: #a07040;

--light-brown: #e8d4a0;

/* Font stacks. --font-indic is the one to use for anything the reader

can transliterate. Every face in it is served from this site (§2a), so

a transliterated page looks the same on every machine instead of

falling back to whatever the visitor happens to have installed.

Order matters, not just membership: each face is limited by

unicode-range to the characters it should own, so the browser walks

the list and the first face that claims the character wins.

Gentium Book Plus → Latin only, i.e. the IAST reading

AdishilaDev → Devanagari, danda, and everything unclaimed

Noto Serif Tamil / Kannada / Telugu → their own blocks

Gentium sits first because IAST is Latin throughout: if Adishila led,

plain letters would come from Adishila and only the accented ones

(ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */

/* The HEADING face - AdishilaDev. Used only by headings and the few

title-like labels listed further down, never by body text. */

--font-deva: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;

/* The READING face. Adishila leads: this is what moola, bhashya, teeka

and every other run of body text is set in. AdishilaDev follows only

as a fallback, for the rare glyph the plain face lacks.

Gentium used to sit first here, so that IAST came out in one face -

but that also made it the first family asked for Devanagari, and any

locally-installed "Gentium Book Plus" answers for codepoints outside

the @font-face unicode-range, so the shlokas stopped being Adishila.

IAST now gets its Gentium from --font-translit, used only in that view.

Headings do NOT use this variable; they use --font-deva above. */

--font-indic: 'Adishila', 'AdishilaDev', 'Noto Serif Devanagari',

'Noto Serif Tamil', 'Noto Sans Tamil',

'Noto Serif Kannada', 'Noto Sans Kannada',

'Noto Serif Telugu', 'Noto Sans Telugu',

'Noto Serif Malayalam', 'Noto Sans Malayalam',

'Noto Serif Gujarati', 'Noto Sans Gujarati',

'Noto Serif Bengali', 'Noto Sans Bengali',

'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi',

'Noto Serif Oriya', 'Noto Sans Oriya', serif;

/* Latin-first, for the IAST reading only: there plain letters and

accented ones must come from one face or the line looks patched. */

--font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;

--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;

}

/* ── 2. FONTS ──────────────────────────────────────────────────── */

/* font-display: swap on every face below. Without it the browser uses

`auto`, which in Chrome means a block period of up to three seconds

during which text in that font is INVISIBLE - the page has painted, the

layout is right, and the Sanskrit simply is not there yet. That reads as

a slow site even when the bytes arrive quickly. With swap the text is

painted immediately in the fallback and re-rendered when the face

arrives. */

@font-face {

font-family: "Adishila";

src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

font-family: "~~Adishila~~";

font-family: "AdishilaBold";

src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");

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

font-display: swap;

}

@font-face {

font-family: "AdishilaItalic";

src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");

font-weight: bold; font-style: italic;

font-display: swap;

}

@font-face {

font-family: "AdishilaDev";

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

font-family: "AdishilaDev";

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

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

font-display: swap;

}

@font-face {

font-family: "AdishilaDevGuru";

src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");

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

font-display: swap;

}

@font-face {

font-family: "Noto Sans Devanagari";

src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

font-family: "AdishilaVedic";

src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

/* ── 2a. TRANSLITERATION FONTS ─────────────────────────────────── */

/* One face per script the reader can switch to, served from this site so

the page reads the same everywhere. Subset to the script's own block and

compressed to woff2, so each file is 30–110 KB and only the file for the

script actually on screen is ever downloaded.

Every face reports the same 105% above the baseline / 40% below, whatever

its own metrics say. That is what keeps the lines on one rhythm: without

it each script sat at its own height inside the line box, so a heading

jumped a few pixels the moment it was switched.

.mw-~~parser~~-~~output~~,

How large each script *draws* is handled separately, in §2b, by scaling

.mw-~~parser~~-~~output~~ *,

the text rather than the font file. Doing it there means it still works

.mw-~~parser~~-~~output pre~~,

when a font file is missing or slow — the text is scaled whatever face

.mw-~~parser~~-~~output code~~,

ends up rendering it — and it leaves one number per script to tune

.mw-~~parser~~-~~output tt~~,

instead of three that have to be kept in proportion.

.mw-~~parser~~-~~output kbd~~ {

font-family: 'Adishila', ~~'Noto Serif~~ Devanagari', ~~serif~~ !important;

Install: put the nine .woff2 files in /resources/fonts/translit/ . */

/* Tamil — Noto Serif Tamil (SIL OFL) */

@font-face {

font-family: "Noto Serif Tamil";

src: url("/resources/fonts/translit/NotoSerifTamil-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0B80-0BFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Tamil";

src: url("/resources/fonts/translit/NotoSerifTamil-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0B80-0BFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* Kannada — Noto Serif Kannada (SIL OFL) */

@font-face {

font-family: "Noto Serif Kannada";

src: url("/resources/fonts/translit/NotoSerifKannada-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0C80-0CFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Kannada";

src: url("/resources/fonts/translit/NotoSerifKannada-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0C80-0CFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* Telugu — Noto Serif Telugu (SIL OFL) */

@font-face {

font-family: "Noto Serif Telugu";

src: url("/resources/fonts/translit/NotoSerifTelugu-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0C00-0C7F, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Telugu";

src: url("/resources/fonts/translit/NotoSerifTelugu-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0C00-0C7F, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* IAST — Gentium Book Plus (SIL OFL). Chosen over a general-purpose serif

because it draws ṛ ṝ ḷ ḹ ṅ ñ ṭ ḍ ṇ ś ṣ ṃ ḥ m̐ as designed letters rather

than stacking a loose accent on a Latin one, which is what made the

romanised reading look ragged. The range stops short of U+0964-0965 on

purpose: the danda then always comes from the Devanagari face, so it is

one shape in every script. */

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Italic.woff2") format("woff2");

font-weight: 400; font-style: italic; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* ── 2b. APPLYING THEM ─────────────────────────────────────────── */

/* Most rules below name an Adishila face directly, which is right for

Devanagari and useless for anything else: Adishila has no Tamil, Kannada

or Telugu letters, so a switched page fell through to the visitor's

default serif — a different font per machine, and often a different one

per line. common.js puts the chosen script on <html data-gr-script="…">,

so while a transliteration is showing, every span the switcher rewrote

moves onto --font-indic and picks up the faces above. Devanagari is the

no-attribute case and is left exactly as it was.

--gr-script-scale is how much smaller or larger that script has to be

drawn to read the same size as Devanagari. Kannada and Telugu draw taller

letters at the same font-size, Tamil wider and rounder, Gentium smaller;

left alone, switching script looked like the type size had changed.

THESE FOUR NUMBERS ARE THE KNOB: if a script still reads a shade large or

small next to Adishila on the live site, move its number a percent or two

and nothing else. It multiplies whatever size the reader has chosen with

A- / A+, so the two controls stay independent. */

:root { --gr-script-scale: 1; }

html[data-gr-script="ta"] { --gr-script-scale: 0.88; } /* தமிழ் */

html[data-gr-script="kn"] { --gr-script-scale: 0.86; } /* ಕನ್ನಡ */

html[data-gr-script="te"] { --gr-script-scale: 0.88; } /* తెలుగు */

html[data-gr-script="en"] { --gr-script-scale: 1.00; } /* IAST */

html[data-gr-script]:not([data-gr-script="deva"]) [data-deva],

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sticky-title,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-section-title,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-snippet,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-group-name {

font-family: var(--font-indic) !important;

font-size: calc(1em * var(--gr-script-scale));

}

html[data-gr-script="en"] [data-deva],

html[data-gr-script="en"] .gr-sticky-title,

html[data-gr-script="en"] .gr-sr-section-title,

html[data-gr-script="en"] .gr-sr-snippet,

html[data-gr-script="en"] .gr-sr-group-name { font-family: var(--font-translit) !important; }

/* The bold and italic Adishila faces are separate families rather than

weights, so a transliterated prateeka or quotation has to ask for the

weight it wants instead. */

html[data-gr-script]:not([data-gr-script="deva"]) .gr-prateeka { font-weight: 700; }

html[data-gr-script]:not([data-gr-script="deva"]) .gr-mulaprateeka-block { font-style: italic; }

body {

background-color: #fff;

}

/* ── Icon base ──────────────────────────────────────────────────── */

.gra-icon {

display: inline-block;

width: 20px;

height: 20px;

background-size: contain;

background-repeat: no-repeat;

background-position: center;

flex-shrink: 0;

}

/* comment.svg → Feedback (flag/report) */

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

/* notes.svg → Notes */

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

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

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

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

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

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

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

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

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

#mw-content-text {

font-family: 'Adishila';

}

.mw-parser-output {

font-size: 22px;

line-height: 1.6;

line-height: 1.7;

color: #555;

max-width: 100%;

Line 36:

Line 294:

}

// Danda marks wrap issue

.mw-parser-output { overflow-wrap: anywhere; }

/* ── 4. HIDE ELEMENTS (both skins) ────────────────────────────── */

/* Page title */

h1.firstHeading, #firstHeading, .mw-page-title-main { display: none !important; }

/* Footer */

#footer, .mw-footer, .vector-footer, .vector-footer-container,

footer, .minerva-footer { display: none !important; }

/* Categories */

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

/* Edit section links */

.mw-editsection, .mw-editsection-bracket { display: none !important; }

/* Site notice */

#siteNotice { display: none !important; }

/* Watchlist */

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

/* Appearance panel */

#vector-appearance, #vector-appearance-pinned-container,

#vector-appearance-unpinned-container, .mw-portlet-appearance,

#p-appearance, [aria-controls="vector-appearance"] { display: none !important; }

/* Vector hamburger + sidebar */

#mw-sidebar-button, .vector-main-menu, .vector-main-menu-container,

.vector-main-menu-landmark, #vector-main-menu-dropdown { display: none !important; }

/* Vector search box (we use our own) */

#p-search, .vector-search-box, .vector-search-box-vue,

.vector-search-box-collapses { display: none !important; }

/* Vector page toolbar */

.vector-page-toolbar, .vector-page-toolbar-container { display: none !important; }

/* Vector page tools */

.vector-page-tools { display: none !important; }

/* Empty paragraphs */

.mw-parser-output p:empty,

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

.mw-heading + p:empty,

.adhyaya-block + p:empty,

.verse-block + p:empty { display: none !important; margin: 0 !important; }

/* Empty divs */

.adhyaya-block:empty, .mw-parser-output div:empty { display: none !important; }

/* Cargo hidden */

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

.mw-~~parser~~-~~output h1~~,

/* ── 5. VECTOR HEADER (desktop only) ──────────────────────────── */

.mw-~~parser~~-~~output h2,~~

.vector-header-container {

.mw-~~parser~~-~~output h3,~~

background: #b5451b !important;

.mw-~~parser~~-~~output h4,~~

border-bottom: 1px solid rgba(255,255,255,0.12);

.mw-~~parser~~-~~output~~ .mw-~~heading h1,~~

}

.mw-~~parser~~-~~output .mw~~-~~heading h2,~~

.vector-header {

~~.mw~~-~~parser~~-~~output~~ .mw-~~heading h3~~ {

background: transparent !important;

font-family: ~~'Adishila'~~, ~~'Noto Serif Devanagari'~~, serif ~~!important~~;

max-width: 100% !important;

~~border~~: ~~none !important~~; ~~border~~-~~bottom~~: ~~none !important~~;

display: flex !important;

~~padding~~: 0 ~~!important~~; ~~background~~: ~~none !important~~;

align-items: center !important;

justify-content: space-between !important;

padding-left: 20px !important;

padding-right: 20px !important;

}

.vector-header-start {

flex: 0 0 auto !important;

display: flex !important;

align-items: center !important;

gap: 12px;

}

.vector-header-end {

flex: 0 0 auto !important;

display: flex !important;

align-items: center !important;

gap: 16px;

margin-left: auto;

}

.mw-logo { display: flex !important; align-items: center; opacity: 1 !important; }

.mw-logo-icon { width: 24px; height: 24px; }

/* Site name */

.mw-logo-wordmark {

font-size: 0 !important;

white-space: nowrap;

display: flex !important;

flex-direction: column !important;

}

.mw-logo-wordmark::before {

content: 'Anandamakaranda';

font-size: 17px;

font-weight: 700;

color: #fff;

font-family: system-ui, -apple-system, sans-serif;

letter-spacing: -0.01em;

}

.mw-logo-wordmark::after {

content: "A Digital Archive of Dvaita Vedanta Literature";

display: block;

font-size: 11px;

font-weight: 400;

color: rgba(255,255,255,0.85);

letter-spacing: 0.3px;

margin-top: 1px;

font-family: sans-serif;

}

.mw-~~parser~~-~~output~~ .mw-~~heading~~ {

/* Header right links */

~~border~~: ~~none~~ !important; ~~border-bottom~~: ~~none~~ !important;

.vector-header-end > *:not(#p-search) { color: rgba(255,255,255,0.9) !important; }

~~margin: 0; padding~~: 0;

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

/* User icon white */

.vector-user-menu-container .vector-icon svg,

.vector-user-menu-container .vector-icon svg path,

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

fill: #fff !important; stroke: #fff !important;

}

.vector-user-links .vector-user-menu-chevron .vector-icon svg,

.vector-user-links .vector-user-menu-chevron .vector-icon svg path {

fill: rgba(255,255,255,0.9) !important;

}

.gr-~~doc~~-title {

/* User dropdown — dark text on white card */

font-size: 1.~~6em~~; font-~~weight~~: ~~500~~; color: ~~#1a1a1a~~;

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

line-height: 1.4; ~~margin~~: 0 0 ~~16px; border: none !important~~;

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

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

.mw-portlet-personal .vector-menu-content a { color: #202122 !important; }

.vector-user-menu .mw-list-item a:hover { color: var(--light-orange) !important; }

/* Suppress Vector sticky header clone */

.vector-sticky-header { display: none !important; }

/* Suppress body top padding that Vector adds */

.mw-body { margin-top: 0 !important; padding-top: 0 !important; }

/* ── 6. VECTOR TOC (desktop sidebar) ──────────────────────────── */

/* Levels are told apart by size, weight and colour; nesting is shown by

indentation and a guide line. Every rule below uses the child

combinator (>), so highlighting an entry never spills onto the

sub-entries underneath it. */

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

/* The contents panel follows the reader toolbar's A- / A+ . The toolbar

publishes its size as --gr-font-size on <html>; everything below is a

ratio of it, so one click moves the body and the contents together. The

22px fallback is the toolbar's own default, for a page without one. */

.vector-toc {

--gr-toc: max(14px, calc(var(--gr-font-size, 22px) * 0.92));

}

.vector-toc .vector-toc-title {

font-size: 15px !important; font-weight: 700 !important;

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

color: var(--text) !important;

font-family: var(--font-indic) !important;

}

.vector-toc .vector-toc-text {

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

overflow-wrap: anywhere !important; display: inline !important;

font-family: var(--font-indic) !important;

}

/* :not() keeps this off the मूलम् / उल्लेख buttons that sit in the same

panel — otherwise this rule reshaped them into flat contents links. */

.vector-toc a:not(.toc-main-link-item), .vector-toc .vector-toc-link {

display: block;

font-family: var(--font-indic) !important;

font-size: var(--gr-toc); color: var(--text) !important; text-decoration: none !important;

padding: 4px 8px; border-radius: 5px; line-height: 1.45;

transition: background 0.12s, color 0.12s;

}

/* ~~── Chapter /~~ section ~~headings ──────────────────────────────── */~~

/* Level 1 = section heading, level 2+ = sub-sections. Each is a ratio of

~~.adhyaya~~-~~block h2~~,

--gr-toc rather than a fixed px, so the levels keep their proportions at

.~~adhyaya~~-~~heading,~~

every toolbar size; they are told apart by weight and colour as much as

.mw-~~parser~~-~~output .mw~~-~~heading2 h2,~~

by size. */

.mw-~~parser~~-~~output h2~~ {

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

font-size: 1.~~2em~~ !important; font-weight: ~~500~~ !important;

font-size: calc(var(--gr-toc) * 1.05) !important; font-weight: 600 !important; color: var(--text) !important;

color: ~~#f57c00~~ !important; ~~line~~-~~height: 1~~.8;

}

~~margin~~: ~~24px~~ 0 ~~4px~~ !important; ~~padding~~: 0 !important;

.vector-toc .vector-toc-level-2 > .vector-toc-link {

~~border~~: ~~none~~ !important;

font-size: calc(var(--gr-toc) * 0.95) !important; font-weight: 400 !important; color: #4d4d4d !important;

~~border~~-~~bottom~~: ~~2px dotted #f57c00~~ !important;

}

~~width~~: ~~75%~~;

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

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

.vector-toc .vector-toc-level-5 > .vector-toc-link {

font-size: calc(var(--gr-toc) * 0.90) !important; font-weight: 400 !important; color: #6b6b6b !important;

}

.mw-~~parser~~-~~output .mw~~-~~heading3 h3~~,

/* Nesting: indent each level and run a guide line down it */

.mw-~~parser~~-~~output h3~~ {

.vector-toc .vector-toc-contents,

~~font~~-~~size~~: ~~1em~~ !important; ~~font~~-~~weight~~: ~~500~~ !important;

.vector-toc .vector-toc-list { list-style: none !important; }

~~color~~: ~~#e65100~~ !important; ~~line~~-~~height: 1~~.5;

.vector-toc .vector-toc-contents { margin: 0 !important; padding: 0 !important; }

margin: ~~24px~~ 0 ~~8px~~ !important; padding: ~~0 !important;~~

.vector-toc .vector-toc-list-item .vector-toc-list {

~~border: none~~ !important;

margin: 0 0 0 9px !important; padding-left: 10px !important;

border-~~bottom~~: 1px ~~dotted~~ #~~e65100 !important;~~

border-left: 1px solid #ece0da;

~~width: 55%~~;

}

.vector-toc .vector-toc-list-item { margin: 1px 0 !important; list-style: none !important; }

.vector-toc .vector-toc-link:hover { background: #fbf1ec; color: var(--orange) !important; }

.mw-~~heading~~ .mw-~~editsection~~,

/* The one entry the reader is actually on */

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

.vector-toc .vector-toc-link.gr-toc-current,

.vector-toc .vector-toc-link.gr-toc-current .vector-toc-text {

color: var(--orange) !important; font-weight: 700 !important;

}

.vector-toc .vector-toc-link.gr-toc-current {

background: #fdf1e9; box-shadow: inset 2px 0 0 var(--orange);

}

/* Its parent sections: darker text only, so the path is readable without

the whole branch lighting up */

.vector-toc .vector-toc-list-item.gr-toc-in-path > .vector-toc-link {

color: var(--text) !important; font-weight: 600 !important;

}

/* Vector's own active class can sit on a parent as well as the current

item, which is what made whole branches highlight — neutralised here;

the gr-toc- classes above are the ones that carry the state. */

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

.vector-toc .vector-toc-list-item-active > .vector-toc-link * {

color: inherit; font-weight: inherit;

}

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

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

box-shadow: none !important; color: var(--text) !important;

}

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

/* ── 7. HEADINGS ───────────────────────────────────────────────── */

.mw-parser-output ~~p:empty~~,

.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4,

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

.mw-parser-output .mw-heading h1, .mw-parser-output .mw-heading h2,

.mw-heading ~~+ p:empty~~,

.mw-parser-output .mw-heading h3 {

.mw-~~heading2 + p:empty~~,

font-family: var(--font-indic);

.~~adhyaya~~-~~block + p:empty,~~

border: none !important; padding: 0 !important; background: none !important;

~~.verse~~-~~block + p~~:~~empty {~~

~~display~~: none !important; ~~margin~~: 0 !important;

}

.mw-parser-output .mw-heading { border: none !important; margin: 0; padding: 0; }

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

.mw-heading, .mw-heading2, .mw-heading3 { text-align:center; }

.~~shloka~~-~~block~~ {

.mw-parser-output h2, .mw-parser-output .mw-heading2 h2 {

~~display~~: ~~block~~;

font-size: 1.2em !important; font-weight: 500 !important;

text-align: ~~left~~;

color: var(--maroon) !important; line-height: 1.8;

margin: ~~3px 0~~ 0;

margin: 24px 0 4px !important;

border-bottom: 2px dotted var(--maroon) !important;

width: 75%; font-family: var(--font-indic); text-align: center;

}

.mw-parser-output h3, .mw-parser-output .mw-heading3 h3 {

font-size: 1em !important; font-weight: 500 !important;

color: var(--orange) !important; line-height: 1.5;

margin: 24px 0 8px !important;

border-bottom: 1px dotted var(--orange) !important;

width: 55%; font-family: var(--font-indic); text-align: center;

}

.~~shloka~~-~~line~~ {

/* ── 8. PARAGRAPHS ─────────────────────────────────────────────── */

~~display~~: ~~block~~;

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

font-~~style~~: ~~normal~~;

color: ~~#333~~;

/* ── 9. DOCUMENT TITLE ─────────────────────────────────────────── */

line-height: 1.35;

.gr-doc-title {

~~margin~~: 0;

font-size: 2em; font-weight: 500; color: var(--maroon);

line-height: 1.4; margin: 0 0 16px; border: none !important;

text-align:center; font-family: var(--font-deva);

}

~~.verse~~-~~block {~~

/* Headings take AdishilaDev (--font-deva) rather than the general Indic

~~display: block;~~

stack, so the heading face is the same everywhere regardless of what

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

else a page mixes in. */

~~text~~-~~align~~: ~~left~~;

#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,

#mw-content-text h4, #mw-content-text h5,

.mw-heading h1, .mw-heading h2, .mw-heading h3, .mw-heading h4,

.teeka-title, .gr-teeka-dropdown-header, .gr-sticky-title {

font-family: var(--font-deva);

}

/* ── 10. VERSE BLOCKS ──────────────────────────────────────────── */

.shloka-block { display: block; text-align: left; margin: 3px 0 0; padding-bottom: 0.5em; }

.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0;

font-family: var(--font-indic); }

.verse-block { display: block; margin: 6px 0 0; text-align: left; }

.verse-block .shloka-block { text-align: left; margin: 0; }

.verse-block .shloka-line {

display: block;

display: block; font-weight: 500; line-height: 1.35; margin: 0; color: var(--maroon);

~~font-style: italic;~~

font-family: var(--font-indic);

~~color: #c65;~~

font-weight: 500;

line-height: 1.35;

~~margin~~: 0;

}

.verse-block.normal .shloka-line { color: #555; }

.verse-block + p { display: none !important; margin: 0 !important; }

.mw-parser-output .verse-block,

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

.verse-~~block + p~~ { display: ~~none !important~~; margin: 0 ~~!important~~; }

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

color: #b5451b; line-height: 1.5; display: block; margin: 0.1em 0;

}

.gr-verse-type-sutra .gr-verse-text,

.verse-block[data-type="sutra"] .verse-line { font-style: normal; font-weight: 600; color: #b5451b; }

/* ── ~~Uvacha ─────────────────────────────────────────────────────~~ */

/* ── 11. UVACHA ────────────────────────────────────────────────── */

.uvacha-block {

display: block;

display: block; font-weight: bold; color: #c65;

font-weight: bold; color: #c65;

margin: 0.5rem 0 0; padding: 2px 0 2px 12px;

margin: 0.5rem 0 0;

border-left: 3px solid #c65; font-style: normal;

padding: 2px 0 2px 12px;

border-left: 3px solid #c65;

~~text-align: left~~; font-style: normal;

}

.uvacha-block + .verse-block { margin-top: 2px; }

.gr-uvaaca, .uvaaca {

color: #b5451b; font-weight: 600; font-size: 0.92em; margin: 0.5em 0 0.2em 0; display: block;

}

/* ── ~~Bhashyam ───────────────────────────────────────────────────~~ */

/* ── 12. BHASHYAM ──────────────────────────────────────────────── */

.bhashyam-block {

display: block;

display: block; font-size: 1em; line-height: 1.6; color: #555;

font-size: 1em; line-height: 1.6;

color: #555;

~~margin: 0.25em 0 0.35em 48px~~;

padding: 0; border: none; background: transparent;

font-family: var(--font-indic);

}

.gr-bhashyam, .commentary-bhashyam {

color: #222; font-style: normal; line-height: 1.75; margin: 0.3em 0 0.5em 0;

}

.gr-leading-bhashya { color: #555; }

/* ── ~~Padya ──────────────────────────────────────────────────────~~ */

/* ── 13. PADYA ─────────────────────────────────────────────────── */

.padya-block {

display: block; font-size: 1em; line-height: 1.75;

display: block; font-size: 1em; line-height: 1.75; color: #c65 !important;

color: #c65 !important; ~~font-style: italic;~~ font-weight: 500;

font-weight: 500; margin: 0.4em 0 0.6em 60px;

margin: 0.4em 0 0.6em 60px~~; padding: 0; border: none; background: transparent~~;

}

.gr-padapatha { font-size: 0.9em; color: #555; margin: 0.2em 0 0.3em 0.8em; }

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

/* ── 14. TEEKA ─────────────────────────────────────────────────── */

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

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

~~.gr-mulaprateeka-block {~~

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

~~text-align: center; color: #333;~~

~~margin: 0.7em 0 0.3em; line-height: 1.5;~~

}

~~/* ── 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;~~

padding: 6px 10px 8px; margin: 0.3em 0; line-height: 1.6; color: #555; background: #fcf5f3;

padding: 6px 10px 8px;

border-radius: 12px;

margin: 0.3em 0;

font-family: var(--font-indic);

~~font-size: 0.92em;~~

line-height: 1.6;

color: #555;

background: #~~fffdf5~~;

~~border~~: ~~1px solid #f0e0b0~~;

}

.teeka-title {

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

font-family: var(--font-indic) !important;

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

font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

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

margin-bottom: 4px; padding-bottom: 3px;

~~color: #a07040;~~ margin-bottom: 4px; padding-bottom: 3px;

~~border-bottom: 1px solid #e8d4a0~~;

}

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

.teeka-body .shloka-block {

~~.teeka-block~~ .shloka-block {

margin: 0.4em 0; padding: 0.3em 0.6em; font-family: var(--font-indic);

margin: 0 0 0.~~35em~~;

~~text~~-~~align~~: ~~left;~~

~~padding: 0~~;

}

.teeka-~~block~~ .shloka-line {

.teeka-body .shloka-line { font-size: 0.97em; font-family: var(--font-indic); }

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

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

/* ── 15. PRATEEKA / MOOLA ──────────────────────────────────────── */

}

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

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

.gr-mulaprateeka-block {

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

font-family: 'AdishilaItalic';

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

text-align: center; color: #333; margin: 0.7em 0 0.3em; line-height: 1.5;

color: #~~6a3e00~~; margin: 0.~~4em~~ 0 0.~~2em~~;

~~font~~-~~family~~: ~~inherit;~~

~~border: none~~;

}

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

/* ── ~~Adhyaya block ──────────────────────────────────────────────~~ */

/* ── 16. ADHYAYA ───────────────────────────────────────────────── */

.adhyaya-block { margin: 0 0 4px; }

.adhyaya-trans { font-size: 0.9em; color: #666; margin: 2px 0 0; }

.adhyaya-intro { margin-top: 8px; line-height: 1.75; color: #555; }

.introduction p { color: var(--dark-gray); font-weight: 400; margin: 0 !important; padding: 0 !important; }

.introduction { padding-bottom: 0.5em; text-align: justify; }

/* ── ~~Nyaya ──────────────────────────────────────────────────────~~ */

/* ── 17. NYAYA / PRASNA ────────────────────────────────────────── */

.nyaya-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }

.nyaya-title {

font-size: 1em; font-weight: 500; color: ~~#e65100~~;

font-size: 1em; font-weight: 500; color: var(--orange);

margin-bottom: 0.4rem; border-bottom: 1px dotted ~~#e65100~~; width: 50%;

margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;

}

~~.nyaya-title span { display: block; font-size: 0.85em; color: #666; }~~

.nyaya-body { color: #555; line-height: 1.75; margin-top: 0.5rem; }

~~/* ── Prasna ───────────────────────────────────────────────────── */~~

.prasna-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }

.prasna-title {

font-size: 1em; font-weight: 500; color: ~~#e65100~~;

font-size: 1em; font-weight: 500; color: var(--orange);

margin-bottom: 0.4rem; border-bottom: 1px dotted ~~#e65100~~; width: 50%;

margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;

}

~~.prasna-title span { display: block; font-size: 0.85em; color: #666; }~~

.prasna-question, .prasna-answer { color: #555; line-height: 1.75; margin-top: 0.5rem; }

.prasna-answer { margin-left: 60px; }

/* ── ~~Verse action buttons ───────────────────────────────────────~~ */

/* ── 18. VYAKHYA ELEMENTS ──────────────────────────────────────── */

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

font-size: 0.9em; font-weight: 700; color: var(--orange);

margin: 0.35em 0 0.15em; font-family: inherit; border: none; padding: 0;

}

.gr-avataranika {

color: #444; margin: 0.2em 0 0.5em 0.5em;

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

}

.gr-vyakhya-pada {

font-size: 0.88em; color: #555; background: #fafafa;

border: 1px solid #e8e0d0; border-radius: 4px; padding: 0.5em 0.8em;

margin: 0.5em 0; line-height: 1.5; white-space: pre-wrap;

}

.gr-vyakhya-gadya {

font-weight: bold;

}

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

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

.gr-gadya {

font-family: 'Adishila';font-weight: bold; display: block !important; margin-left: 0.2em;}

.gr-author-note {

font-style: italic; color: var(--maroon); text-align: center; font-size: 0.9em;

margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: var(--font-indic)

}

.gr-devatachandas {

font-size: 1em;

color: #f77628;

font-weight: 500;

margin-top: 10px;

text-align: center; }

.gr-vargikarana {

font-size: 1em;

color: #f77628;

font-weight: 500;

margin-top: 10px;

text-align: center; }

.gr-veda {

font-family: "AdishilaVedic";

}

/* ── 20. BHASHYA COLLECTION ────────────────────────────────────── */

.mw-parser-output .bhashya-collection { margin: 0; padding: 0; }

.mw-parser-output .bhashya + p:empty,

.mw-parser-output .verse + p:empty,

.mw-parser-output .bhashya-collection + p:empty,

.mw-parser-output .pramana + p:empty,

.mw-parser-output .author-note + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }

/* ── 21. VERSE ACTIONS ─────────────────────────────────────────── */

.verse-actions {

display: flex; flex-direction: row;

display: flex; flex-direction: row; align-items: center;

align-items: center; gap: 6px; margin-top: 4px;

gap: 6px; margin-top: 4px; justify-content: center;

~~padding-left: 2px~~; justify-content: center;

}

.verse-action-btn {

display: inline-flex; align-items: center; justify-content: center;

padding: 4px; border-radius: 6px; cursor: pointer;

padding: 4px; border-radius: 6px; cursor: pointer; opacity: 0.75; transition: all 0.2s;

opacity: 0.75; transition: all 0.2s ~~ease~~;

}

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

.icon { display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }

.icon {

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

background-repeat: no-repeat; background-position: center;

background-size: contain; ~~transform: translateY(2px);~~

~~pointer-events: none;~~

}

.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%;

transform: translateX(-50%) translateY(4px);

white-space: nowrap; pointer-events: none; z-index: 9999;

display: inline-flex; align-items: center;

display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;

padding: 2px 8px; border-radius: 999px;

font-size: 0.75rem; font-weight: 500; background: rgba(30,30,30,0.82); color: #fff;

font-size: 0.75rem; font-weight: 500;

opacity: 0; transition: opacity 0.2s, transform 0.2s;

background: rgba(30,30,30,0.82); color: #fff;

~~backdrop-filter: blur(6px);~~ opacity: 0;

transition: opacity 0.2s ~~ease~~, transform 0.2s ~~ease;~~

}

~~.copy-tooltip.copy-tooltip-visible {~~

~~opacity: 1; transform: translateX(-50%) translateY(0)~~;

}

.copy-tooltip.copy-tooltip-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── ~~Code~~ / ~~pre ─────────────────────────────────────────────────~~ */

/* ── 22. CODE / PRE ────────────────────────────────────────────── */

pre, code, .mw-code, tt, kbd {

font-family: 'Adishila', 'Noto Serif Devanagari', serif ~~!important~~;

font-family: 'Adishila', 'Noto Serif Devanagari', serif ;

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

background-color: transparent !important; border: none !important; padding: 0.3em 0 !important;

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

}

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

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

Line 280:

Line 730:

}

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

/* ── 23. INLINE TOC BOX (wikitext __TOC__) ─────────────────────── */

/* ── TOC ~~— inline box ───────────────────────────────────────────~~ */

.toc {

display: block !important; background: #fffdf5;

display: block !important; background: #fffdf5; border: 1px solid #e8c88a;

border: 1px solid #e8c88a; border-radius: 8px;

border-radius: 8px; padding: 12px 16px; margin: 0 0 24px 0;

padding: 12px 16px; margin: 0 0 24px 0;

width: fit-content; min-width: 220px; max-width: 420px;

font-size: 0.9em; line-height: 2;

~~font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;~~

}

.toc h2, .toc .toctitle {

font-size: 0.85em !important; font-weight: 600 !important;

font-size: 0.85em !important; font-weight: 600 !important; color: var(--text) !important;

color: ~~#5a3a00 !important; border: none~~ !important;

border: none !important; margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: 0.05em;

border~~-bottom~~: none !important; ~~width: auto !important;~~

margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: 0.05em;

}

.toc ul { margin: 0 !important; padding-left: 1.2em !important; list-style: none !important; }

.toc li { margin: 0; padding: 0; }

.toc a { color: ~~#7a4a10~~ !important; text-decoration: none !important; }

.toc a { color: var(--text) !important; text-decoration: none !important; }

.toc a:hover { color: ~~#f57c00~~ !important; }

.toc a:hover { color: var(--light-orange) !important; }

.toc .toclevel-1 > a { font-weight: 600~~; color: #5a3a00 !important; }~~

.toc .toclevel-1 > a { font-weight: 600; }

~~.toc .toclevel-2 > a { color: #7a4a10 !important; }~~

.tocnumber { display: none; }

~~.toc .toclevel-3 > a { color: #9a6020 !important; font-size: 0.95em~~; }

.tocnumber { ~~color~~: ~~#aaa; margin-right: 4px; font-size: 0.85em~~; }

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

/* ── 24. DOC TEEKAS + TOC NAV ──────────────────────────────────── */

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

.gr-doc-teekas { margin-bottom: 1em; }

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

.gr-doc-teekas + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }

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

/* मूलम् / उल्लेख — real buttons, not grey chips: they are how a reader

.vector-~~toc~~ {

moves between the text and its commentaries, so they read as actions.

font-~~size~~: ~~0.95em~~ !important;

Used by the desktop TOC and the mobile document nav alike. */

~~line~~-~~height~~: 1.~~6 !important~~;

.toc-main-links {

display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center;

margin: 6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #f1e3dc;

}

/* Sitting under the document title in the page, not in the panel */

#gr-toc-doc-nav.toc-main-links { margin: 10px auto 22px; max-width: 640px; }

.toc-main-link-item {

flex: 0 1 auto; min-width: 92px; text-align: center;

font-family: var(--font-indic); font-size: 18px; font-weight: 600; line-height: 1.4;

color: #fff !important; background: #b5451b; border: 0; border-radius: 999px;

padding: 9px 18px; text-decoration: none !important;

box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);

transition: background 0.15s, box-shadow 0.15s;

}

.toc-main-link-item:visited { color: #fff !important; }

.toc-main-link-item:hover,

.toc-main-link-item:focus-visible { background: #97370f !important; color: #fff !important; box-shadow: 0 2px 6px rgba(60, 20, 10, 0.26); }

/* Phone: the same buttons as a pill row under the document title, shaped

like the reader toolbar's controls. White on the brand colour, stated

with !important because the skin colours links on its own. */

.skin-minerva #gr-mob-doc-nav {

display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;

margin: 4px 0 14px; padding: 0 12px 14px; border-bottom: 1px solid #f0e0d6;

}

.skin-minerva #gr-mob-doc-nav .toc-main-link-item { font-size: 17px; padding: 11px 26px; min-width: 116px; }

.skin-minerva .toc-main-link-item,

.skin-minerva .toc-main-link-item:visited,

.skin-minerva .toc-main-link-item:active { color: #fff !important; }

/* ── 25. MAIN PAGE ─────────────────────────────────────────────── */

body.page-Main_Page #mw-panel,

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

.gr-home { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }

.gr-home-page-title {

font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;

text-align: center; font-size: 1.8em; font-weight: 500; color: #1a2e40; margin: 24px 0 32px;

}

/* ~~"Contents" heading~~ */

/* Section label: centred, with a rule running out on each side */

.~~vector~~-~~toc .vector~~-~~toc~~-~~title~~ {

.gr-home-group-label {

~~font~~-~~size~~: ~~0.72em !important~~;

display: flex; align-items: center; gap: 16px;

font-~~weight~~: ~~700~~ !important;

font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;

~~text~~-~~transform~~: ~~uppercase~~;

font-size: 1.1em; font-weight: 600; color: #1a2e40;

~~letter~~-~~spacing~~: ~~0.08em~~;

margin: 40px 0 18px; padding: 0; border: 0;

color: #~~b07040 !important~~;

}

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

.gr-home-group-label::before,

~~margin-bottom~~: ~~2px !important~~;

.gr-home-group-label::after {

content: ""; flex: 1; height: 1px;

}

.gr-home-group-label::before { background: linear-gradient(90deg, transparent, #e2c3b9); }

.gr-home-group-label::after { background: linear-gradient(90deg, #e2c3b9, transparent); }

#gr-view-grantha > .gr-home-group-label:first-child { margin-top: 8px; }

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

/* Cards sit on a grid, so every row lines up */

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

.gr-home-grid {

background: ~~none !important~~;

display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

border: ~~none !important~~;

gap: 20px; align-items: start; margin-bottom: 12px;

box-shadow: ~~none~~ !important;

}

color: #~~9a6030 !important~~;

.gr-home-card {

~~opacity~~: ~~1 !important~~;

background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;

~~transition~~: color 0.~~15s !important~~;

box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);

padding: 0; min-width: 0; overflow: hidden;

}

.gr-home-card-title {

display: flex; align-items: center; justify-content: center; gap: 10px;

font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;

font-size: 1em; font-weight: 600; color: #1a2e40; text-align: center; line-height: 1.4;

margin: 0; padding: 12px 16px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc;

}

.gr-home-card-count {

flex: none; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid #ecd3ca;

color: #c0392b; font: 600 11px/1.7 system-ui, sans-serif;

}

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

~~color~~: #~~f57c00 !important~~;

/* Numbered rows: number in a soft circle, a hairline between rows */

~~background~~: ~~none !important~~;

.gr-home-card ol { margin: 0; padding: 6px 0 8px; list-style: none; counter-reset: gr-item; }

/* Each row is a two-column grid: number | title. The number sits in the

title's own row and is centred on it, so it lines up whatever the font. */

.gr-home-card li {

counter-increment: gr-item; list-style: none;

display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center;

margin: 0; padding: 8px 16px; border-top: 1px solid #f6efec;

font-size: 0.95em; line-height: 1.6; color: #333; overflow-wrap: anywhere;

}

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

.gr-home-card li:first-child { border-top: 0; }

~~fill~~: ~~currentColor !important~~;

.gr-home-card li::before {

content: counter(gr-item);

grid-column: 1; grid-row: 1; justify-self: center;

min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px;

background: #fbece8; color: #c0392b; text-align: center; font: 600 11px/22px system-ui, sans-serif;

}

.gr-home-card li > * { grid-column: 2; }

.gr-home-card li > a:first-child, .gr-home-card li > a:first-of-type { grid-row: 1; }

.gr-home-card li:hover { background: #fdf8f6; }

.gr-home-card li a { color: #c0392b; text-decoration: none; }

.gr-home-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }

.gr-home-card li a.new { color: #c08080; }

.gr-home-note { display: block; font-size: 0.82em; color: #888; line-height: 1.4; }

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

/* A card with a long list (Madhvacharya's 38 works) spans two columns */

.~~vector~~-~~toc~~ .~~vector~~-~~toc~~-~~numb~~ {

@media (min-width: 900px) {

~~display~~: ~~none !important~~;

.gr-home-card.gr-home-card-wide { grid-column: span 2; }

.gr-home-card.gr-home-card-wide ol { column-count: 2; column-gap: 0; column-rule: 1px solid #f3e9e5; }

.gr-home-card.gr-home-card-wide li { break-inside: avoid; }

}

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

/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */

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

/* One segmented control instead of two separate buttons */

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

.gr-home-toggle {

.~~vector~~-~~toc~~ .~~vector~~-~~toc~~-~~text~~ {

display: flex; gap: 4px; width: max-content; max-width: 100%; box-sizing: border-box;

~~white~~-~~space~~: ~~normal !important~~;

margin: 4px auto 28px; padding: 4px;

~~word~~-~~break~~: ~~break~~-~~word !important~~;

background: #f7ece8; border: 1px solid #efd9d1; border-radius: 999px;

~~overflow~~-~~wrap~~: ~~anywhere !important~~;

}

~~line~~-~~height~~: ~~1.35 !important~~;

.gr-toggle-btn {

~~display~~: ~~inline !important~~;

font-family: 'Adishila', 'Noto Serif Devanagari', serif;

font-size: 0.88em; padding: 7px 24px; border: 0; border-radius: 999px; text-align: center;

background: transparent; color: #a0402f; cursor: pointer; user-select: none;

transition: background 0.15s, color 0.15s, box-shadow 0.15s;

}

.gr-toggle-btn:hover { background: rgba(255, 255, 255, 0.7); color: #c0392b; }

.gr-toggle-btn.gr-toggle-active { background: #c0392b; color: #fff; box-shadow: 0 1px 4px rgba(192, 57, 43, 0.35); }

.gr-toggle-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }

/* ── 27. SCRIPT BAR ────────────────────────────────────────────── */

.gr-script-bar { margin: 0 0 20px; font-size: 0.8em; color: #888; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.gr-script-label { font-family: system-ui, sans-serif; color: #aaa; }

.gr-script-btn { font-family: 'Adishila', 'Noto Serif Devanagari', serif; color: #c0392b !important; text-decoration: underline dotted !important; cursor: pointer; }

.gr-script-btn.active { color: #888 !important; text-decoration: none !important; cursor: default; }

/* ── 28. MODALS ────────────────────────────────────────────────── */

.grantha-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 10000; }

.grantha-modal-box { background: white; padding: 20px; border-radius: 10px; width: 300px; }

.gm-title { font-weight: bold; margin-bottom: 10px; }

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

.~~vector-toc a,~~

/* ── 29. LOGIN PAGE ────────────────────────────────────────────── */

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

body.page-Special_UserLogin .vector-search-box,

.~~vector~~-~~toc a:hover,~~

body.page-Special_UserLogin #p-search { display: none !important; }

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

body.page-Special_UserLogin #content { max-width: 420px; margin: 40px auto !important; }

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

/* ── 30. SPECIAL PAGES ─────────────────────────────────────────── */

*

body.ns-special #footer, body.ns-special .mw-footer,

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

body.ns-special .vector-footer { display: none !important; }

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

body.ns-special .vector-page-tools { display: none !important; }

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

* the link regardless of span nesting.

/* ── 31. MINERVA (mobile) ──────────────────────────────────────── */

*

.skin-minerva .mw-parser-output {

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

font-size: 18px !important;

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

line-height: 1.8 !important;

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

}

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

.skin-minerva .mw-parser-output h2,

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

.skin-minerva .mw-parser-output .mw-heading2 h2 {

.~~vector~~-~~toc~~ .~~vector~~-~~toc~~-~~list~~-~~item~~-~~active > a,~~

width: 100% !important;

.~~vector~~-~~toc~~ .~~vector-toc-list~~-~~item~~-active > a *,

}

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

.skin-minerva .mw-parser-output h3,

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

.skin-minerva .mw-parser-output .mw-heading3 h3 {

~~color: #f57c00 !important;~~

width: 100% !important;

~~font-weight~~: ~~700~~ !important;

}

/* Home grid single column on Minerva */

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

.skin-minerva .gr-home-grid { grid-template-columns: 1fr; gap: 14px; }

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

.skin-minerva .gr-home-toggle { width: 100%; margin: 4px 0 20px; }

~~font~~-~~weight~~: ~~600~~ !important; ~~color~~: ~~#3a1f00~~ !important;

.skin-minerva .gr-toggle-btn { flex: 1; padding: 8px 10px; }

.skin-minerva .gr-home-group-label { margin: 28px 0 14px; }

/* Hide things that should be hidden on mobile too */

.skin-minerva .catlinks,

.skin-minerva #catlinks { display: none !important; }

.skin-minerva .mw-editsection { display: none !important; }

/* Minerva already has its own TOC — hide our inline .toc */

.skin-minerva .toc { display: none !important; }

/* ReaderToolbar on Minerva */

.skin-minerva #gr-static-bar {

height: auto !important;

min-height: 52px !important;

overflow-x: auto !important;

overflow-y: hidden !important;

scrollbar-width: none !important;

}

.~~vector~~-~~toc .vector~~-~~toc~~-~~level~~-~~2 > .vector~~-~~toc-link,~~

.skin-minerva #gr-static-bar::-webkit-scrollbar { display: none !important; }

.vector-toc .vector-toc-level-2 > .vector-toc-link * { ~~color~~: ~~#5a3a00~~ !important; }

.skin-minerva .gr-controls .gr-btn {

.~~vector~~-~~toc~~ .~~vector~~-~~toc-level-3 >~~ .~~vector~~-~~toc-link,~~

height: 44px !important;

~~.vector-toc .vector-toc-level-3 > .vector-toc-link * {~~

min-width: 44px !important;

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

font-size: 14px !important;

}

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

.skin-minerva .gr-btn-staging { display: none !important; }

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

.skin-minerva .gr-controls .gr-sep { display: none !important; }

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

/* Minerva already shows page title — don't double-hide */

.vector-~~toc .vector~~-~~toc-list-item-active .vector-toc-level-3 > .vector-toc-link~~ {

.skin-minerva h1.firstHeading { display: block !important; }

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

/* ── 32. PRINT ─────────────────────────────────────────────────── */

@media print {

#gr-static-bar, .gr-controls, .vector-header-container { display: none !important; }

.mw-parser-output { font-size: 11pt !important; }

}

/* ── ~~Doc teekas ─────────────────────────────────────────────────~~ */

/* ── 33. TYPOGRAPHY CLASSES ────────────────────────────────────── */

.gr-~~doc-teekas~~ { ~~margin~~-~~bottom~~: ~~1em~~; }

.gr-~~doc~~-~~teekas + p~~:~~empty { display~~: ~~none !important~~; margin: 0 ~~!important; height:~~ 0 ~~!important~~; }

/* Heading — center, maroon, AdishilaDevGuru */

.gr-heading {

display: block;

text-align: center;

font-size: 1.09em;

font-weight: 500;

color: #be100e;

font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;

line-height: 1.4;

margin: 0.45em 0;

}

/* ~~── Main page ──────────────────────────────────────────────────~~ */

/* Sub-heading — center, orange, AdishilaDevGuru */

.gr-~~home~~ { ~~max~~-~~width~~: ~~1080px~~; ~~margin~~: 0 ~~auto~~; ~~padding~~: 0; }

.gr-sub-heading {

~~.gr-home-page-title {~~

display: block;

font-family: 'Adishila', 'Noto Serif Devanagari', serif ~~!important~~;

text-align: center;

~~text~~-~~align: center; font-size~~: 1.~~8em; font-weight: 500~~;

font-size: 0.73em;

~~color: #1a2e40;~~ margin: ~~24px~~ 0 ~~32px~~;

font-weight: 500;

color: #e65100;

font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;

line-height: 1.5;

margin: 0.5em 0;

}

.gr-~~home~~-~~grid~~ { display: ~~flex~~; ~~flex~~-~~wrap~~: ~~wrap~~; ~~gap~~: ~~20px~~; ~~margin~~-~~bottom~~: ~~32px~~; }

~~.gr-home-card {~~

/* Chapter Heading — center, maroon, AdishilaDevGuru */

~~background~~: #~~fff; border: 1px solid #e8e4df; border-radius: 10px~~;

.gr-chapter-heading {

~~box~~-~~shadow~~: ~~0 2px 8px rgba(0~~,0,0,~~0.07)~~;

display: block;

~~padding: 18px 20px 20px; flex~~: 1 ~~1 280px~~; ~~min-width~~: ~~240px; max-width: 360px~~;

text-align: center;

font-size: 0.82em;

font-weight: 500;

color: #be100e;

font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;

line-height: 1.5;

margin: 0.5em 0;

}

.gr-~~home~~-~~card-title~~ {

~~font~~-~~family~~: ~~'Adishila', 'Noto Serif Devanagari', serif !important~~;

/* M.Veda Shloka — left, bold, maroon, AdishilaVed, 5mm indent */

font-size: ~~1em~~; font-weight: ~~600~~; color: #~~1a2e40~~;

.gr-mv-shloka {

~~text~~-~~align~~: ~~center~~; padding-~~bottom~~: ~~10px~~; margin~~-bottom~~: ~~12px~~;

display: block;

~~border~~-~~bottom~~: 1.~~5px solid #c0392b~~;

text-align: left;

font-size: 0.82em;

font-weight: bold;

color: #be100e;

font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;

padding-left: 0.86em;

margin: 0;

line-height: 1.75;

}

.~~gr-home-card ol { margin: 0; padding-left: 1.4em; list-style: decimal; }~~

.gr-~~home~~-~~card li~~ { ~~font-size~~: ~~0.95em~~; ~~line-height: 1.85; color: #333; }~~

/* M.Veda Gadya — justify, bold, maroon, AdishilaVed */

~~.gr-home-card li a { color: #c0392b;~~ text-~~decoration~~: ~~none~~; }

.gr-mv-gadya {

~~.gr~~-~~home-card li a~~:~~hover { text-decoration: underline; }~~

display: block;

.~~gr-home-card li a.new { color: #c08080~~; }

text-align: justify;

~~.gr-home-note {~~ font-~~size~~: ~~0.82em~~; color: #~~888~~; }

font-size: 0.82em;

~~.gr-home-group-label {~~

font-weight: bold;

font-family: 'Adishila', 'Noto Serif Devanagari', serif ~~!important~~;

color: #be100e;

~~font~~-~~size~~: 1.~~1em~~; ~~font~~-~~weight~~: ~~600; color: #1a2e40~~;

font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;

~~text-align: center;~~ margin: ~~36px~~ 0 ~~16px; padding-bottom: 8px~~;

text-indent: 1.18em;

~~border~~-~~bottom~~: ~~2px solid #c0392b~~;

padding-left: 0.36em;

margin: 0;

line-height: 1.75;

}

/* ~~── Modals ─────────────────────────────────────────────────────~~ */

/* M.Shloka — left, bold, orange, AdishilaDev, 5mm indent */

.~~grantha~~-~~new~~-~~btn~~ {

.gr-m-shloka {

~~background~~: ~~rgba(255,255,255,0.1)~~; ~~border~~: ~~1px solid rgba(255,255,255,0.3)~~;

display: block;

~~color~~: ~~white~~; ~~padding~~: ~~6px 14px~~; ~~border~~-~~radius~~: ~~20px; cursor: pointer~~; margin~~-right~~: ~~10px~~;

text-align: left;

font-weight: bold;

color: var(--maroon);

font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;

margin: 0;

}

.~~grantha~~-~~modal~~ {

~~position~~: ~~fixed~~; ~~inset~~: 0; ~~background~~: ~~rgba(0,0,0,0.35)~~;

/* B.Shloka / TK.Shloka / TP.Shloka — left, black, AdishilaDev */

~~display~~: ~~flex~~; ~~align~~-~~items~~: ~~center~~; ~~justify-content~~: ~~center; z-index: 10000~~;

.gr-b-shloka,

.gr-tp-shloka {

display: block;

text-align: left;

font-weight: normal;

color: #1a1a1a;

font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;

margin: 0;

}

~~.grantha-modal-box { background: white; padding: 20px; border-radius: 10px; width: 300px; }~~

~~.gm-title { font-weight: bold; margin-bottom: 10px; }~~

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

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

/* Reference — orange, AdishilaDev */

~~body~~.~~page~~-~~Main_Page #mw~~-~~panel~~,

.gr-reference {

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

font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif; color: var(--maroon);

~~body.page-Main_Page #footer { display: none !important;~~ }

}

/* ~~── Main page view toggle ──────────────────────────────────────~~ */

/* Custom tag span — subtle dashed underline only */

.gr-~~home-toggle { display: flex; gap: 8px; margin: 0 0 24px; justify-content: center; }~~

.gr-custom {

~~.gr-toggle-btn~~ {

border-bottom: 1px dashed #b5451b;

~~font-family: 'Adishila', 'Noto Serif Devanagari', serif;~~

padding-bottom: 1px;

~~font-size: 0.88em; padding: 6px 20px;~~

~~border: 1.5px solid #c0392b;~~ border-~~radius: 20px;~~

~~background: transparent; color~~: #~~c0392b~~;

~~cursor: pointer; user~~-~~select: none; transition~~: ~~background 0.15s, color 0.15s~~;

}

~~.gr-toggle-btn:hover { background: #fdf0ed; }~~

~~.gr-toggle-btn.gr-toggle-active { background: #c0392b; color: #fff; }~~

~~/* ── Script switcher bar ──────────────────────────────────────── */~~

.gr-crosslink {

.gr-~~script-bar~~ {

color: #1a73e8;

~~margin: 0 0 20px; font-size: 0.8em;~~ color: #~~888~~;

text-decoration: underline;

~~display: flex; align~~-~~items~~: ~~center~~; ~~gap: 12px; flex-wrap~~: ~~wrap~~;

cursor: pointer;

}

.gr-~~script-label { font-family~~: ~~system-ui, sans-serif; color: #aaa; }~~

.gr-crosslink:hover {

~~.gr-script-btn~~ {

color: #0b57cf;

~~font-family: 'Adishila', 'Noto Serif Devanagari', serif;~~

color: #~~c0392b !important; text-decoration: underline dotted !important; cursor: pointer~~;

}

~~.gr-script-btn.active { color: #888 !important; text-decoration: none !important; cursor: default; }~~

/* ── ~~Vector 2022~~ header ~~─────────────────────────────────────────~~ */

/* ── 34. MINERVA HEADER — orange theme + sticky ────────────────── */

.~~vector~~-header-container {

/* Kill space above header */

.skin-minerva body { margin-top: 0 !important; padding-top: 0 !important; }

.skin-minerva #mw-mf-viewport,

.skin-minerva #mw-mf-page-center { margin-top: 0 !important; padding-top: 0 !important; }

/* Header — orange, sticky */

.skin-minerva header.header-container {

background: #b5451b !important;

position: fixed !important;

top: 0 !important;

z-index: 200 !important;

width: 100% !important;

margin: 0 !important;

padding: 0 !important;

color: #ffffff;

}

.skin-minerva .minerva-header {

background: #b5451b !important;

~~border~~-~~bottom~~: ~~1px solid rgba~~(~~255,255,255,~~0~~.12~~);

display: flex !important;

align-items: center !important;

min-height: 54px !important;

padding: 0 12px !important;

margin: 0 !important;

}

.minerva-icon {

filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1%) hue-rotate(296deg) brightness(104%) contrast(100%);

}

.~~vector~~-~~header~~ {

background: transparent !important; ~~max~~-~~width~~: ~~100%~~ !important;

/* Site name text */

display: flex !important; align-items: center ~~!important;~~

.skin-minerva .branding-box { background: transparent !important; }

~~justify-content: space-between !important;~~

.skin-minerva .branding-box a {

~~padding-left: 20px !important; padding-right: 20px~~ !important;

text-decoration: none !important;

display: flex !important;

align-items: center !important;

}

.~~vector~~-~~header~~-~~start~~ {

.skin-minerva .branding-box a span {

~~flex~~: ~~0 0 auto~~ !important; ~~display~~: ~~flex~~ !important;

color: #fff !important;

~~align~~-~~items~~: ~~center~~ !important; ~~gap~~: ~~12px~~;

font-size: 18px !important;

font-weight: 700 !important;

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

white-space: nowrap !important;

}

.~~vector~~-header-~~end~~ {

~~flex~~: ~~0 0 auto~~ !important~~; display: flex !important;~~

/* Hamburger + search icons — white */

~~align-items: center !important; gap: 16px; margin-left: auto~~;

.skin-minerva .minerva-header label,

.skin-minerva .minerva-header .search-toggle {

color: #fff !important;

}

.mw-~~logo { display: flex !important; align~~-~~items: center; opacity: 1 !important; }~~

.skin-minerva .minerva-header svg path,

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

.skin-minerva .minerva-header svg rect,

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

.skin-minerva .minerva-header svg circle {

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

fill: #fff !important;

* (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~~;

}

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

.skin-minerva .minerva-header .mw-ui-icon:before {

~~.vector-user-links~~ .~~vector-icon,~~

color: #fff !important;

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

filter: brightness(10) !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,~~

~~.cdx-search-input__end-button path { filter: none !important; fill: #202124 !important; opacity: 1 !important; }~~

~~.vector-header-end > *:not(#p-search) { color: rgba(255,255,255,0.9) !important; }~~

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

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

/* Reader toolbar below Minerva header */

*

.skin-minerva #gr-static-bar {

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

position: sticky !important;

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

top: 54px !important;

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

z-index: 100 !important;

*

}

* 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~~.

/* ── 35. MINERVA — auto-expand sections ────────────────────────── */

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

.skin-minerva .collapsible-block,

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

.skin-minerva .collapsible-heading + .collapsible-block {

li#pt-watchlist,

display: block !important;

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

}

.skin-minerva .mf-section-0,

.skin-minerva .mf-section-1,

.skin-minerva .mf-section-2,

.skin-minerva .mf-section-3,

.skin-minerva .mf-section-4,

.skin-minerva .mf-section-5,

.skin-minerva .mf-section-6,

.skin-minerva .mf-section-7,

.skin-minerva .mf-section-8,

.skin-minerva .mf-section-9 {

display: block !important;

}

.skin-minerva .section-heading {

pointer-events: none !important;

}

.skin-minerva .section-heading .indicator {

display: none !important;

}

/* ── Hide MediaWiki default header user/account controls (desktop) ── */

#pt-userpage-2,

#p-vector-user-menu-userpage,

/* Hide the right-side person-icon dropdown */

#vector-user-links-dropdown,

.vector-user-links-dropdown,

#p-personal-more,

.vector-user-menu,

.mw-portlet-vector-user-menu-overflow,

#pt-watchlist-2, #pt-watchlist {

display: none !important;

}

/* Hide original userpage text link */

#p-vector-user-menu-userpage { display: none !important; }

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

/* Hide the right-side person-icon user menu dropdown */

~~#vector-appearance,~~

#vector-user-links-dropdown { display: none !important; }

~~#vector-appearance-pinned-container,~~

~~#vector-appearance-unpinned-container,~~

~~.mw-portlet-appearance,~~

~~#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~~ */

/* ── Custom username dropdown ── */

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

#gr-user-dropdown {

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

position: relative;

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

display: inline-block;

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

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

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

}

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

#gr-user-trigger {

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

display: inline-flex;

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

align-items: center;

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

gap: 6px;

background: rgba(255,255,255,0.12);

border: none;

color: #fff;

font-size: 0.9em;

font-weight: 500;

padding: 6px 12px;

border-radius: 6px;

cursor: pointer;

white-space: nowrap;

}

#gr-user-trigger:hover { background: rgba(255,255,255,0.2); }

#gr-user-trigger .gr-caret { font-size: 0.7em; opacity: 0.8; }

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

#gr-user-menu {

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

position: absolute;

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

top: calc(100% + 6px);

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

right: 0;

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

min-width: 180px;

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

background: #fff;

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

border: 1px solid #e0d8d2;

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

border-radius: 8px;

~~/* OOUI dropdown items */~~

box-shadow: 0 6px 24px rgba(0,0,0,0.14);

~~.oo-ui-menuSelectWidget a~~,

padding: 6px;

.~~oo-ui-menuOptionWidget,~~

z-index: 1000;

~~/* Codex menu */~~

display: none;

~~.cdx~~-~~menu__listbox .cdx-menu-item__content,~~

~~.cdx-menu__listbox a {~~

~~color~~: ~~#202122 !important~~;

}

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

#gr-user-menu.gr-open { display: block; }

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

#gr-user-menu a {

color: #~~f57c00 !important~~;

display: flex;

~~background~~: ~~#fdf3ed !important~~;

align-items: center;

gap: 10px;

padding: 10px 12px;

color: #2c1810;

text-decoration: none;

font-size: 0.92em;

border-radius: 6px;

white-space: nowrap;

}

#gr-user-menu a:hover { background: #f7f1ed; }

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

.vector-user-links a {

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

color: #1C1A17 !important;

~~min-width~~: 0 !important; ~~flex~~-~~grow: 0 !important;~~

}

~~position: relative !important; margin~~: 0 !important;

.vector-user-links-main {

display: none !important;

}

.~~cdx~~-~~search~~-~~input__input,~~ .~~cdx~~-~~text~~-~~input__input~~ {

.gr-phone-row { margin-bottom: 12px; }

~~background~~: ~~#ffffff !important~~; ~~border~~: ~~none !important~~;

.gr-phone-label {

~~border~~-~~radius~~: ~~8px !important; color: #202124 !important~~;

display: block;

~~padding~~: 6px ~~10px !important; font-family: system-ui, sans-serif !important~~;

font-weight: 700;

font-size: 0.875rem;

margin-bottom: 6px;

}

.~~cdx~~-~~search~~-~~input__input~~::~~placeholder,~~

.gr-phone-inputs {

~~.cdx~~-~~text-input__input~~:~~:placeholder { color: rgba(32,33,36,0.5) !important~~; }

display: flex;

~~.cdx-search-input__end-button { background~~: ~~transparent !important~~; ~~border~~: ~~none !important~~; }

gap: 8px;

~~.cdx~~-~~typeahead-search~~, ~~.cdx~~-~~typeahead-search__menu~~, ~~.cdx-menu {~~

align-items: stretch;

~~background: #ffffff !important; color: #202124 !important;~~

height: 48px;

~~border~~-~~radius: 10px !important; box~~-~~shadow: 0 6px 24px rgba(0~~,0,~~0,0.2) !important;~~

position: relative;

~~filter: none !important~~;

font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}

.~~cdx~~-~~menu~~-~~item, .cdx-menu~~-~~item * { color~~: ~~#202124 !important~~; ~~filter~~: ~~none !important~~; }

.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}

~~.cdx-menu-item~~:~~hover, .cdx-menu-item--active, .cdx-menu-item--selected { background~~: #~~f1f3f4 !important~~; }

.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}

.~~cdx~~-~~menu~~-~~item__icon, .cdx~~-~~menu-item__icon svg,~~

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

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

/* ── Country trigger button ── */

*

.gr-country-trigger {

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

display: flex;

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

align-items: center;

* without the dotted border, clearly below chapter level.

gap: 8px;

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

width: 101px;

.gr-~~gadya,~~

border-radius: 12px;

~~.verse-line.gr-gadya,~~

padding: 12px;

~~.gr-verse~~-~~text.gr-gadya~~ {

border: 1px solid #CED4DA;

display: ~~block !important~~;

white-space: nowrap;

~~font~~-~~size~~: ~~0.96em !important~~;

background: #fff;

~~font-weight~~: ~~600 !important~~;

~~font-style~~: ~~normal !important~~;

~~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~~;

}

.gr-country-trigger:hover { border-color: #72777d; }

.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }

.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }

.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }

/* ── ~~Avataranika ────────────────────────────────────────────────~~ */

/* ── Dropdown ── */

.gr-~~avataranika~~ {

.gr-country-dropdown {

~~font~~-~~style~~: ~~italic~~; ~~color~~: #~~444~~;

position: absolute;

~~margin~~: 0 0 0.~~5em 0~~.~~5em~~; padding~~-left~~: ~~0.6em~~;

top: calc(100% + 4px); left: 0;

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

z-index: 9999;

width: 280px;

background: #fff;

border: 1px solid #a2a9b1;

border-radius: 4px;

box-shadow: 0 4px 16px rgba(0,0,0,0.12);

}

.gr-country-search {

width: 100%; box-sizing: border-box;

padding: 8px 12px;

border: none; border-bottom: 1px solid #eee;

font-size: 0.9rem; outline: none;

}

.gr-country-list { max-height: 240px; overflow-y: auto; }

.gr-country-option {

display: flex; align-items: center; gap: 8px;

padding: 8px 12px; cursor: pointer; font-size: 0.9rem;

}

.gr-country-option:hover { background: #f8f9fa; }

.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }

.gr-country-name { flex: 1; color: #202122; }

.gr-country-dial { color: #54595d; font-size: 0.85rem; }

/* ~~── Vyakhya-pada ───────────────────────────────────────────────~~ */

.gr-phone-national:focus {

.gr-~~vyakhya~~-~~pada~~ {

outline: none; border-color: #4A433A;

font-~~size~~: 0.~~88em~~; ~~color~~: ~~#555~~;

}

background: ~~#fafafa~~; ~~border~~: ~~1px solid #e8e0d0~~;

/* Search Results Bar styles */

~~border~~-~~radius~~: ~~4px~~; ~~padding~~: 0.~~5em 0.8em~~;

.gr-search-hl-mobile {

~~margin~~: ~~0.5em 0~~; ~~line~~-~~height~~: ~~1.5~~; white-space: ~~pre-wrap~~;

position: fixed;

top: 105px;

left: 0px;

right: 0px;

z-index: 10200;

background: rgb(181, 69, 27);

color: rgb(255, 255, 255); display: flex;

align-items: center;

justify-content: space-around;

font-family: "Noto Sans Devanagari", system-ui, sans-serif;

box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;

height: 52px;

box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;

padding: 5px 4px !important;

gap: 20px !important;

}

.gr-search-hl-mobile .gr-search-bar-btn {

height: 48px;

width: 48px;

border: none;

background: transparent;

cursor: pointer;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

position: relative;

transition: background 0.15s;

color: #fff;

font-size: 12px;

font-family: "Noto Sans Devanagari";

gap: 8px;

white-space: nowrap;

}

/* ~~── Vyakhya-gadya ──────────────────────────────────────────────~~ */

/* Hide Notes FAB, doc nav FAB and Reader toolbar on Updates/Help/About pages */

.gr-~~vyakhya~~-~~gadya {~~

body.page-My_wiki_Updates #gra-toggle,

~~font~~-~~weight~~: ~~bold~~; ~~font~~-~~size: 0~~.~~95em; text~~-~~align: center;~~

body.page-My_wiki_Updates #se-docnav-btn,

~~color:~~ #~~8b1a1a; margin: 0~~.~~8em 0 0~~.~~3em 0; letter~~-~~spacing~~: ~~0.03em~~;

body.page-My_wiki_Updates #gr-static-bar,

body.page-My_wiki_Help #gra-toggle,

body.page-My_wiki_Help #se-docnav-btn,

body.page-My_wiki_Help #gr-static-bar,

body.page-My_wiki_About #gra-toggle,

body.page-My_wiki_About #se-docnav-btn,

body.page-My_wiki_About #gr-static-bar { display: none; }

/* Welcome Page */

/* Hide all chrome on Welcome */

body.page-Welcome #mw-navigation,

body.page-Welcome #mw-panel,

body.page-Welcome #footer,

body.page-Welcome .mw-footer,

body.page-Welcome #siteSub,

body.page-Welcome #contentSub,

body.page-Welcome #firstHeading,

body.page-Welcome .mw-page-title-main,

body.page-Welcome .mw-indicators,

body.page-Welcome .vector-header,

body.page-Welcome .vector-page-toolbar,

body.page-Welcome .vector-sticky-header,

body.page-Welcome .mw-page-container,

body.page-Welcome #gr-static-bar,

body.page-Welcome #se-docnav-btn,

body.page-Welcome #gra-toggle,

body.page-Welcome #se-scrolltop {

display: none !important;

}

body.page-Welcome .mw-page-container

/* ~~── Author note ────────────────────────────────────────────────~~ */

/* Put the banner directly on the body of the Welcome page */

.gr-~~author-note~~ {

body.page-Welcome {

~~font~~-~~style~~: ~~italic~~; ~~color~~: ~~#666~~; ~~text~~-~~align~~: ~~center~~;

~~font~~-~~size~~: ~~0.9em~~; ~~margin~~: ~~0.8em 0 0.4em 0~~;

background-size: contain !important;

~~border~~-~~top~~: ~~1px solid~~ #~~ddd~~; ~~padding-top~~: ~~0.4em~~;

background-repeat: no-repeat !important;

background-position: center center !important;

background-attachment: fixed !important;

background-color: #3a0d0d !important;

cursor: pointer;

}

/* ~~── Leading bhashya ────────────────────────────────────────────~~ */

/* Make the content area transparent so the body banner shows through */

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

body.page-Welcome #content,

body.page-Welcome .mw-body,

body.page-Welcome #mw-content-text,

body.page-Welcome .mw-parser-output,

body.page-Welcome #bodyContent {

background: transparent !important;

border: none !important;

box-shadow: none !important;

min-height: 100vh;

}

/* Kill the white everywhere it's painted */

body.page-Welcome,

body.page-Welcome .mw-page-container,

body.page-Welcome .mw-page-container-inner,

body.page-Welcome .mw-content-container,

body.page-Welcome #content,

body.page-Welcome .mw-body,

body.page-Welcome #mw-content-text,

body.page-Welcome .mw-parser-output,

body.page-Welcome #bodyContent {

background: transparent !important;

border: none !important;

box-shadow: none !important;

margin: 0 !important;

padding: 0 !important;

}

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

/* Put the banner on the body and force it full height */

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

body.page-Welcome {

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

~~display~~: ~~block~~; ~~margin~~: ~~0.1em 0~~;

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: center center !important;

background-attachment: fixed !important;

background-color: #3a0d0d !important;

min-height: 100vh !important;

cursor: pointer;

}

~~.gr~~-~~verse~~-~~type~~-~~mantra .gr~~-~~verse~~-~~text,~~

/* ---- Minerva (mobile) splash for Welcome ---- */

~~.verse~~-~~block[data~~-~~type="mantra"] .verse~~-~~line { font-size: 1.05em; }~~

~~.gr-verse-type-sutra .gr-verse-text,~~

~~.verse-block[data-type="sutra"] .verse-line { font-style: normal; font-weight: 600; color: #b5451b; }~~

/* ~~── Bhashyam / commentary prose ───────────────────────────────~~ */

/* Hide all chrome on Welcome */

.gr-~~bhashyam~~, .~~commentary~~-~~bhashyam {~~

body.skin-minerva.page-Welcome .header-container,

~~color:~~ #~~222; font~~-~~style: normal; line~~-~~height: 1~~.~~75; margin: 0~~.~~3em 0 0~~.~~5em 0~~;

body.skin-minerva.page-Welcome .minerva-header,

body.skin-minerva.page-Welcome #mw-mf-page-center > .header-container,

body.skin-minerva.page-Welcome .banner-container,

body.skin-minerva.page-Welcome .pre-content,

body.skin-minerva.page-Welcome #page-actions,

body.skin-minerva.page-Welcome .page-actions-menu,

body.skin-minerva.page-Welcome .last-modified-bar,

body.skin-minerva.page-Welcome .post-content,

body.skin-minerva.page-Welcome #footer,

body.skin-minerva.page-Welcome .minerva-footer,

body.skin-minerva.page-Welcome .navigation-drawer,

body.skin-minerva.page-Welcome .mw-page-title-main,

body.skin-minerva.page-Welcome #section_0,

body.skin-minerva.page-Welcome .pre-content .mw-ui-icon,

body.skin-minerva.page-Welcome h1.mw-first-heading {

display: none !important;

}

/* ~~── Padapatha ──────────────────────────────────────────────────~~ */

/* Kill white on all Minerva container surfaces */

.gr-~~padapatha~~ { ~~font-size~~: ~~0.9em~~; ~~color~~: ~~#555~~; margin: 0~~.2em 0 0.3em 0.8em~~; ~~font-style~~: ~~normal~~; }

body.skin-minerva.page-Welcome,

body.skin-minerva.page-Welcome #mw-mf-viewport,

body.skin-minerva.page-Welcome #mw-mf-page-center,

body.skin-minerva.page-Welcome #content,

body.skin-minerva.page-Welcome .mw-body,

body.skin-minerva.page-Welcome #mw-content-text,

body.skin-minerva.page-Welcome .mw-parser-output,

body.skin-minerva.page-Welcome #bodyContent {

background: transparent !important;

border: none !important;

box-shadow: none !important;

margin: 0 !important;

padding: 0 !important;

}

/* ~~── Devatachandas / vargikarana ───────────────────────────────~~ */

/* Put the banner on the body, full height */

.gr-~~devatachandas~~ { ~~font~~-~~size~~: 0.~~82em~~; ~~color~~: ~~#777~~; ~~font~~-~~style~~: ~~normal~~; ~~margin~~: ~~0.4em 0 0.2em 0~~; }

body.skin-minerva.page-Welcome {

~~.gr-vargikarana~~ ~~{ font~~-~~size: 0.82em;~~ color: #~~888~~; ~~font~~-~~style~~: ~~normal~~; ~~margin~~: 0.~~5em 0 0~~.~~1em 0~~; }

background-size: contain !important;

background-repeat: no-repeat !important;

background-position: center center !important;

background-color: #3a0d0d !important;

min-height: 100vh !important;

cursor: pointer;

}

/* from LocalSettings line 393 */

/* ===== HAMBURGER / SIDEBAR ===== */

#mw-sidebar-button,

.vector-main-menu,

.vector-main-menu-container,

.vector-main-menu-landmark,

#vector-main-menu-dropdown {

display:none !important;

}

/* ~~── Uvaaca ─────────────────────────────────────────────────────~~ */

/* ===== FOOTER ===== */

.gr-~~uvaaca~~, ~~.uvaaca~~ {

#footer,

~~color: #b5451b; font-weight: 600; font-size: 0.92em;~~

.mw-footer,

~~margin: 0.5em 0 0.2em 0;~~ display: ~~block~~;

footer {

display:none !important;

}

/* ~~── Responsive ─────────────────────────────────────────────────~~ */

/* ===== LOGIN / SIGNUP PAGE CLEANUP ===== */

~~@media (max~~-~~width: 600px) {~~

body.page-Special_UserLogin #mw-sidebar-button,

.mw-~~parser~~-~~output { font~~-~~size: 16px; }~~

body.page-Special_UserLogin .vector-main-menu,

.mw-~~parser~~-~~output h2~~, .mw-~~parser~~-~~output~~ .mw-~~heading2 h2 { width: 100% !important; }~~

body.page-Special_UserLogin .vector-page-toolbar,

.mw-~~parser~~-~~output h3~~, .mw-~~parser~~-~~output~~ .mw-~~heading3 h3 { width: 100% !important; }~~

body.page-Special_UserLogin .vector-page-tools,

.~~nyaya~~-~~title,~~ .~~prasna~~-~~title { width: 100%; }~~

body.page-Special_CreateAccount #mw-sidebar-button,

.~~bhashyam~~-~~block,~~ .~~teeka~~-~~block { margin~~-~~left: 10px; }~~

body.page-Special_CreateAccount .vector-main-menu,

.~~toc { max~~-~~width: 100%; }~~

body.page-Special_CreateAccount .vector-page-toolbar,

.gr-~~gadya~~ { ~~width~~: ~~90%~~; }

body.page-Special_CreateAccount .vector-page-tools,

body.page-Special_PasswordReset #mw-sidebar-button,

body.page-Special_PasswordReset .vector-main-menu,

body.page-Special_PasswordReset .vector-page-toolbar,

body.page-Special_PasswordReset .vector-page-tools {

display:none !important;

}

/* from LocalSettings line 436 */

/* Kill every possible appearance container */

#vector-appearance,

#vector-appearance-dropdown,

#vector-appearance-pinned-container,

#vector-appearance-unpinned-container,

[id*="appearance-dropdown"],

[id*="appearance"][class*="vector"],

display:none !important;

visibility:hidden !important;

width:0 !important;

height:0 !important;

overflow:hidden !important;

margin:0 !important;

padding:0 !important;

}

/* Remove empty slot in header */

.vector-page-tools,

.vector-page-toolbar,

.vector-header-end {

gap:0 !important;

}

/* from LocalSettings line 469 */

/* Login page only */

body.page-Special_UserLogin .vector-search-box,

body.page-Special_UserLogin #p-search,

body.page-Special_UserLogin .search-toggle,

body.page-Special_UserLogin .vector-search-box-vue {

display:none !important;

}

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

/* Show site wordmark/logo if hidden */

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

body.page-Special_UserLogin .mw-logo,

.~~mw-parser~~-~~output~~ .~~verse~~-~~block~~,

body.page-Special_UserLogin .vector-logo,

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

body.page-Special_UserLogin .vector-header-start {

display:flex !important;

visibility:visible !important;

}

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

/* Cleaner top bar */

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

body.page-Special_UserLogin .vector-header {

~~font~~-~~size: 0.9em;~~

justify-content:space-between !important;

~~font-weight: 700;~~

padding:0 16px !important;

~~color: #6a3e00;~~

~~margin~~: ~~0.35em 0 0.15em;~~

~~font~~-~~family: inherit;~~

~~border: none~~;

padding: 0;

}

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

/* Match Main_Page branded header bar */

.gr-~~vyakhya~~-~~gadya { margin: 0.2em 0; line~~-~~height: 1~~.~~6; }~~

body.page-Special_UserLogin .vector-header-container .mw-header {

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

background: #b5451b !important;

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

}

body.page-Special_UserLogin .mw-logo-wordmark,

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

body.page-Special_UserLogin .mw-logo-wordmark strong {

~~.gr~~-~~vyakhya~~-~~para~~ {

color: #fff !important;

~~margin~~: ~~0 0 0.5em 0~~;

}

~~line~~-~~height: 1~~.~~65;~~

body.page-Special_UserLogin .mw-logo-container {

color: #~~444~~;

color: #fff !important;

}

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

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

/* Single logo: favicon only (no quill gr-header-icon) */

.~~teeka~~-~~body~~ .~~shloka~~-~~block~~ {

body.page-Special_UserLogin .gr-header-icon {

~~margin: 0.4em 0;~~

display: none !important;

~~padding: 0.3em 0.6em;~~

~~border-left: 3px solid #e8c88a;~~

~~background~~: ~~transparent~~;

}

.~~teeka~~-~~body~~ .~~shloka~~-~~line~~ {

body.page-Special_UserLogin .mw-logo-icon {

~~color~~: ~~#8a4a00~~;

display: inline-block !important;

~~font-style~~: ~~italic~~;

width: 36px !important;

~~font~~-~~size~~: ~~0.97em~~;

height: 36px !important;

object-fit: contain !important;

}

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

/* Hide Create Account and Login Links in header starts */

~~TEEKA VIEW MODES~~

body.page-Special_UserLogin .vector-header-end {

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

display: none !important;

}

/* Hide Create Account and Login Links in header end */

gr-~~standalone — direct URL access~~: ~~plain reading view~~

/* from LocalSettings line 530 */

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

body.page-Special_PasswordReset .vector-search-box,

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

body.page-Special_PasswordReset #p-search,

body.page-Special_PasswordReset .search-toggle,

body.page-Special_PasswordReset .vector-search-box-vue {

display:none !important;

}

body.page-Special_PasswordReset .mw-logo,

body.page-Special_PasswordReset .vector-logo,

body.page-Special_PasswordReset .vector-header-start {

display:flex !important;

visibility:visible !important;

}

body.page-Special_PasswordReset .vector-header {

justify-content:space-between !important;

padding:0 16px !important;

}

body.page-Special_PasswordReset .vector-header-container .mw-header {

background: #b5451b !important;

}

body.page-Special_PasswordReset .mw-logo-wordmark,

body.page-Special_PasswordReset .mw-logo-wordmark strong {

color: #fff !important;

}

body.page-Special_PasswordReset .mw-logo-container {

color: #fff !important;

}

body.page-Special_PasswordReset .gr-header-icon {

display: none !important;

}

body.page-Special_PasswordReset .mw-logo-icon {

display: inline-block !important;

width: 36px !important;

height: 36px !important;

object-fit: contain !important;

}

body.page-Special_PasswordReset .vector-header-end {

display: none !important;

}

body.page-Special_PasswordReset .vector-page-toolbar {

display: none !important;

}

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

/* from LocalSettings line 584 */

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

body.page-Special_CreateAccount .vector-search-box,

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

body.page-Special_CreateAccount #p-search,

display: ~~block~~;

body.page-Special_CreateAccount .search-toggle,

body.page-Special_CreateAccount .vector-search-box-vue {

display:none !important;

}

body.page-Special_CreateAccount .mw-logo,

body.page-Special_CreateAccount .vector-logo,

body.page-Special_CreateAccount .vector-header-start {

display:flex !important;

visibility:visible !important;

}

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

body.page-Special_CreateAccount .vector-header {

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

justify-content:space-between !important;

~~background~~: ~~none !important;~~

padding:0 16px !important;

~~border: none~~ !important;

padding: 0 ~~!important;~~

~~border-radius: 0~~ !important;

}

body.gr-~~standalone~~ .~~teeka~~-~~title~~ {

body.page-Special_CreateAccount .vector-header-container .mw-header {

~~display~~: ~~none~~ !important;

background: #b5451b !important;

}

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

body.page-Special_CreateAccount .mw-logo-wordmark,

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

body.page-Special_CreateAccount .mw-logo-wordmark strong {

~~border-bottom~~: ~~1px solid~~ #~~f0e8d8;~~

color: #fff !important;

~~padding-bottom: 0.8em;~~

~~margin-bottom: 0.8em~~;

}

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

body.page-Special_CreateAccount .mw-logo-container {

~~border-bottom~~: ~~none~~;

color: #fff !important;

}

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

body.page-Special_CreateAccount .gr-header-icon {

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

display: none !important;

~~border-left: none;~~

~~padding-left: 0;~~

~~background~~: none;

}

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

body.page-Special_CreateAccount .mw-logo-icon {

~~color~~: ~~#be100e~~;

display: inline-block !important;

~~font~~-~~style~~: ~~italic~~;

width: 36px !important;

height: 36px !important;

object-fit: contain !important;

}

~~/* Vyakhya headings still show, but lighter */~~

body.page-Special_CreateAccount .vector-header-end {

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

display: none !important;

~~color~~: ~~#a07040;~~

~~font-size: 0.95em;~~

~~margin-top: 0.8em~~;

}

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

/* from LocalSettings line 635 */

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

body.page-Special_UserLogin {

~~Explicit declarations here for clarity and override safety~~. */

background: #FAF6EE !important;

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

}

~~background~~: ~~#fffdf5~~ !important;

body.page-Special_UserLogin .mw-page-container,

border: 1px solid #~~f0e0b0~~ !important;

body.page-Special_UserLogin .mw-page-container-inner,

padding: ~~6px 10px~~ 8px !important;

body.page-Special_UserLogin .mw-body {

border-radius: ~~5px~~ !important;

background: transparent !important;

}

body.page-Special_UserLogin .mw-body-header,

body.page-Special_UserLogin .vector-page-titlebar,

body.page-Special_UserLogin #firstHeading {

display: none !important;

}

body.page-Special_UserLogin #content {

max-width: 440px !important;

margin: 28px auto 48px !important;

padding: 0 16px !important;

float: none !important;

}

body.page-Special_UserLogin #bodyContent,

body.page-Special_UserLogin .mw-body-content {

margin: 0 !important;

padding: 0 !important;

}

body.page-Special_UserLogin #userloginprompt:empty {

display: none !important;

}

body.page-Special_UserLogin .mw-body-content > .mw-ui-container {

background: #fff;

border-radius: 16px;

box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);

padding: 32px 32px 28px;

box-sizing: border-box;

}

body.page-Special_UserLogin .mw-body-content > .mw-ui-container::before {

content: "Login/Signup";

display: block;

text-align: center;

font-size: 24px;

color: #1C1A17;

margin-bottom: 22px;

font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}

body.page-Special_UserLogin #userloginForm,

body.page-Special_UserLogin #userloginForm form {

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_UserLogin .mw-htmlform {

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_UserLogin .mw-htmlform-field {

margin-bottom: 18px;

}

body.page-Special_UserLogin .cdx-label,

body.page-Special_UserLogin .mw-htmlform-field > label {

display: block;

font-size: 0.875rem;

color: #1C1A17;

margin-bottom: 6px;

font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;

}

/* Codex: border on wrapper only (inner input has its own border = double line) */

body.page-Special_UserLogin .cdx-text-input {

width: 100% !important;

max-width: 100% !important;

box-sizing: border-box !important;

border-radius: 10px !important;

border: 1px solid #e5e7eb !important;

background: #fff !important;

min-height: 46px;

}

body.page-Special_UserLogin .cdx-text-input__input {

width: 100% !important;

box-sizing: border-box !important;

border: none !important;

border-radius: 0 !important;

box-shadow: none !important;

outline: none !important;

background: transparent !important;

padding: 12px 14px !important;

font-size: 1rem !important;

min-height: 44px;

}

body.page-Special_UserLogin .cdx-text-input:focus-within {

border-color: #ffffff !important;

box-shadow: rgba(177, 74, 46, 0.1) !important;

}

body.page-Special_UserLogin .cdx-text-input__input:focus {

outline: none !important;

border: none !important;

box-shadow: none !important;

}

/* Fallback if inputs are not wrapped in Codex */

body.page-Special_UserLogin input#wpName1,

body.page-Special_UserLogin input#wpPassword1 {

width: 100% !important;

box-sizing: border-box !important;

border-radius: 10px !important;

border: 1px solid #e5e7eb !important;

padding: 12px 14px !important;

font-size: 1rem !important;

min-height: 46px;

}

body.page-Special_UserLogin input#wpName1:focus,

body.page-Special_UserLogin input#wpPassword1:focus {

outline: none !important;

border-color: #b5451b !important;

box-shadow: rgba(177, 74, 46, 0.1) !important;

}

body.page-Special_UserLogin .mw-userlogin-rememberme {

display: none !important;

}

body.page-Special_UserLogin .gr-login-forgot-password {

text-align: left;

margin: 2px 0 14px;

padding: 0;

}

body.page-Special_UserLogin .gr-login-forgot-password a {

color: #b5451b !important;

font-weight: 600 !important;

font-size: 0.9rem;

text-decoration: none !important;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_UserLogin .gr-login-forgot-password a:hover {

text-decoration: underline !important;

}

body.page-Special_UserLogin .mw-htmlform-field:has(#wpLoginAttempt),

body.page-Special_UserLogin .mw-htmlform-submit {

margin-top: 8px;

margin-bottom: 0;

}

body.page-Special_UserLogin #wpLoginAttempt,

body.page-Special_UserLogin #wpLoginAttempt.cdx-button {

width: 100% !important;

display: flex !important;

justify-content: center;

align-items: center;

background: #b5451b !important;

border: none !important;

border-radius: 10px !important;

color: #fff !important;

font-weight: 600 !important;

font-size: 1rem !important;

padding: 14px 20px !important;

min-height: 48px;

cursor: pointer;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_UserLogin #wpLoginAttempt:hover {

background: #A33C20 !important;

}

body.page-Special_UserLogin .mw-userlogin-help,

body.page-Special_UserLogin .mw-form-related-link-container,

body.page-Special_UserLogin #mw-createaccount,

body.page-Special_UserLogin #mw-createaccount-cta {

font-size: 0.9rem;

margin-top: 12px;

}

body.page-Special_UserLogin .mw-userlogin-help a,

body.page-Special_UserLogin .mw-form-related-link-container a,

body.page-Special_UserLogin #mw-createaccount a,

body.page-Special_UserLogin #mw-createaccount-cta a {

color: #b5451b !important;

font-weight: 600 !important;

text-decoration: none !important;

}

body.page-Special_UserLogin .mw-userlogin-help a:hover,

body.page-Special_UserLogin .mw-form-related-link-container a:hover,

body.page-Special_UserLogin #mw-createaccount a:hover,

body.page-Special_UserLogin #mw-createaccount-cta a:hover {

text-decoration: underline !important;

}

body.page-Special_UserLogin .cdx-message,

body.page-Special_UserLogin .mw-message-box {

border-radius: 10px;

margin-bottom: 16px;

}

body.page-Special_UserLogin .gr-google-login {

margin: 20px 0 4px;

padding: 0;

}

body.page-Special_UserLogin .gr-google-login-icon {

display: inline-flex;

flex-shrink: 0;

line-height: 0;

margin-top: -3px;

}

body.page-Special_UserLogin .gr-google-login-icon svg {

display: block;

}

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

body.page-Special_UserLogin .gr-google-login-btn {

display: ~~block~~ !important;

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

width: 100%;

box-sizing: border-box;

padding: 12px;

min-height: 44px;

border-radius: 12px;

border: 1px solid #e5e7eb;

background: #F3F4F6;

color: #1C1A17;

font-size: 14px;

text-decoration: none !important;

font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;

}

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

body.page-Special_UserLogin .gr-google-login-btn:hover {

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

background: #f9fafb;

~~display~~: ~~none~~;

border-color: #d1d5db;

}

body.page-Special_UserLogin .gr-google-login-divider {

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

display: flex;

~~/* Show styled until JS classifies */~~

align-items: center;

.gr-~~teeka~~-~~page .teeka~~-~~block~~ {

gap: 12px;

~~background~~: #~~fffdf5~~;

margin: 18px 0 16px;

~~border~~: ~~1px solid #f0e0b0~~;

color: #F4ECDF;

font-size: 14px;

font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;

}

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

body.page-Special_UserLogin .gr-google-login-divider::before,

~~Common~~.~~css — additions for v7 (append to existing Common.css)~~

body.page-Special_UserLogin .gr-google-login-divider::after {

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

content: "";

flex: 1;

~~/* ── TOC: Remove bold from all non~~-~~active level rules ─────────────~~

height: 1px;

* Common.~~js v7 sets font-weight:400 !important on every inactive~~

background: #F4ECDF;

* item via inline style, so the level-~~1 bold rule below would be~~

* overridden anyway. These declarations make the CSS self-~~consistent~~

* and work even if JS hasn't run yet. Active-~~item bold is handled~~

* entirely by JS inline style. ──────────────────────────────────── */

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

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

~~font-weight~~: ~~400 !important~~; ~~/* was 600 — now normal~~; ~~JS makes active bold */~~

~~color~~: #~~3a1f00 !important~~;

}

.~~vector~~-~~toc .vector~~-~~toc~~-~~level-2 > .vector-toc-link,~~

.gr-phone-row { margin-bottom: 12px; }

.~~vector-toc .vector-toc-level-2 > .vector~~-~~toc~~-link * {

.gr-phone-label {

font-weight: ~~400 !important~~;

display: block;

~~color~~: ~~#5a3a00 !important~~;

font-weight: 700;

font-size: 0.875rem;

margin-bottom: 6px;

}

.~~vector~~-~~toc .vector~~-~~toc-level-3 > .vector-toc-link,~~

.gr-phone-inputs {

~~.vector~~-~~toc .vector-toc-level-3 > .vector-toc-link * {~~

display: flex;

~~font-weight~~: ~~400 !important~~;

gap: 8px;

~~color~~: ~~#7a5010 !important~~;

align-items: stretch;

font-~~size~~: ~~0.95em !important~~;

height: 48px;

position: relative;

font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}

.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}

.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}

/* ~~Active overrides — must come AFTER level rules.~~

/* ── Country trigger button ── */

* JS inline style also handles this; CSS is a belt-and-braces backup. */

.gr-country-trigger {

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

display: flex;

~~.vector-toc .vector-toc-list-item-active .vector-toc-link * {~~

align-items: center;

~~color~~: #~~f57c00 !important~~;

gap: 8px;

~~font~~-~~weight~~: ~~700 !important~~;

width: 101px;

border-radius: 12px;

padding: 12px;

border: 1px solid #CED4DA;

white-space: nowrap;

background: #fff;

}

.gr-country-trigger:hover { border-color: #72777d; }

.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }

.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }

.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }

/* ── ~~TOC: विषयसूची title label ──────────────────────────────────~~ */

/* ── Dropdown ── */

~~/* Adishila doesn't cover ASCII fallback well at tiny sizes —~~

.gr-country-dropdown {

* keep the title in system-ui as before. The JS sets the text. */

position: absolute;

~~.vector~~-~~toc .vector~~-~~toc~~-~~title {~~

top: calc(100% + 4px); left: 0;

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

z-index: 9999;

width: 280px;

background: #fff;

border: 1px solid #a2a9b1;

border-radius: 4px;

box-shadow: 0 4px 16px rgba(0,0,0,0.12);

}

.gr-country-search {

~~/* ── TOC~~: ~~मूल / उल्लेख nav bar ────────────────────────────────── */~~

width: 100%; box-sizing: border-box;

~~#gr~~-~~toc~~-~~doc~~-~~nav {~~

padding: 8px 12px;

~~/* Layout via JS inline style~~; ~~these are safety defaults */~~

border: none; border-bottom: 1px solid #eee;

font-~~family~~: ~~'Adishila', 'Noto Serif Devanagari', serif~~;

font-size: 0.9rem; outline: none;

}

#gr-~~toc~~-~~doc~~-~~nav a~~:~~focus~~ {

.gr-country-list { max-height: 240px; overflow-y: auto; }

~~outline~~: ~~2px solid #f57c00~~;

.gr-country-option {

~~outline~~-~~offset~~: ~~1px~~;

display: flex; align-items: center; gap: 8px;

padding: 8px 12px; cursor: pointer; font-size: 0.9rem;

}

.gr-country-option:hover { background: #f8f9fa; }

.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }

.gr-country-name { flex: 1; color: #202122; }

.gr-country-dial { color: #54595d; font-size: 0.85rem; }

~~/* ── About / Main_Page: hide sidebar TOC panel entirely ───────────~~

.gr-phone-national:focus {

* These pages use __NOTOC__ in wikitext; the sidebar TOC should not

outline: none; border-color: #4A433A;

* appear. Vector 2022 may still render the pinned container empty —

* hide it to avoid a blank sidebar gap. ~~─────────────────────────── */~~

~~body.page~~-~~My_wiki~~-~~About .vector-sidebar,~~

~~body.page-My_wiki-About .vector-sticky-pinned-container,~~

~~body.page-My_wiki-About #vector-toc-pinned-container,~~

~~body.page-My_wiki-About .mw-table-of-contents-container~~ {

~~display~~: none ~~!important~~;

}

/* ~~── Ullekha (references index) page ────────────────────────────~~ */

/* OTP verification screen */

.gr-~~ullekha~~-~~back~~ {

#gr-otp-screen { padding: 8px 0; }

font-size: 0.~~88em~~;

.gr-otp-title { font-size: 24px; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif; text-align: center; margin-bottom: 12px; color: #1C1A17}

color: #~~888~~;

.gr-otp-desc { font-size: 16px; text-align: center; color: #1C1A17; margin-bottom: 20px; line-height: 1.5; font-family: "Noto Sans Devanagari" }

margin-bottom: ~~0.5em~~;

.gr-otp-label { display: block; font-size: 16px; margin-bottom: 8px; font-family: "Noto Sans Devanagari"; color: #1C1A17}

.gr-otp-boxes {

display: flex;

gap: 8px;

margin-bottom: 20px;

justify-content: center;

}

.gr-~~ullekha~~-~~back a~~ { ~~color~~: #~~b04b00~~; ~~text~~-~~decoration~~: none; }

.gr-otp-box {

.gr-~~ullekha~~-~~back a~~:~~hover~~ { ~~text~~-~~decoration~~: ~~underline~~; }

flex: 1;

min-width: 0;

max-width: 52px;

width: 52px;

height: 52px;

text-align: center;

font-size: 20px;

font-weight: 500;

border: 1px solid #CED4DA;

border-radius: 12px;

outline: none;

padding: 0;

box-sizing: border-box;

}

.gr-otp-box:focus { border-color: #4A433A; }

.gr-~~ullekha~~-~~summary~~ {

.gr-continue-btn:not(:disabled):hover { background: #B14A2E; }

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

.gr-continue-btn:disabled { opacity: 0.6; cursor: not-allowed; }

color: #~~666~~;

.gr-resend-row { text-align: center; font-size: 14px; color: #54595d; }

~~margin~~-~~bottom~~: ~~1.5em~~;

.gr-link-btn {

font-~~style~~: ~~italic~~;

background: none; border: none; padding: 0;

color: #B14A2E; cursor: pointer; font-size: inherit;

text-decoration: none;

}

.gr-link-btn:hover { text-decoration: underline; }

.gr-~~ullekha~~-~~source~~ {

/* Login button on phone screen */

~~margin~~-~~bottom~~: ~~2em~~;

.gr-login-btn, .gr-continue-btn {

border: 1px solid #~~e8d4a0~~;

width: 100%; padding: 16px 8px; border: none; gap: 8px;

border-radius: 6px;

border-radius: 12px; background: #B14A2E;

padding: 10px 14px 12px;

color: #fff; font-size: 16px; font-weight: 500;

~~background~~: #~~fffdf5~~;

cursor: pointer; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;

}

.gr-login-btn:hover { background: #993C1D; }

.gr-otp-hidden-field {

position: absolute !important;

width: 1px !important;

height: 1px !important;

overflow: hidden !important;

clip: rect(0,0,0,0) !important;

white-space: nowrap !important;

}

.gr-otp-error {

background: #fce8e8;

border: 1px solid #e57373;

border-radius: 6px;

color: #b71c1c;

padding: 10px 14px;

margin-bottom: 12px;

font-size: 14px;

text-align: center;

}

.gr-login-checks{display:flex;justify-content: space-between; gap:8px;margin:12px 0;}

.gr-check-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#1C1A17;cursor:pointer; font-family: "Noto Sans Devanagari"}

.gr-check-label input{width:16px;height:16px;accent-color:#B14A2E;cursor:pointer; font-family: "Noto Sans Devanagari"}

@media (max-width: 480px) {

body.page-Special_UserLogin .mw-body-content > .mw-ui-container {

padding: 24px 20px 20px;

border-radius: 12px;

}

body.page-Special_UserLogin #content {

margin: 16px auto 32px !important;

padding: 0 12px !important;

}

.gr-~~ullekha~~-~~source~~-~~title~~ {

/* from LocalSettings line 1021 */

font-size: 1.~~05em~~;

body.page-Special_PasswordReset {

font-weight: ~~600~~;

background: #FAF6EE !important;

color: #~~5a3000~~;

}

margin-bottom: ~~2px~~;

body.page-Special_PasswordReset .mw-page-container,

border-~~bottom~~: 1px ~~dotted~~ #~~c9a060~~;

body.page-Special_PasswordReset .mw-page-container-inner,

padding-bottom: ~~4px~~;

body.page-Special_PasswordReset .mw-body {

background: transparent !important;

}

body.page-Special_PasswordReset .mw-body-header,

body.page-Special_PasswordReset .vector-page-titlebar,

body.page-Special_PasswordReset #firstHeading {

display: none !important;

}

body.page-Special_PasswordReset #content {

max-width: 440px !important;

margin: 28px auto 48px !important;

padding: 0 16px !important;

float: none !important;

}

body.page-Special_PasswordReset #bodyContent,

body.page-Special_PasswordReset .mw-body-content {

margin: 0 !important;

padding: 0 !important;

}

body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {

background: #fff;

border-radius: 16px;

box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);

padding: 32px 32px 28px;

box-sizing: border-box;

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper::before {

content: "Reset password";

display: block;

text-align: center;

font-size: 1.65rem;

font-weight: 700;

color: #2d2348;

margin-bottom: 16px;

font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}

body.page-Special_PasswordReset .mw-htmlform-ooui-header {

margin-bottom: 18px;

font-size: 0.9rem;

color: #6b7280;

line-height: 1.5;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_PasswordReset .mw-htmlform-ooui-header p {

margin: 0;

}

body.page-Special_PasswordReset .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout {

margin-bottom: 18px;

}

body.page-Special_PasswordReset .oo-ui-fieldLayout-header .oo-ui-labelElement-label {

font-size: 0.875rem;

font-weight: 500;

color: #6b7280;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_PasswordReset .oo-ui-textInputWidget .oo-ui-inputWidget-input {

width: 100% !important;

box-sizing: border-box !important;

border-radius: 10px !important;

border: 1px solid #e5e7eb !important;

padding: 12px 14px !important;

font-size: 1rem !important;

min-height: 46px;

background: #fff !important;

}

body.page-Special_PasswordReset .oo-ui-textInputWidget.oo-ui-widget-focus .oo-ui-inputWidget-input {

border-color: #b5451b !important;

box-shadow: rgba(177, 74, 46, 0.1) !important;

}

body.page-Special_PasswordReset .oo-ui-fieldLayout-field {

width: 100% !important;

}

body.page-Special_PasswordReset .oo-ui-textInputWidget {

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_PasswordReset .mw-htmlform-submit-buttons {

margin-top: 8px;

width: 100% !important;

}

body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement,

body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonInputWidget {

width: 100% !important;

display: block !important;

}

body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button {

width: 100% !important;

justify-content: center;

background: #b5451b !important;

border-color: #b5451b !important;

border-radius: 10px !important;

color: #fff !important;

font-weight: 600 !important;

font-size: 1rem !important;

padding: 14px 20px !important;

min-height: 48px;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover {

background: #A33C20 !important;

border-color: #A33C20 !important;

}

body.page-Special_PasswordReset .gr-passwordreset-footer {

text-align: center;

margin-top: 18px;

padding-top: 16px;

border-top: 1px solid #f0eef5;

font-size: 0.9rem;

color: #6b7280;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_PasswordReset .gr-passwordreset-footer a {

color: #b5451b !important;

font-weight: 600 !important;

text-decoration: none !important;

}

body.page-Special_PasswordReset .gr-passwordreset-footer a:hover {

text-decoration: underline !important;

}

body.page-Special_PasswordReset .cdx-message,

body.page-Special_PasswordReset .mw-message-box,

body.page-Special_PasswordReset .successbox,

body.page-Special_PasswordReset .warningbox,

body.page-Special_PasswordReset .errorbox {

border-radius: 10px;

margin-bottom: 16px;

}

@media (max-width: 480px) {

body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {

padding: 24px 20px 20px;

border-radius: 12px;

}

body.page-Special_PasswordReset #content {

margin: 16px auto 32px !important;

padding: 0 12px !important;

}

.gr-~~ullekha~~-~~source~~-~~count~~ {

/* from LocalSettings line 1197 */

font-size: 0.~~78em~~;

body.page-Special_CreateAccount {

color: #~~999~~;

background: #FAF6EE !important;

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

}

margin-bottom: ~~8px~~;

body.page-Special_CreateAccount .mw-page-container,

body.page-Special_CreateAccount .mw-page-container-inner,

body.page-Special_CreateAccount .mw-body {

background: transparent !important;

}

body.page-Special_CreateAccount .mw-body-header,

body.page-Special_CreateAccount .vector-page-titlebar,

body.page-Special_CreateAccount #firstHeading {

display: none !important;

}

body.page-Special_CreateAccount #content {

max-width: 440px !important;

margin: 28px auto 48px !important;

padding: 0 16px !important;

float: none !important;

}

body.page-Special_CreateAccount #bodyContent,

body.page-Special_CreateAccount .mw-body-content {

margin: 0 !important;

padding: 0 !important;

}

body.page-Special_CreateAccount .vector-page-toolbar {

display: none !important;

}

body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {

background: #fff;

border-radius: 16px;

box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);

padding: 32px 32px 28px;

box-sizing: border-box;

}

body.page-Special_CreateAccount .mw-body-content > .mw-ui-container::before {

content: "Create account";

display: block;

text-align: center;

font-size: 1.65rem;

font-weight: 700;

color: #2d2348;

margin-bottom: 22px;

font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

}

body.page-Special_CreateAccount #signupstart {

font-size: 0.9rem;

color: #6b7280;

margin-bottom: 16px;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount .mw-createacct-benefits-container {

display: none !important;

}

body.page-Special_CreateAccount #userloginForm,

body.page-Special_CreateAccount #userloginForm form {

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_CreateAccount .mw-htmlform {

width: 100% !important;

max-width: 100% !important;

}

body.page-Special_CreateAccount .mw-htmlform-field {

margin-bottom: 18px;

}

body.page-Special_CreateAccount .cdx-label,

body.page-Special_CreateAccount .mw-htmlform-field > label {

display: block;

font-size: 0.875rem;

color: #1C1A17;

margin-bottom: 6px;

font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount .cdx-text-input {

width: 100% !important;

max-width: 100% !important;

box-sizing: border-box !important;

border-radius: 10px !important;

border: 1px solid #e5e7eb !important;

background: #fff !important;

min-height: 46px;

}

body.page-Special_CreateAccount .cdx-text-input__input {

width: 100% !important;

box-sizing: border-box !important;

border: none !important;

border-radius: 0 !important;

box-shadow: none !important;

outline: none !important;

background: transparent !important;

padding: 12px 14px !important;

font-size: 1rem !important;

min-height: 44px;

}

body.page-Special_CreateAccount .cdx-field__help-text,

body.page-Special_CreateAccount .htmlform-tip {

font-size: 0.8rem;

color: #9ca3af;

margin-top: 6px;

line-height: 1.4;

}

body.page-Special_CreateAccount .cdx-text-input:focus-within {

border-color: #b5451b !important;

box-shadow: rgba(177, 74, 46, 0.1) !important;

}

body.page-Special_CreateAccount .cdx-text-input__input:focus {

outline: none !important;

border: none !important;

box-shadow: none !important;

}

body.page-Special_CreateAccount input#wpName2,

body.page-Special_CreateAccount input#wpPassword2,

body.page-Special_CreateAccount input#wpRetype,

body.page-Special_CreateAccount input#wpEmail {

width: 100% !important;

box-sizing: border-box !important;

border-radius: 10px !important;

border: 1px solid #e5e7eb !important;

padding: 12px 14px !important;

font-size: 1rem !important;

min-height: 46px;

}

body.page-Special_CreateAccount input#wpName2:focus,

body.page-Special_CreateAccount input#wpPassword2:focus,

body.page-Special_CreateAccount input#wpRetype:focus,

body.page-Special_CreateAccount input#wpEmail:focus {

outline: none !important;

border-color: #b5451b !important;

box-shadow: rgba(177, 74, 46, 0.1) !important;

}

body.page-Special_CreateAccount .mw-htmlform-field:has(#wpCreateaccount),

body.page-Special_CreateAccount .mw-htmlform-submit {

margin-top: 8px;

margin-bottom: 0;

}

body.page-Special_CreateAccount #wpCreateaccount,

body.page-Special_CreateAccount #wpCreateaccount.cdx-button {

width: 100% !important;

display: flex !important;

justify-content: center;

align-items: center;

background: #b5451b !important;

border: none !important;

border-radius: 10px !important;

color: #fff !important;

font-weight: 600 !important;

font-size: 1rem !important;

padding: 14px 20px !important;

min-height: 48px;

cursor: pointer;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount #wpCreateaccount:hover {

background: #A33C20 !important;

}

body.page-Special_CreateAccount .gr-login-signup-footer {

text-align: center;

margin-top: 18px;

padding-top: 16px;

border-top: 1px solid #f0eef5;

}

body.page-Special_CreateAccount .gr-login-signup-text {

font-size: 0.9rem;

color: #6b7280;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount .gr-login-signup-link {

color: #b5451b !important;

font-weight: 600 !important;

text-decoration: none !important;

}

body.page-Special_CreateAccount .gr-login-signup-link:hover {

text-decoration: underline !important;

}

body.page-Special_CreateAccount #signupend,

body.page-Special_CreateAccount .mw-form-related-link-container {

font-size: 0.9rem;

color: #6b7280;

margin-top: 14px;

line-height: 1.5;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount #signupend a,

body.page-Special_CreateAccount .mw-form-related-link-container a {

color: #b5451b !important;

font-weight: 600 !important;

text-decoration: none !important;

}

body.page-Special_CreateAccount #signupend a:hover,

body.page-Special_CreateAccount .mw-form-related-link-container a:hover {

text-decoration: underline !important;

}

body.page-Special_CreateAccount .cdx-message,

body.page-Special_CreateAccount .mw-message-box {

border-radius: 10px;

margin-bottom: 16px;

}

body.page-Special_CreateAccount .gr-google-login {

margin: 20px 0 4px;

padding: 0;

}

body.page-Special_CreateAccount .gr-google-login-icon {

display: inline-flex;

flex-shrink: 0;

line-height: 0;

}

body.page-Special_CreateAccount .gr-google-login-icon svg {

display: block;

}

body.page-Special_CreateAccount .gr-google-login-btn {

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

width: 100%;

box-sizing: border-box;

padding: 12px 16px;

min-height: 48px;

border-radius: 10px;

border: 1px solid #e5e7eb;

background: #fff;

color: #2d2348;

font-weight: 600;

font-size: 1rem;

text-decoration: none !important;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount .gr-google-login-btn:hover {

background: #f9fafb;

border-color: #d1d5db;

}

body.page-Special_CreateAccount .gr-google-login-divider {

display: flex;

align-items: center;

gap: 12px;

margin: 18px 0 16px;

color: #9ca3af;

font-size: 0.85rem;

font-family: system-ui, -apple-system, sans-serif;

}

body.page-Special_CreateAccount .gr-google-login-divider::before,

body.page-Special_CreateAccount .gr-google-login-divider::after {

content: "";

flex: 1;

height: 1px;

background: #e5e7eb;

}

.gr-~~ullekha~~-~~list~~ {

.page-Special_UserLogin #mw-mf-page-center,

~~margin~~: 0 !important;

.page-Special_UserLogin .mw-mf-page-center {

padding~~-left~~: ~~1.4em~~ !important;

display: flex !important;

~~list~~-~~style~~: ~~decimal~~ !important;

align-items: center !important;

justify-content: center !important;

min-height: 100vh !important;

padding: 16px !important;

box-sizing: border-box !important;

}

.gr-~~ullekha~~-~~item~~ {

.page-Special_UserLogin .mw-ui-container {

~~margin~~: ~~0.4em 0~~;

width: 100% !important;

~~line~~-~~height~~: ~~1.55~~;

max-width: 400px !important;

margin: 0 auto !important;

}

@media (max-width: 480px) {

.gr-~~ullekha~~-~~quote~~ {

body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {

~~font~~-~~style~~: ~~italic~~;

padding: 24px 20px 20px;

~~color~~: ~~#444~~;

border-radius: 12px;

}

body.page-Special_CreateAccount #content {

margin: 16px auto 32px !important;

padding: 0 12px !important;

}

.gr-~~ullekha~~-~~ref~~ {

/* from LocalSettings line 1484 */

~~font~~-~~size~~: 0~~.8em~~;

.vector-page-toolbar,

~~font~~-~~style~~: ~~normal~~;

.vector-page-toolbar-container,

~~color~~: ~~#999~~;

.mw-page-container {

margin-~~left~~: ~~4px~~;

border-top: 0 !important;

~~font~~-~~family~~: ~~system~~-ui, ~~sans~~-~~serif~~;

box-shadow: none !important;

}

.vector-page-toolbar {

display:none !important;

}

.mw-body {

margin-top:0 !important;

padding-top:0 !important;

}

/* from LocalSettings line 1525 */

.mw-logo-wordmark,

.vector-header-start a.mw-wiki-title {

display: flex !important;

flex-direction: column !important;

}

.gr-~~ullekha~~-~~ref a { color~~: ~~#b04b00 !important; text-decoration~~: ~~none; }~~

.gr-~~ullekha~~-~~ref~~ a~~:hover { text~~-~~decoration~~: ~~underline; }~~

.mw-logo-wordmark::after,

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

.vector-header-start a.mw-wiki-title::after {

~~Common.css — v7 additions (append to existing Common.css)~~

content: "A Digital Archive of Dvaita Vedanta Literature";

~~Full typography spec implementation.~~

display: block;

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

font-size: 11px;

:~~root~~ {

font-weight: 400;

~~--gr-maroon~~: ~~#800000~~;

color: #ffffff;

~~--gr-orange~~: ~~#f57c00~~;

letter-spacing: 0.3px;

--~~gr-black~~: ~~#222222~~;

margin-top: 1px;

-~~-gr-i5mm~~: ~~19px~~;

font-family: sans-serif;

~~--gr-i7mm~~: ~~26px~~;

-~~-gr-i10mm~~: ~~38px~~;

--~~gr-i2mm~~: ~~8px~~;

~~--gr-~~font-~~dev~~: ~~'Adishila', 'Noto Serif Devanagari', serif;~~

-~~-gr-font-vedic: 'AdishilaVedic', 'Adishila', 'Noto Serif Devanagari',~~ serif;

}

/* ~~1. Heading */~~

~~.gr-doc-title { font-family:var~~(~~--gr-font-dev~~)~~!important; font-size~~:~~24px!important; font-weight:500!important; color:var(--gr-maroon)!important; text-align:center!important; margin:0 0 18px; border:none!important; }~~

/* ===== namespace toolbar hiding (was BeforePageDisplay line 1484) =====

~~/* 2. Sub-heading */~~

Original: hide top toolbar on all namespaces EXCEPT Special, Template, MediaWiki.

~~.gr-section-head~~,~~.gr-gadya-head,h4.gr-section-head~~,h4.gr-gadya-head { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:600!important; color:var(--gr-orange)!important; text-align:center!important; margin:18px 0 8px!important; padding:0!important; border:none!important; }

MediaWiki adds body classes ns-0, ns-10 (Template), ns-8 (MediaWiki), ns--1 (Special).

~~/* 3~~. ~~Chapter heading */~~

So: hide globally, then re-show on the allowed namespaces. */

~~.mw-parser-output h2,.mw-parser-output .mw-heading2 h2 { font-family:var(--gr-font-dev)!important; font-size:18px!important; font-weight:600!important; color:var(--gr-maroon)!important; text~~-~~align:center!important; margin:28px auto 6px!important; padding:~~0~~!important; border:none!important; border-bottom:2px dotted var(--gr-maroon)!important; width:80%; line-height:1.6; }~~

.vector-page-toolbar,

~~.mw-parser-output h3~~,~~.mw~~-parser-output .mw-heading3 h3 { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:600!important; color:var(--gr-orange)!important; text-align:center!important; margin:22px auto 6px!important; padding:0!important; border:none!important; border-bottom:1px dotted var(~~--gr-orange~~)~~!important; width:70%; line-height:1.5; }~~

.vector-page-toolbar-container,

~~/* 4. Author-note */~~

.mw-page-container { border-top: 0 !important; box-shadow: none !important; }

~~.bhashyam-block.gr-author-note~~,~~.gr~~-~~author-note { font-family:var~~(~~--gr-font-dev)!important; font-size:16px!important; font-weight:700!important; color:var(--gr-maroon~~)~~!important; text-align:center!important; margin:12px 0!important; padding:0!important; border:none!important; background:none!important; }~~

.vector-page-toolbar { display: none !important; }

~~/* 5. Moola Veda Shloka */~~

.mw-body { margin-top: 0 !important; padding-top: 0 !important; }

~~.verse-block[data-type="mantra"] .shloka-line~~,~~.gr~~-~~verse~~-type-mantra .shloka-line { font-family:var(--gr-font-vedic)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-maroon)!important; text-align:left!important; display:block; padding-left:var(~~--gr-i5mm~~)~~!important; line-height:1.55; margin:0; }~~

~~/* 6~~. ~~Moola Veda Gadya */~~

/* re-show toolbar on Special / Template / MediaWiki namespaces */

~~.verse-block[data-type="mantra"] .bhashyam-block.gr-pramana-gadya { font-family~~:~~var(~~--gr-font-vedic)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-maroon)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0!important; }

body.ns--1 .vector-page-toolbar,

~~/* 7~~. ~~Moola Shloka~~ */

body.ns-10 .vector-page-toolbar,

.~~verse~~-~~block .shloka-line,.shloka-block .shloka~~-~~line~~,.gr-verse-text { font-family:var(--gr-font-dev)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-orange)!important; text-align:left!important; display:block; padding-left:var(--gr-i5mm)!important; line-height:1.55; margin:0; }

body.ns-8 .vector-page-toolbar { display: block !important; }

.~~verse~~-~~block[data~~-~~type="sutra"] .shloka~~-~~line~~,~~.gr-verse-type-sutra .shloka-line { color:var(--gr-maroon)!important; font-style:normal!important; }~~

~~/* 8~~. ~~Moola Gadya */~~

/* Style overrides for QuickEdit */

~~.gr~~-~~verse~~-~~text.gr-pramana-gadya,.bhashyam-block.gr-pramana-gadya~~ { ~~font~~-~~family~~:~~var(--gr-font-dev)~~!important; ~~font~~-~~size~~:~~18px!important; font-weight:700!important; color:var(--gr-orange)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0~~!important; }

~~/* 9~~. ~~Bhashya Shloka (pramana~~-~~padya) */~~

outline: 0;

~~.bhashyam-block.gr-pramana-padya,.gr-verse-text.gr-pramana~~-~~padya~~ { ~~font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:left!important;~~ display:~~block; padding-left:var(--gr-i10mm)!important; margin-left:0~~!important~~; line-height:1.6~~; }

~~/* 10. Bhashya Gadya */~~

.~~bhashyam~~-~~block,.gr-bhashyam,.gr-inlinepara-run~~ { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0!important; line-height:1.65; margin-~~bottom~~:0~~.3em; }~~

~~/* 11-12. Teeka Shloka/Gadya */~~

~~.teeka-block .teeka-body { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; line-height:1.65; }~~

~~.teeka-block .shloka-line { font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:left!important; padding-left:var(--gr-i10mm)!important; line-height:1.6; }~~

.teeka-block .bhashyam-block,.teeka-block .gr-vyakhya-para,.teeka-block p { font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-~~left:var(--gr-i2mm)!important; }~~

~~/* 13-14. Tippani */~~

~~.gr-tippani-block { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight~~:~~400!important; color:var(--gr-black)!important; background:#f5f8fa; border:1px solid #c8dae8; border-radius:4px; padding:6px 10px 8px; margin:0.3em~~ 0~~; }~~

~~.gr-tippani-block .shloka-line { text-align:left!important; padding-left:var(--gr-i10mm)~~!important; }

~~/* 15. Moola prateeka */~~

~~.gr-mulaprateeka-block,em.Moola,.gr-moola { font-weight:700!important; font-style:italic!important; color:var(--gr-maroon)!important; display:block; text-align:center; margin:0.6em 0 0.3em; }~~

/* ~~16. Prateeka */~~

~~.gr~~-~~prateeka,em.prateeka,span.prateeka { font-weight:700!important; font-style:normal!important; color:var(--gr-orange)!important; }~~

/~~* 17. Reference *~~/

~~.gr-reference,a.qt,span.gr-blockquote .gr-reference,.pramana a { color:var(--gr-orange)!important; font-style:italic; text-decoration:none; }~~

~~.gr-reference:hover,a.qt:hover { text-decoration:underline dotted; }~~

~~/* Moola reference shloka above teeka entries~~ */

.~~gr-moola-ref { display:block; margin:0 0 6px; padding:4px 0 4px var(~~-~~-gr-i5mm); border-left:3px solid var(--gr-orange); }~~

~~.gr-moola-ref .shloka-line { font-size:17px!important; font-weight:600!important; color:var(--gr-orange)!important; padding-left:0!important; }~~

~~/* TOC bold only on active */~~

~~.vector-toc .vector-toc-level~~-1>.vector-~~toc~~-~~link~~,~~.vector-toc .vector-toc-level-1>.vector-toc-link * { font-weight:400!important; color:#3a1f00!important; }~~

.~~vector~~-~~toc~~ .vector-~~toc-level~~-~~2>.vector-toc-link~~,~~.vector-toc .vector-toc-level-2>.vector-toc-link * { font-weight:400!important; color:#5a3a00!important; }~~

~~.vector-toc .vector-toc-level-3>.vector-toc-link,.vector-toc .vector-toc-level-3>.vector-toc-link * { font-weight:400!important; color:#7a5010!important; font-size:.95em!important; }~~

~~.vector-toc .vector-toc-list-item-active .vector-toc-link,.vector-toc .vector-toc-list-item-active .vector-toc-link * { color:#f57c00!important; font-weight:700!important; }~~

~~/* About/Main_Page no sidebar TOC */~~

body.~~page~~-~~My_wiki-About~~ .vector-~~sidebar,body.~~page-~~My_wiki-About .vector-sticky-pinned-container,body.page-My_wiki-About #vector-toc-pinned-container~~ { display:~~none!important; }~~

~~/* Ullekha page */~~

~~.gr-ullekha-back { font-size:.88em; color:#888; margin-bottom:.5em; }~~

~~.gr-ullekha-back a { color:var(--gr-maroon); text-decoration:none; }~~

~~.gr-ullekha-source { margin-bottom:2em; border:1px solid #e8d4a0; border-radius:6px; padding:10px 14px 12px; background:#fffdf5; }~~

~~.gr-ullekha-source-title { font-size:1.05em; font-weight:600; color:#5a3000; margin-bottom:2px; border-bottom:1px dotted #c9a060; padding-bottom:4px; }~~

~~.gr-ullekha-list { margin:0!important; padding-left:1.4em!important; list-style:decimal~~!important; }

~~.gr-ullekha-item { margin:.4em 0; line-height:1.55; }~~

~~.gr-ullekha-quote { font-style:italic; color:#444; }~~

~~.gr-ullekha-ref { font-size:.8em; font-style:normal; color:#999; margin-left:4px; font-family:system-ui,sans-serif; }~~

~~.gr-ullekha-ref a { color:var(--gr-maroon)!important; text-decoration:none; }~~

/* ~~Responsive~~ */

~~@media (max-width:600px) {~~

.mw-~~parser~~-~~output h2,.mw-parser-output h3 { width~~:~~100%!important; }~~

~~.bhashyam~~-~~block~~ { ~~text-indent:12px!important; padding-left:4px!important; }~~

~~.verse-block .shloka-line { padding-left~~:~~8px!important~~; }

}

/* ── 36. COMMENTARY INTERLEAVING (Show/hide teeka in moola) ─────── */

.gr-injected-teeka-group { margin: 0 0 6px 0; }

/* ~~── Moola~~ page (~~verse~~-text ~~only view~~) ~~──────────────────────────── */~~

/* Inline checkbox placed directly before an existing commentary link

/* The title shows "..~~.— मूलम्" with a warm ochre accent~~ */

wherever it appears on the page (e.g. a "वादावली" list) - same maroon

.gr-~~doc~~-~~title[data~~-~~moola="1"]~~ {

accent as the toolbar dropdown's own checkboxes, for visual

~~color: var(~~--gr-~~maroon) !important;~~

consistency between the two places a reader can toggle a commentary.

~~border~~-~~bottom: 2px solid var(~~--~~gr-orange~~);

~~padding~~-~~bottom: 8px;~~

CHANGED: was relying on vertical-align + a plain width/height on the

~~margin-bottom~~: ~~20px~~;

bare <input> - confirmed directly (screenshot) this rendered

noticeably oversized and misaligned with the surrounding text, since

native checkbox rendering size/baseline varies significantly across

browsers/OS (especially mobile Safari) and isn't reliably constrained

by width/height alone without also resetting the native appearance.

Now wrapped in an inline-flex span the checkbox sits inside, which

centers it against the line's actual content height regardless of

the checkbox's own native box quirks - a more robust fix than tuning

vertical-align offsets by hand. */

.gr-teeka-cb-wrap {

/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box

aligned "middle" is positioned by its own height against the parent's

x-height, so the whole control - checkbox AND label together - sat

progressively lower than the text beside it as the reader enlarged the

type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain

inline, the label is ordinary text and lines up with its neighbours by

definition; only the checkbox needs aligning, and it does that with an

em-based offset that holds at any size. */

display: inline;

}

/* On the ~~Moola page~~, ~~verse lines use full~~-~~width justified layout~~

.gr-teeka-inline-checkbox {

~~matching the "M~~. ~~Shloka~~ / M. ~~Gadya" spec~~ (~~no bhashya indentation~~) */

-webkit-appearance: none; appearance: none;

~~.mw~~-~~parser~~-~~output~~ .~~verse~~-~~block {~~

/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed

~~margin~~: ~~8px~~ 0 ~~12px~~;

15px box against text that grows; clamped so it stays a sensible

target at both extremes.

Alignment was measured rather than guessed. vertical-align:middle is

the only value that stays consistent as the type size changes (it is

computed from the font's x-height), but it sits about 2.5px low

against this line-height at every size - so that constant bias is

taken back with `top`, giving under a pixel of error from 16px to

30px. The element is already position:relative for its tick. */

width: clamp(13px, 0.8em, 24px) !important;

height: clamp(13px, 0.8em, 24px) !important;

min-width: 13px; min-height: 13px;

margin: 0 6px 0 0; padding: 0; cursor: pointer;

vertical-align: middle; top: -2.5px;

border: 1.5px solid #b5451b; border-radius: 3px;

background: #fff; position: relative; flex-shrink: 0;

box-sizing: border-box;

}

.mw-~~parser~~-~~output~~ .~~verse~~-~~block .shloka~~-~~block~~ {

.gr-teeka-inline-checkbox:checked {

~~margin~~: 0;

background: #b5451b; border-color: #b5451b;

}

.gr-teeka-inline-checkbox:checked::after {

/* Placed and sized in % of the box, so the tick follows the em-based

box instead of staying a 4x8px mark inside a checkbox that grew. */

content: ''; position: absolute; left: 32%; top: 8%;

width: 26%; height: 55%;

border: solid #fff; border-width: 0 2px 2px 0;

transform: rotate(45deg);

}

/* CHANGED: bullets removed from any <li> this feature attaches a

checkbox to - the checkbox itself is now the visual marker, so the

original bullet point is redundant clutter, not a second marker. */

.gr-teeka-list-item { list-style: none !important; }

/* Toolbar "Commentaries" dropdown button - matches .gr-btn-edit /

.gr-btn-settings exactly (border #f0cfc4, maroon text, cream hover). */

/* CHANGED: pill shape + soft shadow, matching the toolbar-wide "soft

rounded pill" redesign - consistent with .gr-btn's own border-radius

and box-shadow treatment in readerToolbar.js rather than this one

button keeping the old sharp-cornered bordered look on its own. */

/* CHANGED: was styled for a text label + caret ("टीका ▾") - now an

icon-only eye.svg button, so font-size and the caret rule are no

longer relevant and removed; border-radius reduced to match the

toolbar-wide radius reduction (see readerToolbar.js). */

.gr-teeka-dropdown-btn { border: none; border-radius: 12px; box-shadow: 0 2px 6px rgba(181,69,27,0.22); transition: box-shadow .15s, transform .15s; }

.gr-teeka-dropdown-btn:hover { background: #fdf0eb; box-shadow: 0 4px 14px rgba(181,69,27,0.34); transform: translateY(-1px); }

~~/* ── Ullekha page ────────────────────────────────────────────────── */~~

.gr-teeka-dropdown-panel {

~~/* Title: maroon, dotted bottom border (matches ref site exactly) */~~

background: #fff; border: 1px solid #f0cfc4; border-radius: 10px;

.gr-~~ullekha~~-~~title~~ {

box-shadow: 0 4px 16px rgba(181,69,27,0.16); max-height: 60vh; overflow-y: auto;

~~color~~: ~~var(--gr-maroon) !important~~;

~~font-size~~: ~~22px !important~~;

border-~~bottom~~: ~~1.5px dotted var(--gr-maroon) !important~~;

~~padding~~-~~bottom~~: ~~6px !important~~;

~~margin~~-~~bottom~~: ~~20px !important~~;

~~text~~-~~align~~: ~~left !important~~;

}

~~/* Source heading (h2): orange, dotted bottom border */~~

.gr-teeka-dropdown-header {

.mw-~~parser~~-~~output .gr~~-~~ullekha~~-~~page h2~~,

font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;

~~body .mw~~-~~parser-output h2~~.~~gr-ullekha-source-heading {~~

/* CHANGED: fixed 11px -> scales with the reader's text size. */

~~color~~: var(--gr-~~orange~~) ~~!important~~;

font-size: clamp(12px, calc(var(--gr-font-size, 22px) * 0.6), 17px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

font-~~size~~: ~~1em !important~~;

color: #b5451b; padding: 10px 14px 6px; border-bottom: 1px solid #f7e4da; margin-bottom: 2px;

~~font~~-~~weight~~: ~~600 !important~~;

border-bottom: 1px ~~dotted var(--gr-orange) !important~~;

~~width: 60% !important;~~

~~text~~-~~align~~: ~~left !important~~;

}

~~/* Numbered~~ list ~~of quotes */~~

.gr-teeka-dropdown-list { padding: 4px 0; }

.gr-~~ullekha~~-~~list~~ {

.gr-teeka-dropdown-item {

~~margin~~: 0.~~5em~~ 0 1.~~2em 0 !important~~;

display: flex; align-items: center; gap: 9px; padding: 8px 14px;

~~padding~~-~~left~~: ~~1.6em !important~~;

/* CHANGED: fixed 14px -> scales with the reader's text size. */

~~list~~-~~style~~: ~~decimal !important~~;

font-size: clamp(15px, calc(var(--gr-font-size, 22px) * 0.82), 26px);

font-family: var(--font-indic);

color: #3a2a20; cursor: pointer; white-space: nowrap;

transition: background .12s;

}

.gr-~~ullekha~~-~~list li~~ {

.gr-teeka-dropdown-item:hover { background: #fdf0eb; }

margin: 0~~.3em~~ 0;

/* CHANGED: matches the same robust custom-checkbox approach as

~~line-height~~: 1.6;

.gr-teeka-inline-checkbox above, rather than accent-color alone,

which doesn't reliably constrain native checkbox SIZE across

browsers even though it does control the checked-state color. */

.gr-teeka-dropdown-checkbox {

-webkit-appearance: none; appearance: none;

width: 16px !important; height: 16px !important;

min-width: 16px; min-height: 16px; flex-shrink: 0;

margin: 0; padding: 0; cursor: pointer;

border: 1.5px solid #b5451b; border-radius: 3px;

background: #fff; position: relative; box-sizing: border-box;

}

~~/* Each quote as an orange link with single quotes, italic */~~

.gr-teeka-dropdown-checkbox:checked { background: #b5451b; border-color: #b5451b; }

.gr-~~ullekha~~-~~ref~~-~~link a,~~

.gr-teeka-dropdown-checkbox:checked::after {

.gr-~~ullekha~~-~~list li a~~ {

content: ''; position: absolute; left: 4.5px; top: 1.5px;

~~color~~: ~~var(--gr-orange) !important~~;

width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;

~~font~~-~~style~~: ~~italic~~;

transform: rotate(45deg);

~~text-decoration~~: ~~none !important~~;

}

~~.gr~~-~~ullekha~~-~~ref~~-~~link~~ a~~:hover,~~

/* Sub-commentaries (tippanis) nested under their parent teeka - shown

.gr-~~ullekha~~-~~list li a:hover~~ {

only once the parent is checked (see readerToolbar.js), indented to

~~text~~-~~decoration~~: ~~underline dotted~~ !important;

read as a sub-category rather than a peer option. */

}

.gr-teeka-dropdown-subitem { padding-left: 34px !important; }

~~/* Highlighted text on bhashya page after clicking Ullekha link */~~

.gr-teeka-dropdown-sublist { display: none; }

.gr-~~ullekha~~-~~highlight~~ {

.gr-teeka-dropdown-sublist.gr-open { display: block; }

~~background~~: ~~#fff176 !important~~;

.gr-teeka-dropdown-item-label {

~~border~~-~~radius~~: ~~2px~~;

overflow: hidden; text-overflow: ellipsis;

~~padding~~: ~~0 2px~~;

font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;

}

/* Toolbar control only needs to be shown as a fallback once the inline

checkbox list scrolls out of view - hidden by default, toggled by

readerToolbar.js listening to window.grTeekaInterleave.onVisibilityChange. */

.gr-teeka-dropdown-wrap { display: none; }

.gr-teeka-dropdown-wrap.gr-visible { display: inline-block; }

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

/* ── 37. HEADER LINKS + UPDATES PAGE ───────────────────────────── */

~~Canonical XSL class mappings~~ (~~added v7~~.1)

/* Desktop header links (Help, About, Login, Library, Updates) */

~~The renderer now emits HTML directly with classes matching the XSL~~

.gr-header-link {

~~template from the reference site~~, ~~so styles work without MW templates~~.

display: inline-flex; align-items: center;

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

color: rgba(255, 255, 255, 0.88) !important; font-size: 0.88em; font-family: system-ui, sans-serif; font-weight: 500;

line-height: inherit; text-decoration: none !important; white-space: nowrap;

padding: 4px 10px; margin: 0 4px 0 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;

transition: color 0.15s, background 0.15s;

}

.gr-header-link:hover,

.gr-header-link:focus-visible,

.gr-header-link.is-current { color: #fff !important; background: rgba(255, 255, 255, 0.12); }

/* ~~Wrap all document content~~ */

/* Mobile menu panel items (Library, Updates) — same look as Home/Help */

.mw-~~parser~~-~~output~~ {

.gr-mob-item {

~~/* All content lives inside maintext~~-~~equivalent scope */~~

display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0;

padding: 15px 20px; border-bottom: 1px solid #f0ebe6; border-left: 3px solid transparent; background: #fff;

font-size: 16px; font-family: system-ui, sans-serif; color: #2c1810 !important;

text-decoration: none !important;

}

.gr-mob-item.is-current { border-left-color: #c0392b; background: #fdf8f5; color: #c0392b !important; font-weight: 600; }

#gr-header-user-menu a.is-current { background: #f5efe9; font-weight: 600; }

/* ~~── Verse block~~ (~~XSL~~: ~~div~~.~~verse > div~~.~~verse~~-~~text > div~~.~~shloka > span~~.~~shloka~~-~~line~~) */

/* Updates page (My_wiki:Updates) */

.mw-~~parser~~-~~output~~ .~~verse~~ {

.gr-updates-page { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }

~~margin~~: ~~8px~~ 0 ~~4px~~;

.gr-updates-intro { margin: 0 0 24px; font-family: system-ui, sans-serif; font-size: 15px; color: #666; line-height: 1.6; }

.gr-updates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }

.gr-updates-layout.gr-no-bulletin { grid-template-columns: minmax(0, 1fr); }

.gr-updates-heading,

.gr-bulletin-heading {

font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

color: #b5451b;

}

.mw-~~parser~~-~~output~~ .~~verse~~-~~text~~ {

.gr-updates-heading { margin: 0 0 6px; }

font-~~size~~: ~~1.1em~~;

~~color~~: ~~var(~~--gr-~~orange)~~;

/* What's new: grouped list */

~~font~~-~~weight~~: ~~600~~;

.gr-updates-feed { min-height: 120px; }

~~margin~~-~~top~~: ~~6px~~;

.gr-upd-group { margin: 22px 0 8px; font: 600 14px system-ui, sans-serif; color: #1a2e40; }

.gr-upd-group:first-child { margin-top: 8px; }

.gr-upd-list {

margin: 0; padding: 0;

background: #fff; border: 1px solid #efe4df; border-radius: 10px; overflow: hidden;

box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);

}

.~~mw-parser-output .verse[type="sutra"] .verse-text,~~

.gr-upd-item {

~~.mw-parser~~-~~output .verse[type="sutra"] .shloka~~-~~line~~ {

display: flex; align-items: baseline; gap: 16px;

~~color~~: ~~var(~~-~~-gr-maroon) !important~~;

margin: 0; padding: 12px 18px; border-top: 1px solid #f6efec; border-left: 3px solid transparent;

~~font~~-~~style~~: ~~normal !important~~;

}

.mw-~~parser~~-~~output~~ .~~verse[type="mantra"]~~ .~~verse~~-~~text,~~

.gr-upd-item:first-child { border-top: 0; }

.mw-~~parser~~-~~output~~ .~~verse[type="mantra"] .shloka~~-~~line~~ {

.gr-upd-item:hover { background: #fdf8f6; }

font-family: ~~var(~~--gr-~~font-vedic) !important~~;

.gr-upd-item.gr-upd-unseen { border-left-color: #c0392b; background: #fffaf8; }

color: ~~var(--gr-maroon)~~ !important;

.gr-upd-main { flex: 1; min-width: 0; }

~~font~~-~~weight~~: ~~700~~ !important;

.gr-upd-title {

font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1em; font-weight: 600; line-height: 1.45;

color: #c0392b !important; text-decoration: none !important; overflow-wrap: anywhere;

}

.mw-~~parser~~-~~output~~ .~~shloka~~ {

.gr-upd-title:hover { text-decoration: underline !important; text-underline-offset: 3px; }

margin: 0;

.gr-upd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 13px; color: #777; }

~~padding~~: 0;

.gr-upd-work { font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 14px; }

.gr-upd-tag { flex: none; padding: 1px 8px; border-radius: 9px; font: 600 11px/1.6 system-ui, sans-serif; }

.gr-upd-tag.gr-upd-new { background: #fbece8; color: #c0392b; }

.gr-upd-tag.gr-upd-update { background: #eaf1fb; color: #2a5aa8; }

.gr-upd-date { flex: none; font: 13px system-ui, sans-serif; color: #888; white-space: nowrap; }

.gr-upd-empty { margin: 12px 0; padding: 24px; text-align: center; font: 14px system-ui, sans-serif; color: #888;

background: #fff; border: 1px dashed #e6d6cf; border-radius: 10px; }

/* Announcements & events card */

.gr-bulletin {

background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;

box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); overflow: hidden;

}

.mw-~~parser~~-~~output~~ .~~shloka~~-~~line~~ {

.gr-bulletin.gr-bulletin-is-empty { display: none; }

display: ~~block~~;

.gr-bulletin-heading { padding: 12px 18px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc; }

font-~~size~~: ~~18px~~;

.gr-bulletin-item { padding: 14px 18px; border-top: 1px solid #f6efec; }

font-weight: 600;

.gr-bulletin-item:first-child { border-top: 0; }

color: ~~var(~~--gr-~~orange)~~;

.gr-bulletin-item.gr-bulletin-expired { display: none; }

~~padding~~-~~left~~: ~~var(~~--gr-~~i5mm)~~;

.gr-bulletin-item.gr-bulletin-past { opacity: 0.55; }

line-height: 1.55;

.gr-bulletin-meta { display: flex; align-items: center; gap: 8px; font: 12px system-ui, sans-serif; color: #888; }

~~margin~~: 0;

.gr-bulletin-type { padding: 1px 8px; border-radius: 9px; font-weight: 600; font-size: 11px; background: #eaf1fb; color: #2a5aa8; }

.gr-bulletin-type::before { content: "Announcement"; }

.gr-bulletin-item.gr-bulletin-past .gr-bulletin-type::before { content: "Past event"; }

.gr-bulletin-item-title {

margin-top: 6px; font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1.05em; font-weight: 600;

line-height: 1.45; color: #1a2e40;

}

.gr-bulletin-item-title a { color: #c0392b; }

.gr-bulletin-where { display: block; margin-top: 2px; font: 13px system-ui, sans-serif; color: #666; }

.gr-bulletin-item-text { margin-top: 4px; font-size: 0.92em; line-height: 1.6; color: #444; }

.gr-bulletin-item-text p { margin: 0; }

.gr-bulletin-where:empty, .gr-bulletin-item-text:empty, .gr-bulletin-date:empty { display: none; }

~~/* ── Introduction~~ (~~XSL~~: ~~div.introduction~~) */

@media (max-width: 900px) {

~~.mw-parser-output .introduction~~ {

.gr-updates-layout { grid-template-columns: minmax(0, 1fr); }

~~font-family: var(--~~gr-~~font~~-~~dev) !important;~~

.gr-bulletin { order: -1; } /* announcements first on small screens */

~~font-size: 16px;~~

~~color: var(--gr-black);~~

~~text~~-~~align: justify;~~

~~text~~-~~indent~~: ~~var~~(~~--gr-i7mm~~);

~~padding-left: var(--~~gr-~~i2mm);~~

~~margin~~: ~~0.5em 0 0.3em;~~

~~line~~-~~height:~~ 1~~.65~~;

}

.mw-~~parser~~-~~output~~ .~~introduction p~~ {

/* Phones: title on its own line, tag + date underneath */

~~display~~: ~~inline~~;

@media (max-width: 600px) {

~~margin~~: 0;

.gr-updates-intro { font-size: 14px; margin-bottom: 18px; }

.gr-upd-item { flex-direction: column; align-items: stretch; gap: 2px; padding: 11px 14px; }

.gr-upd-title { font-size: 0.9em; }

.gr-upd-date { font-size: 12px; }

.gr-bulletin-heading { padding: 10px 14px; }

.gr-bulletin-item { padding: 12px 14px; }

}

/* ~~── Bhashya~~ (~~XSL: div~~.~~bhashya)~~ */

/* Minerva menu panel: our list replaces the skin's; the skin's lists are

.mw-~~parser~~-~~output~~ .~~bhashya {~~

kept (hidden) because Minerva's own script looks them up. */

~~font~~-~~family: var(~~--gr-~~font~~-~~dev) !important~~;

#mw-mf-page-left > .gr-mf-native-menu { display: none !important; }

~~font~~-~~size~~: ~~16px~~;

.gr-mob-menu { width: 100%; margin-top: 8px; background: #fff; }

~~color~~: ~~var(--gr-black)~~;

~~text-align: justify~~;

/* ── 38. FOOTNOTE MARKERS AND CARDS ────────────────────────────── */

text-~~indent: var(~~--gr-~~i7mm)~~;

/* QuickEdit writes the notes; common.js turns them into a superscript at the

~~padding~~-~~left~~: ~~var(--gr-i2mm)~~;

point of reading and a card on click. The list it writes at the foot of the

~~margin~~: ~~0.2em 0 0.35em~~;

document is taken off the screen but kept for print, where there is nothing

~~line-height~~: ~~1.65~~;

to click and the apparatus belongs at the end. */

/* The annotated words. QuickEdit marks them with a flat yellow highlight,

which is right while editing and shouts on a reading page — a dotted rule

says "there is a note here" without breaking the line of the text. */

#mw-content-text .gra-qe-footnote-highlight {

background: none;

border-bottom: 1px dotted #c9976b;

text-decoration: none;

cursor: pointer; /* the words open the note too, not only the marker */

}

.mw-~~parser~~-~~output~~ .~~bhashya p~~ {

#mw-content-text .gra-qe-footnote-highlight:hover { border-bottom-color: #b5451b; }

display: inline;

margin: 0;

.gr-note-marker {

display: inline-block; vertical-align: super;

margin-left: 1px; padding: 0 3px;

font-family: var(--font-ui); font-weight: 600; line-height: 1.5;

/* Relative to the text, but capped: the reader's A+ goes to 30px and an

uncapped marker starts competing with the words it annotates. */

font-size: clamp(10px, 0.62em, 14px);

color: #8a5a2b; background: #fbf1e6; border: 1px solid #eddcc8; border-radius: 4px;

cursor: pointer; user-select: none; white-space: nowrap;

transition: background 0.12s, color 0.12s, border-color 0.12s;

}

.mw-~~parser~~-~~output~~ .~~bhashya~~.~~footnote~~ {

.gr-note-marker:hover,

~~font~~-~~size~~: ~~0.9em~~;

.gr-note-marker:focus-visible { background: #f3e0c9; color: #6d4318; border-color: #ddc3a3; }

~~padding~~-~~left~~: ~~40px~~;

.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

~~padding~~-~~top~~: ~~12px~~;

.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }

~~padding-bottom~~: ~~12px~~;

border-~~top~~: 1px solid #~~007bff~~;

/* The open state for an annotated WORD - used when the card is anchored to

border-~~bottom~~: ~~1px solid~~ #~~007bff~~;

the words themselves, which is the case for a commentary's notes (they

carry no superscript). It must not reverse the text out, or the word it

is meant to point at becomes unreadable. */

#mw-content-text .gra-qe-footnote-highlight.gr-note-hl-open {

background: #fdefe6;

border-bottom: 1px solid #b5451b;

border-radius: 3px;

box-shadow: 0 0 0 2px #fdefe6;

}

/* ~~── Leading-bhashya (XSL: div~~.~~leading-bhashya)~~ */

/* The card. Fixed, because it is positioned against the marker's viewport

.mw-~~parser~~-~~output~~ .~~leading-bhashya {~~

box and follows it on scroll. */

~~font~~-~~style~~: ~~italic~~;

.gr-note-card {

~~color~~: ~~var(~~-~~-gr-black)~~;

/* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,

~~margin~~: 0~~.4em 0~~ 0.~~5em~~;

so the card opened underneath them. */

~~line-height~~: ~~1.6~~;

position: fixed; z-index: 10500; width: min(380px, calc(100vw - 20px));

background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;

box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);

overflow: hidden;

}

/* ~~── Pramana container (XSL~~: ~~div~~.~~pramana~~) */

.gr-note-card-head {

.mw-~~parser~~-~~output .pramana~~ {

display: flex; align-items: center; justify-content: space-between; gap: 12px;

~~font-style~~: ~~italic~~;

padding: 9px 10px 9px 14px; border-bottom: 1px solid #f1e4db; background: #fdf8f4;

color: #~~be100e~~;

}

~~margin~~: 0~~.4em 0~~;

.gr-note-card-kind {

font-family: var(--font-indic); font-weight: 600; color: #b5451b;

/* CHANGED: fixed 14px -> scales with the reader's text size. */

font-size: clamp(14px, calc(var(--gr-font-size, 22px) * 0.72), 22px);

}

.gr-note-card-close {

flex: none; width: 26px; height: 26px; padding: 0;

font: 400 18px/1 var(--font-ui); color: #8b7d74;

background: transparent; border: 0; border-radius: 6px; cursor: pointer;

}

~~/* Pramana verse (XSL~~: ~~div.padya inside div.pramana) */~~

.gr-note-card-close:hover { background: #f3e7df; color: #5a4a41; }

.mw-~~parser~~-~~output .pramana .padya~~ {

.gr-note-card-body {

~~margin~~-~~bottom~~: 1.~~2em~~;

padding: 13px 14px 15px;

text-~~align: left;~~

font-family: var(--font-indic); line-height: 1.7; color: #2c1810;

~~padding~~-~~left~~: var(--gr-~~i5mm~~);

/* CHANGED: fixed 17px against 22px body text -> scales with it. */

~~line~~-height: ~~1.55~~;

font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.94), 30px);

max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere;

}

/* ~~Pramana prose (XSL~~: ~~div~~.~~gadya inside div.pramana)~~ */

.mw-~~parser~~-~~output .pramana .gadya~~ {

/* Phones: a sheet at the bottom reads better than a card floating over the

~~margin-~~bottom: 0~~.8em~~;

line, and there is no hover to fall back on. */

~~text~~-~~align~~: ~~justify~~;

@media (max-width: 600px) {

~~text~~-~~indent~~: ~~var~~(~~--gr-i7mm~~);

.gr-note-card {

~~padding~~-~~left~~: var(--gr-~~i2mm~~);

left: 0 !important; right: 0; top: auto !important; bottom: 0;

width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0;

box-shadow: 0 -8px 30px rgba(60, 20, 10, 0.2);

}

.gr-note-card-body { font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.9), 26px); max-height: 50vh; }

}

/* ~~── Uvaaca (XSL: blockquote.uvaaca)~~ */

/* The list QuickEdit keeps at the foot of the document */

.mw-~~parser~~-~~output blockquote~~.~~uvaaca,~~

.gra-qe-footnotes.gr-notes-listed { display: none; }

.mw-~~parser~~-~~output .uvaaca~~ {

@media print {

color: #~~BF360C~~;

.gr-note-marker { background: none; border: 0; color: #000; }

~~padding~~: ~~8px 40px~~;

.gr-note-card { display: none !important; }

border-~~left~~: ~~3px~~ solid #~~BF360C~~;

.gra-qe-footnotes.gr-notes-listed { display: block; margin-top: 28px; padding-top: 12px; border-top: 1px solid #ccc; }

margin: ~~16px 0 20px~~;

.gra-qe-footnote-quote { font-weight: 600; margin-right: 6px; }

~~background~~-~~color: #FFF4F3;~~

.gra-qe-footnote-item,

font-~~style~~: ~~normal;~~

.gra-qe-footnote-text { font-family: var(--font-indic); }

font-~~weight: 500~~;

}

/* ── ~~Author~~-~~note (XSL~~: p.~~author-note~~ / ~~div~~.gr-~~author~~-~~note)~~ */

/* ── 39. LINE ALIGNMENT CARRIED FROM THE SOURCE DOCUMENT ──────────

.mw-~~parser~~-~~output~~ .~~author~~-~~note~~,

A converted document puts one of these on a line whose source

.mw-~~parser~~-~~output~~ .gr-~~author~~-~~note~~ {

paragraph carried an explicit alignment (Katha sets 288 paragraphs

font-family: var(-~~-gr~~-font-~~dev~~) ~~!important~~;

CENTER - every invocation and colophon). New classes only: no existing

font-size: ~~16px !important;~~

rule is overridden, and a line whose source set no alignment gets no

~~font-weight: 700 !important;~~

class and keeps whatever the site already gives it. */

~~color:~~ var(--gr-~~maroon~~) ~~!important~~;

.gr-align-center { text-align: center; }

~~text~~-~~align~~: ~~center !important~~;

/* The closing verse number is one unit - "॥ ४ ॥" is separated by ordinary

~~margin~~: ~~14px 0 !important~~;

spaces, so without this a narrow column wraps between them and strands

padding: ~~0 !important~~;

the number on a line of its own. */

~~border~~: ~~none !important~~;

.gr-verse-num { white-space: nowrap; }

~~background: none !important;~~

.gr-align-right { text-align: right; }

~~line~~-~~height~~: ~~1.6~~;

.gr-align-justify { text-align: justify; }

/* Footnotes belonging to an interleaved commentary, grouped under its name

in the right-hand panel. Shown only where that list is shown. */

.gr-teeka-notes-group { margin-top: 14px; }

.gr-teeka-notes-title {

font-family: var(--font-deva);

font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.68), 19px);

font-weight: 600; color: #b5451b;

padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;

}

/* ~~── Prateeka / Moola inline (XSL~~: ~~span~~.~~prateeka~~, em.~~Moola)~~ */

/* Footnote panel: one section per source document. The page's own notes

.~~mw-parser-output .prateeka,~~

come first, then a section per commentary shown on the page. */

~~.mw~~-~~parser~~-~~output .gr~~-~~prateeka~~ {

.gra-footnote-section-title {

font-~~weight~~: ~~bold !important~~;

font-family: var(--font-deva);

font-~~style: normal !important;~~

font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);

~~color~~: var(--gr-~~orange~~) ~~!important~~;

font-weight: 600; color: #b5451b;

~~display~~: ~~inline~~-~~block~~;

margin: 14px 4px 6px; padding-bottom: 4px;

~~margin~~: ~~0 0.1em~~;

border-bottom: 1px solid #f1e4db;

}

.mw-~~parser~~-~~output~~ .~~Moola~~,

.gra-footnote-section-title:first-child { margin-top: 2px; }

.mw-~~parser~~-~~output .gr-moola~~ {

.gra-footnote-section-own { color: #7a6a60; }

font-~~weight~~: ~~bold !important~~;

/* Repeated on the card, for when the heading has scrolled out of view. */

font-~~style: italic !important;~~

.gra-footnote-source {

~~color~~: var(--gr-~~maroon~~) ~~!important~~;

font-family: var(--font-deva);

~~display~~: ~~inline-block~~;

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);

~~margin~~: 0 0.~~1em~~;

color: #b5451b; opacity: 0.85; margin-bottom: 2px;

}

/* ~~── Reference / quote links~~ (~~XSL:~~ a.~~qt)~~ */

/* The annotation count badge was removed (it was clipped by the round

~~.mw~~-~~parser~~-~~output~~ a.~~qt,~~

toggle's own overflow). This keeps it hidden for anyone still served a

.~~mw-parser-output~~ .gr-~~reference~~ {

cached copy of the old gadget. */

~~color~~: ~~var(~~--gr-~~orange) !important~~;

#gra-toggle-badge { display: none !important; }

~~font~~-~~style~~: ~~italic;~~

~~text-decoration: none !important~~;

/* ── LINK LANDING ───────────────────────────────────────────────────

Where a copied id or a bookmark citation link lands. The flash used to

be injected by copyId.js; it lives here so the landing still reads when

only common.js is loaded. */

.gid-target {

animation: gid-target-flash 2.4s ease-out 1;

border-radius: 4px;

}

~~.mw~~-~~parser~~-~~output a.qt~~:~~hover~~,

@keyframes gid-target-flash {

.mw-~~parser-output~~ .~~gr-reference:hover {~~

0%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }

~~text~~-~~decoration~~: ~~underline dotted !important~~;

100% { background: transparent; box-shadow: none; }

}

@media (prefers-reduced-motion: reduce) {

~~/* ── Adhikarana heading~~ (~~XSL: h3.adhikarana-heading) */~~

.gid-target { animation: none; background: rgba(181,69,27,0.14); }

~~.mw-parser-output h3.adhikarana-heading,~~

~~.mw-parser~~-~~output .adhikarana~~-~~heading {~~

~~font-size~~: ~~1em !important;~~

~~font-weight: 600 !important;~~

~~color: var(--gr-orange~~) ~~!important;~~

~~text~~-~~align~~: ~~center !important~~;

~~margin~~: ~~22px auto 6px !important;~~

~~border-bottom: 1px dotted var~~(~~--gr-orange~~) ~~!important;~~

~~width: 65%;~~

~~padding: 0 !important~~;

}

/* ── ~~Avataranika (XSL~~: p.~~avataranika)~~ */

/* ── BOOKMARK CITATION ──────────────────────────────────────────────

.mw-~~parser~~-~~output~~ .~~avataranika {~~

The reference a bookmark produces, shown on its card and copyable in

font-style: ~~italic~~;

one click. Set small and in the UI face deliberately: it is apparatus

color: #~~444~~;

for the reader to take away, not part of the text. */

~~margin: 0~~.~~3em 0 0~~.~~5em~~ 0~~.5em~~;

.gra-bookmark-cite {

padding-left: 0~~.6em~~;

margin-top: 6px;

~~border~~-~~left~~: ~~2px solid #c9a96e~~;

/* --font-translit, not --font-indic. The reference is romanised - IAST

~~line~~-~~height~~: ~~1.6~~;

author, IAST title, Latin site name and URL - and Gentium Book Plus

is the only family here with a REAL italic face (Adishila, which

--font-indic leads with, has none at this weight, so the italic title

fell back to a synthetic slant or to nothing at all). Gentium's

unicode-range covers Latin only, so a Devanagari fallback title still

lands on Adishila further down the stack. */

font-family: var(--font-translit);

font-synthesis: style; /* allow a slant for the Devanagari case */

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);

line-height: 1.5; color: #6b5b52;

/* Ragged right and flush left. The hanging indent that was here reads

correctly in a printed reference LIST, where it separates one entry

from the next; on a single card it just looked like the lines had

slipped. Justification came in from the panel and stretched the word

gaps, which is what made the spacing look broken. */

text-align: left;

text-indent: 0;

padding-left: 0;

overflow-wrap: break-word;

word-break: normal;

hyphens: none;

}

.gra-bookmark-cite a {

~~/* ── Mulaprateeka (XSL: p~~.~~mulaprateeka) */~~

color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;

~~.mw~~-~~parser~~-~~output .mulaprateeka,~~

overflow-wrap: anywhere; /* only the URL may break mid-token */

~~.mw-parser-output .gr-mulaprateeka-block~~ {

~~font-weight: bold !important;~~

~~font-style: italic !important;~~

color: ~~var(--gr-maroon) !important~~;

text-~~align~~: ~~center !important~~;

~~margin~~: ~~0.6em 0 0.3em !important~~;

~~line~~-~~height~~: ~~1.5~~;

}

.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }

.gra-bookmark-cite i,

.gra-bookmark-cite em { font-style: italic; font-synthesis: style; }

/* ~~── Gadya heading (XSL: h2~~.~~topichead)~~ */

/* Where the bookmark sits in the text. A caption, not part of the

.mw-~~parser~~-~~output h2.topichead~~ {

citation - so it is set in the UI face and kept visually apart from

font-~~size~~: ~~1em !important~~;

the reference below it. */

~~color~~: ~~#800080 !important~~;

.gra-bookmark-locator {

font-weight: ~~500 !important~~;

margin-top: 5px;

~~margin~~-~~top~~: ~~10px !important~~;

font-family: var(--font-ui);

~~display~~: ~~none~~; ~~/* ref site hides topichead by default */~~

font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);

font-weight: 600;

letter-spacing: .02em;

color: #8a7a70;

}

~~/* ── Bhashya-collection inlinepara run */~~

.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }

~~.mw-parser-output~~ .gr-~~inlinepara~~-~~run~~ {

~~font-family: var(--gr-font-dev) !important;~~

~~font-size: 16px;~~

~~color~~: ~~var(--gr-black)~~;

~~text~~-~~align~~: ~~justify~~;

~~line-height~~: ~~1.65;~~

~~margin: 0.2em 0~~;

}

~~/* ── Bhashya anchor~~ (~~for copy~~-~~id hover~~) */

.gra-cite-copy {

~~.mw~~-~~parser~~-~~output~~ .gr-~~bhashya~~-~~anchor {~~

margin-top: 6px; padding: 3px 10px;

~~/* inline~~, ~~no visual change — just provides ID anchor */~~

font-family: var(--font-ui);

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);

font-weight: 600; color: #b5451b;

background: #fff5f2; border: 1px solid #f0cfc4; border-radius: 20px;

cursor: pointer; transition: background .15s, color .15s, border-color .15s;

}

.gra-cite-copy:hover { background: #b5451b; color: #fff; border-color: #b5451b; }

.gra-cite-copy--done { background: #2e6e40; color: #fff; border-color: #2e6e40; }

@@ Line 1: / Line 1: @@
 /* ═══════════════════════════════════════════════════════════════════
-    MediaWiki:Common.css  —  grantha.io  (v6 additions)
+    MediaWiki:Common.css — Anandamakaranda
-   Paste this entire block INTO your existing Common.css, replacing
+   Clean rebuild — works on Vector (desktop) + Minerva (mobile)
-   or appending as appropriate. Sections marked NEW are net additions.
     ═══════════════════════════════════════════════════════════════════ */
-/* ── Fonts ────────────────────────────────────────────────────── */
+/* ── 1. CSS VARIABLES ──────────────────────────────────────────── */
+:root {
+  --maroon:       #be100e;
+  --orange:       #e65100;
+  --light-orange: #f57c00;
+  --dark-gray:    #555;
+  --light-gray:   #eee;
+  --muted-gray:   #888;
+  --text:         #1a1a1a;
+  --brown:        #a07040;
+  --light-brown:  #e8d4a0;
+  /* Font stacks. --font-indic is the one to use for anything the reader
+     can transliterate. Every face in it is served from this site (§2a), so
+     a transliterated page looks the same on every machine instead of
+     falling back to whatever the visitor happens to have installed.
+     Order matters, not just membership: each face is limited by
+     unicode-range to the characters it should own, so the browser walks
+     the list and the first face that claims the character wins.
+       Gentium Book Plus  → Latin only, i.e. the IAST reading
+       AdishilaDev        → Devanagari, danda, and everything unclaimed
+       Noto Serif Tamil / Kannada / Telugu → their own blocks
+     Gentium sits first because IAST is Latin throughout: if Adishila led,
+     plain letters would come from Adishila and only the accented ones
+     (ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */
+  /* The HEADING face - AdishilaDev. Used only by headings and the few
+     title-like labels listed further down, never by body text. */
+  --font-deva:  'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
+  /* The READING face. Adishila leads: this is what moola, bhashya, teeka
+     and every other run of body text is set in. AdishilaDev follows only
+     as a fallback, for the rare glyph the plain face lacks.
+     Gentium used to sit first here, so that IAST came out in one face -
+     but that also made it the first family asked for Devanagari, and any
+     locally-installed "Gentium Book Plus" answers for codepoints outside
+     the @font-face unicode-range, so the shlokas stopped being Adishila.
+     IAST now gets its Gentium from --font-translit, used only in that view.
+     Headings do NOT use this variable; they use --font-deva above. */
+  --font-indic: 'Adishila', 'AdishilaDev', 'Noto Serif Devanagari',
+                'Noto Serif Tamil', 'Noto Sans Tamil',
+                'Noto Serif Kannada', 'Noto Sans Kannada',
+                'Noto Serif Telugu', 'Noto Sans Telugu',
+                'Noto Serif Malayalam', 'Noto Sans Malayalam',
+                'Noto Serif Gujarati', 'Noto Sans Gujarati',
+                'Noto Serif Bengali', 'Noto Sans Bengali',
+                'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi',
+                'Noto Serif Oriya', 'Noto Sans Oriya', serif;
+  /* Latin-first, for the IAST reading only: there plain letters and
+     accented ones must come from one face or the line looks patched. */
+  --font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;
+  --font-ui:    system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+/* ── 2. FONTS ──────────────────────────────────────────────────── */
+/* font-display: swap on every face below. Without it the browser uses
+   `auto`, which in Chrome means a block period of up to three seconds
+   during which text in that font is INVISIBLE - the page has painted, the
+   layout is right, and the Sanskrit simply is not there yet. That reads as
+   a slow site even when the bytes arrive quickly. With swap the text is
+   painted immediately in the fallback and re-rendered when the face
+   arrives. */
 @font-face {
    font-family: "Adishila";
    src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
-   font-family: "Adishila";
+   font-family: "AdishilaBold";
    src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AdishilaItalic";
+  src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
+  font-weight: bold; font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AdishilaDev";
+  src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
+  font-weight: normal; font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AdishilaDev";
+  src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
+  font-weight: bold; font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "AdishilaDevGuru";
+  src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
+  font-weight: bold; font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Noto Sans Devanagari";
+  src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
+  font-weight: normal; font-style: normal;
+  font-display: swap;
 }
+@font-face {
+  font-family: "AdishilaVedic";
+  src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
+  font-weight: normal; font-style: normal;
+  font-display: swap;
+}
+/* ── 2a. TRANSLITERATION FONTS ─────────────────────────────────── */
+/* One face per script the reader can switch to, served from this site so
+   the page reads the same everywhere. Subset to the script's own block and
+   compressed to woff2, so each file is 30–110 KB and only the file for the
+   script actually on screen is ever downloaded.
+   Every face reports the same 105% above the baseline / 40% below, whatever
+   its own metrics say. That is what keeps the lines on one rhythm: without
+   it each script sat at its own height inside the line box, so a heading
+   jumped a few pixels the moment it was switched.
-.mw-parser-output,
+   How large each script *draws* is handled separately, in §2b, by scaling
-.mw-parser-output *,
+   the text rather than the font file. Doing it there means it still works
-.mw-parser-output pre,
+   when a font file is missing or slow — the text is scaled whatever face
-.mw-parser-output code,
+   ends up rendering it — and it leaves one number per script to tune
-.mw-parser-output tt,
+   instead of three that have to be kept in proportion.
-.mw-parser-output kbd {
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+   Install: put the nine .woff2 files in  /resources/fonts/translit/ . */
+/* Tamil — Noto Serif Tamil (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Tamil";
+  src: url("/resources/fonts/translit/NotoSerifTamil-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0B80-0BFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Tamil";
+  src: url("/resources/fonts/translit/NotoSerifTamil-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0B80-0BFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* Kannada — Noto Serif Kannada (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Kannada";
+  src: url("/resources/fonts/translit/NotoSerifKannada-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0C80-0CFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Kannada";
+  src: url("/resources/fonts/translit/NotoSerifKannada-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0C80-0CFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* Telugu — Noto Serif Telugu (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Telugu";
+  src: url("/resources/fonts/translit/NotoSerifTelugu-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0C00-0C7F, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Telugu";
+  src: url("/resources/fonts/translit/NotoSerifTelugu-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0C00-0C7F, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* IAST — Gentium Book Plus (SIL OFL). Chosen over a general-purpose serif
+   because it draws ṛ ṝ ḷ ḹ ṅ ñ ṭ ḍ ṇ ś ṣ ṃ ḥ m̐ as designed letters rather
+   than stacking a loose accent on a Latin one, which is what made the
+   romanised reading look ragged. The range stops short of U+0964-0965 on
+   purpose: the danda then always comes from the Devanagari face, so it is
+   one shape in every script. */
+@font-face {
+  font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+   font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Italic.woff2") format("woff2");
+  font-weight: 400; font-style: italic; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* ── 2b. APPLYING THEM ─────────────────────────────────────────── */
+/* Most rules below name an Adishila face directly, which is right for
+   Devanagari and useless for anything else: Adishila has no Tamil, Kannada
+   or Telugu letters, so a switched page fell through to the visitor's
+   default serif — a different font per machine, and often a different one
+   per line. common.js puts the chosen script on <html data-gr-script="…">,
+   so while a transliteration is showing, every span the switcher rewrote
+   moves onto --font-indic and picks up the faces above. Devanagari is the
+   no-attribute case and is left exactly as it was.
+   --gr-script-scale is how much smaller or larger that script has to be
+   drawn to read the same size as Devanagari. Kannada and Telugu draw taller
+   letters at the same font-size, Tamil wider and rounder, Gentium smaller;
+   left alone, switching script looked like the type size had changed.
+   THESE FOUR NUMBERS ARE THE KNOB: if a script still reads a shade large or
+   small next to Adishila on the live site, move its number a percent or two
+   and nothing else. It multiplies whatever size the reader has chosen with
+   A- / A+, so the two controls stay independent. */
+:root                            { --gr-script-scale: 1; }
+html[data-gr-script="ta"]        { --gr-script-scale: 0.88; }  /* தமிழ்   */
+html[data-gr-script="kn"]        { --gr-script-scale: 0.86; }  /* ಕನ್ನಡ   */
+html[data-gr-script="te"]        { --gr-script-scale: 0.88; }  /* తెలుగు  */
+html[data-gr-script="en"]        { --gr-script-scale: 1.00; }  /* IAST   */
+html[data-gr-script]:not([data-gr-script="deva"]) [data-deva],
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sticky-title,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-section-title,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-snippet,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-group-name {
+  font-family: var(--font-indic) !important;
+  font-size: calc(1em * var(--gr-script-scale));
+}
+html[data-gr-script="en"] [data-deva],
+html[data-gr-script="en"] .gr-sticky-title,
+html[data-gr-script="en"] .gr-sr-section-title,
+html[data-gr-script="en"] .gr-sr-snippet,
+html[data-gr-script="en"] .gr-sr-group-name { font-family: var(--font-translit) !important; }
+/* The bold and italic Adishila faces are separate families rather than
+   weights, so a transliterated prateeka or quotation has to ask for the
+   weight it wants instead. */
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-prateeka         { font-weight: 700; }
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-mulaprateeka-block { font-style: italic; }
+body {
+ background-color: #fff;
+}
+/* ── Icon base ──────────────────────────────────────────────────── */
+.gra-icon {
+  display: inline-block;
+  width:  20px;
+  height: 20px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  flex-shrink: 0;
+}
+/* comment.svg → Feedback (flag/report)  */
+.gra-icon-feedback { background-image: url('/images/feedback.svg'); }
+/* notes.svg   → Notes                  */
+.gra-icon-note     { background-image: url('/images/notes.svg'); }
+.gra-icon-bookmark { background-image: url('/images/bookmark.svg'); }
+.gra-icon-copy     { background-image: url('/images/copy.svg'); }
+.gra-icon-search { background-image: url('/images/search.svg'); }
+.gra-icon-dismiss { background-image: url('/images/close.svg'); }
+.gra-icon-prev { background-image: url('/images/prev.svg'); }
+.gra-icon-next { background-image: url('/images/next.svg'); }
+.gra-icon-footnote { background-image: url('/images/footnote.svg'); }
+.gra-icon-sandarbha { background-image: url('/images/reference.svg'); }
+#mw-content-text {
+  font-family: 'Adishila';
 }
 .mw-parser-output {
    font-size: 22px;
-   line-height: 1.6;
+   line-height: 1.7;
    color: #555;
    max-width: 100%;
@@ Line 36: / Line 294: @@
 }
+// Danda marks wrap issue
+.mw-parser-output { overflow-wrap: anywhere; }
+/* ── 4. HIDE ELEMENTS (both skins) ────────────────────────────── */
+/* Page title */
 h1.firstHeading, #firstHeading, .mw-page-title-main { display: none !important; }
+/* Footer */
+#footer, .mw-footer, .vector-footer, .vector-footer-container,
+footer, .minerva-footer { display: none !important; }
+/* Categories */
+.catlinks, #catlinks, .mw-normal-catlinks, .mw-hidden-catlinks { display: none !important; }
+/* Edit section links */
+.mw-editsection, .mw-editsection-bracket { display: none !important; }
+/* Site notice */
+#siteNotice { display: none !important; }
+/* Watchlist */
+li#pt-watchlist, li#pt-watchlist-kbd { display: none !important; }
+/* Appearance panel */
+#vector-appearance, #vector-appearance-pinned-container,
+#vector-appearance-unpinned-container, .mw-portlet-appearance,
+#p-appearance, [aria-controls="vector-appearance"] { display: none !important; }
+/* Vector hamburger + sidebar */
+#mw-sidebar-button, .vector-main-menu, .vector-main-menu-container,
+.vector-main-menu-landmark, #vector-main-menu-dropdown { display: none !important; }
+/* Vector search box (we use our own) */
+#p-search, .vector-search-box, .vector-search-box-vue,
+.vector-search-box-collapses { display: none !important; }
+/* Vector page toolbar */
+.vector-page-toolbar, .vector-page-toolbar-container { display: none !important; }
+/* Vector page tools */
+.vector-page-tools { display: none !important; }
+/* Empty paragraphs */
+.mw-parser-output p:empty,
+.mw-parser-output > div > p:empty,
+.mw-heading + p:empty,
+.adhyaya-block + p:empty,
+.verse-block + p:empty { display: none !important; margin: 0 !important; }
+/* Empty divs */
+.adhyaya-block:empty, .mw-parser-output div:empty { display: none !important; }
+/* Cargo hidden */
+.cargo-store-only { display: none !important; }
-.mw-parser-output h1,
+/* ── 5. VECTOR HEADER (desktop only) ──────────────────────────── */
-.mw-parser-output h2,
+.vector-header-container {
-.mw-parser-output h3,
+  background: #b5451b !important;
-.mw-parser-output h4,
+  border-bottom: 1px solid rgba(255,255,255,0.12);
-.mw-parser-output .mw-heading h1,
+}
-.mw-parser-output .mw-heading h2,
+.vector-header {
-.mw-parser-output .mw-heading h3 {
+  background: transparent !important;
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+  max-width: 100% !important;
-   border: none !important; border-bottom: none !important;
+  display: flex !important;
-   padding: 0 !important; background: none !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding-left: 20px !important;
+  padding-right: 20px !important;
+}
+.vector-header-start {
+  flex: 0 0 auto !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 12px;
+}
+.vector-header-end {
+  flex: 0 0 auto !important;
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px;
+  margin-left: auto;
+}
+.mw-logo { display: flex !important; align-items: center; opacity: 1 !important; }
+.mw-logo-icon { width: 24px; height: 24px; }
+/* Site name */
+.mw-logo-wordmark {
+  font-size: 0 !important;
+  white-space: nowrap;
+  display: flex !important;
+  flex-direction: column !important;
+}
+.mw-logo-wordmark::before {
+  content: 'Anandamakaranda';
+  font-size: 17px;
+  font-weight: 700;
+  color: #fff;
+   font-family: system-ui, -apple-system, sans-serif;
+   letter-spacing: -0.01em;
+}
+.mw-logo-wordmark::after {
+  content: "A Digital Archive of Dvaita Vedanta Literature";
+  display: block;
+  font-size: 11px;
+  font-weight: 400;
+  color: rgba(255,255,255,0.85);
+   letter-spacing: 0.3px;
+  margin-top: 1px;
+  font-family: sans-serif;
 }
-.mw-parser-output .mw-heading {
+/* Header right links */
-   border: none !important; border-bottom: none !important;
+.vector-header-end > *:not(#p-search) { color: rgba(255,255,255,0.9) !important; }
-   margin: 0; padding: 0;
+.vector-user-links a { color: rgba(255,255,255,0.9) !important; }
+/* User icon white */
+.vector-user-menu-container .vector-icon svg,
+.vector-user-menu-container .vector-icon svg path,
+.vector-user-menu-container .vector-icon svg circle {
+   fill: #fff !important; stroke: #fff !important;
+}
+.vector-user-links .vector-user-menu-chevron .vector-icon svg,
+.vector-user-links .vector-user-menu-chevron .vector-icon svg path {
+   fill: rgba(255,255,255,0.9) !important;
 }
-.gr-doc-title {
+/* User dropdown — dark text on white card */
-   font-size: 1.6em; font-weight: 500; color: #1a1a1a;
+.vector-user-menu .mw-list-item a,
-   line-height: 1.4; margin: 0 0 16px; border: none !important;
+.vector-user-menu .vector-menu-content-list a,
+#p-personal .vector-menu-content a,
+.mw-portlet-personal .vector-menu-content a { color: #202122 !important; }
+.vector-user-menu .mw-list-item a:hover { color: var(--light-orange) !important; }
+/* Suppress Vector sticky header clone */
+.vector-sticky-header { display: none !important; }
+/* Suppress body top padding that Vector adds */
+.mw-body { margin-top: 0 !important; padding-top: 0 !important; }
+/* ── 6. VECTOR TOC (desktop sidebar) ──────────────────────────── */
+/* Levels are told apart by size, weight and colour; nesting is shown by
+   indentation and a guide line. Every rule below uses the child
+   combinator (>), so highlighting an entry never spills onto the
+   sub-entries underneath it. */
+.vector-toc .vector-toc-numb { display: none !important; }
+/* The contents panel follows the reader toolbar's A- / A+ . The toolbar
+   publishes its size as --gr-font-size on <html>; everything below is a
+   ratio of it, so one click moves the body and the contents together. The
+px fallback is the toolbar's own default, for a page without one. */
+.vector-toc {
+  --gr-toc: max(14px, calc(var(--gr-font-size, 22px) * 0.92));
+}
+.vector-toc .vector-toc-title {
+   font-size: 15px !important; font-weight: 700 !important;
+  text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--text) !important;
+  font-family: var(--font-indic) !important;
+}
+.vector-toc .vector-toc-text {
+  white-space: normal !important; word-break: break-word !important;
+  overflow-wrap: anywhere !important; display: inline !important;
+  font-family: var(--font-indic) !important;
+}
+/* :not() keeps this off the मूलम् / उल्लेख buttons that sit in the same
+   panel — otherwise this rule reshaped them into flat contents links. */
+.vector-toc a:not(.toc-main-link-item), .vector-toc .vector-toc-link {
+  display: block;
+  font-family: var(--font-indic) !important;
+  font-size: var(--gr-toc); color: var(--text) !important; text-decoration: none !important;
+   padding: 4px 8px; border-radius: 5px; line-height: 1.45;
+  transition: background 0.12s, color 0.12s;
 }
-/* ── Chapter / section headings ──────────────────────────────── */
+/* Level 1 = section heading, level 2+ = sub-sections. Each is a ratio of
-.adhyaya-block h2,
+   --gr-toc rather than a fixed px, so the levels keep their proportions at
-.adhyaya-heading,
+   every toolbar size; they are told apart by weight and colour as much as
-.mw-parser-output .mw-heading2 h2,
+   by size. */
-.mw-parser-output h2 {
+.vector-toc .vector-toc-level-1 > .vector-toc-link {
-   font-size: 1.2em !important; font-weight: 500 !important;
+   font-size: calc(var(--gr-toc) * 1.05) !important; font-weight: 600 !important; color: var(--text) !important;
-  color: #f57c00 !important; line-height: 1.8;
+}
-   margin: 24px 0 4px !important; padding: 0 !important;
+.vector-toc .vector-toc-level-2 > .vector-toc-link {
-   border: none !important;
+   font-size: calc(var(--gr-toc) * 0.95) !important; font-weight: 400 !important; color: #4d4d4d !important;
-  border-bottom: 2px dotted #f57c00 !important;
+}
-  width: 75%;
+.vector-toc .vector-toc-level-3 > .vector-toc-link,
+.vector-toc .vector-toc-level-4 > .vector-toc-link,
+.vector-toc .vector-toc-level-5 > .vector-toc-link {
+   font-size: calc(var(--gr-toc) * 0.90) !important; font-weight: 400 !important; color: #6b6b6b !important;
 }
-.mw-parser-output .mw-heading3 h3,
+/* Nesting: indent each level and run a guide line down it */
-.mw-parser-output h3 {
+.vector-toc .vector-toc-contents,
-  font-size: 1em !important; font-weight: 500 !important;
+.vector-toc .vector-toc-list { list-style: none !important; }
-  color: #e65100 !important; line-height: 1.5;
+.vector-toc .vector-toc-contents { margin: 0 !important; padding: 0 !important; }
-   margin: 24px 0 8px !important; padding: 0 !important;
+.vector-toc .vector-toc-list-item .vector-toc-list {
-  border: none !important;
+   margin: 0 0 0 9px !important; padding-left: 10px !important;
-   border-bottom: 1px dotted #e65100 !important;
+   border-left: 1px solid #ece0da;
-  width: 55%;
 }
+.vector-toc .vector-toc-list-item { margin: 1px 0 !important; list-style: none !important; }
+.vector-toc .vector-toc-link:hover { background: #fbf1ec; color: var(--orange) !important; }
-.mw-heading .mw-editsection,
+/* The one entry the reader is actually on */
-.adhyaya-block .mw-editsection { display: none !important; }
+.vector-toc .vector-toc-link.gr-toc-current,
+.vector-toc .vector-toc-link.gr-toc-current .vector-toc-text {
+  color: var(--orange) !important; font-weight: 700 !important;
+}
+.vector-toc .vector-toc-link.gr-toc-current {
+  background: #fdf1e9; box-shadow: inset 2px 0 0 var(--orange);
+}
+/* Its parent sections: darker text only, so the path is readable without
+   the whole branch lighting up */
+.vector-toc .vector-toc-list-item.gr-toc-in-path > .vector-toc-link {
+  color: var(--text) !important; font-weight: 600 !important;
+}
+/* Vector's own active class can sit on a parent as well as the current
+   item, which is what made whole branches highlight — neutralised here;
+   the gr-toc- classes above are the ones that carry the state. */
+.vector-toc .vector-toc-list-item-active > .vector-toc-link,
+.vector-toc .vector-toc-list-item-active > .vector-toc-link * {
+  color: inherit; font-weight: inherit;
+}
+.vector-toc .cdx-button.vector-toc-toggle {
+  background: none !important; border: none !important;
+  box-shadow: none !important; color: var(--text) !important;
+}
-.mw-parser-output p { margin: 0 0 0.6rem; }       /* REDUCED */
+/* ── 7. HEADINGS ───────────────────────────────────────────────── */
-.mw-parser-output p:empty,
+.mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4,
-.mw-parser-output > div > p:empty,
+.mw-parser-output .mw-heading h1, .mw-parser-output .mw-heading h2,
-.mw-heading + p:empty,
+.mw-parser-output .mw-heading h3 {
-.mw-heading2 + p:empty,
+  font-family: var(--font-indic);
-.adhyaya-block + p:empty,
+   border: none !important; padding: 0 !important; background: none !important;
-.verse-block + p:empty {
-   display: none !important; margin: 0 !important;
 }
+.mw-parser-output .mw-heading { border: none !important; margin: 0; padding: 0; }
-/* ── Verse blocks — tightened spacing ────────────────────────── */
+.mw-heading, .mw-heading2, .mw-heading3 { text-align:center; }
-.shloka-block {
+.mw-parser-output h2, .mw-parser-output .mw-heading2 h2 {
-   display: block;
+   font-size: 1.2em !important; font-weight: 500 !important;
-   text-align: left;
+   color: var(--maroon) !important; line-height: 1.8;
-   margin: 3px 0 0;
+  margin: 24px 0 4px !important;
+  border-bottom: 2px dotted var(--maroon) !important;
+  width: 75%; font-family: var(--font-indic); text-align: center;
+}
+.mw-parser-output h3, .mw-parser-output .mw-heading3 h3 {
+  font-size: 1em !important; font-weight: 500 !important;
+  color: var(--orange) !important; line-height: 1.5;
+   margin: 24px 0 8px !important;
+  border-bottom: 1px dotted var(--orange) !important;
+  width: 55%; font-family: var(--font-indic); text-align: center;
 }
-.shloka-line {
+/* ── 8. PARAGRAPHS ─────────────────────────────────────────────── */
-   display: block;
+.mw-parser-output p { margin: 0 0 0.35rem !important; }
-  font-style: normal;
-  color: #333;
+/* ── 9. DOCUMENT TITLE ─────────────────────────────────────────── */
-   line-height: 1.35;
+.gr-doc-title {
-   margin: 0;
+   font-size: 2em; font-weight: 500; color: var(--maroon);
+   line-height: 1.4; margin: 0 0 16px; border: none !important;
+   text-align:center; font-family: var(--font-deva);
 }
-.verse-block {
+/* Headings take AdishilaDev (--font-deva) rather than the general Indic
-  display: block;
+   stack, so the heading face is the same everywhere regardless of what
-  margin: 6px 0 0;            /* REDUCED from 10px */
+   else a page mixes in. */
-   text-align: left;
+#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,
+#mw-content-text h4, #mw-content-text h5,
+.mw-heading h1, .mw-heading h2, .mw-heading h3, .mw-heading h4,
+.teeka-title, .gr-teeka-dropdown-header, .gr-sticky-title {
+   font-family: var(--font-deva);
 }
+/* ── 10. VERSE BLOCKS ──────────────────────────────────────────── */
+.shloka-block { display: block; text-align: left; margin: 3px 0 0; padding-bottom: 0.5em; }
+.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0;
+  font-family: var(--font-indic); }
+.verse-block { display: block; margin: 6px 0 0; text-align: left; }
 .verse-block .shloka-block { text-align: left; margin: 0; }
 .verse-block .shloka-line {
-   display: block;
+   display: block; font-weight: 500; line-height: 1.35; margin: 0; color: var(--maroon);
-  font-style: italic;
+   font-family: var(--font-indic);
-  color: #c65;
-  font-weight: 500;
-  line-height: 1.35;
-   margin: 0;
 }
+.verse-block.normal .shloka-line { color: #555; }
+.verse-block + p { display: none !important; margin: 0 !important; }
+.mw-parser-output .verse-block,
+.mw-parser-output .shloka-block { margin-top: 2px !important; margin-bottom: 2px !important; }
-.verse-block + p { display: none !important; margin: 0 !important; }
+.gr-verse-text, .verse-line, .verse-text {
+  color: #b5451b; line-height: 1.5; display: block; margin: 0.1em 0;
+}
+.gr-verse-type-sutra .gr-verse-text,
+.verse-block[data-type="sutra"] .verse-line { font-style: normal; font-weight: 600; color: #b5451b; }
-/* ── Uvacha ───────────────────────────────────────────────────── */
+/* ── 11. UVACHA ────────────────────────────────────────────────── */
 .uvacha-block {
-   display: block;
+   display: block; font-weight: bold; color: #c65;
-  font-weight: bold; color: #c65;
+   margin: 0.5rem 0 0; padding: 2px 0 2px 12px;
-   margin: 0.5rem 0 0;
+   border-left: 3px solid #c65; font-style: normal;
-  padding: 2px 0 2px 12px;
-   border-left: 3px solid #c65;
-  text-align: left; font-style: normal;
 }
 .uvacha-block + .verse-block { margin-top: 2px; }
+.gr-uvaaca, .uvaaca {
+  color: #b5451b; font-weight: 600; font-size: 0.92em; margin: 0.5em 0 0.2em 0; display: block;
+}
-/* ── Bhashyam ─────────────────────────────────────────────────── */
+/* ── 12. BHASHYAM ──────────────────────────────────────────────── */
 .bhashyam-block {
-   display: block;
+   display: block; font-size: 1em; line-height: 1.6; color: #555;
-  font-size: 1em; line-height: 1.6;
-  color: #555;
-  margin: 0.25em 0 0.35em 48px;
    padding: 0; border: none; background: transparent;
+  font-family: var(--font-indic);
+}
+.gr-bhashyam, .commentary-bhashyam {
+  color: #222; font-style: normal; line-height: 1.75; margin: 0.3em 0 0.5em 0;
 }
+.gr-leading-bhashya { color: #555; }
-/* ── Padya ────────────────────────────────────────────────────── */
+/* ── 13. PADYA ─────────────────────────────────────────────────── */
 .padya-block {
-   display: block; font-size: 1em; line-height: 1.75;
+   display: block; font-size: 1em; line-height: 1.75; color: #c65 !important;
-  color: #c65 !important; font-style: italic; font-weight: 500;
+  font-weight: 500; margin: 0.4em 0 0.6em 60px;
-  margin: 0.4em 0 0.6em 60px; padding: 0; border: none; background: transparent;
 }
+.gr-padapatha { font-size: 0.9em; color: #555; margin: 0.2em 0 0.3em 0.8em; }
-/* ── Prateeka (inline bold lemma) ────────────────────────────── */
+/* ── 14. TEEKA ─────────────────────────────────────────────────── */
-.gr-prateeka { font-weight: bold; font-style: normal; color: #333; }
-/* ── Mulaprateeka (block-level centered bold) ────────────────── */
-.gr-mulaprateeka-block {
-  display: block; font-weight: bold; font-style: normal;
-  text-align: center; color: #333;
-  margin: 0.7em 0 0.3em; line-height: 1.5;
-}
-/* ── 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;
+   padding: 6px 10px 8px; margin: 0.3em 0; line-height: 1.6; color: #555; background: #fcf5f3;
-   padding: 6px 10px 8px;
+    border-radius: 12px;
-  margin: 0.3em 0;
+   font-family: var(--font-indic);
-  font-size: 0.92em;
-  line-height: 1.6;
-  color: #555;
-  background: #fffdf5;
-   border: 1px solid #f0e0b0;
 }
 .teeka-title {
-   font-family: system-ui, -apple-system, sans-serif !important;
+   font-family: var(--font-indic) !important;
-   font-size: 0.75em; font-weight: 700;
+   font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
-  letter-spacing: 0.06em; text-transform: uppercase;
+   margin-bottom: 4px; padding-bottom: 3px;
-   color: #a07040; margin-bottom: 4px; padding-bottom: 3px;
-  border-bottom: 1px solid #e8d4a0;
 }
-.teeka-body { font-family: inherit; margin: 0; }
+.teeka-body .shloka-block {
-.teeka-block .shloka-block {
+   margin: 0.4em 0; padding: 0.3em 0.6em; font-family: var(--font-indic);
-   margin: 0 0 0.35em;
-  text-align: left;
-  padding: 0;
 }
-.teeka-block .shloka-line {
+.teeka-body .shloka-line { font-size: 0.97em; font-family: var(--font-indic); }
-  display: block; font-style: italic; color: #be100e;
-  line-height: 1.4; font-size: 0.97em; margin: 0;
+/* ── 15. PRATEEKA / MOOLA ──────────────────────────────────────── */
-}
+.gr-prateeka { font-weight: bold; font-style: normal; color: #333; font-family: 'AdishilaBold' }
-/* Vyakhya sub-headings rendered as h4 (wikitext === not parsed inside divs) */
+.gr-mulaprateeka-block {
-.gr-vyakhya-head, .gr-section-head {
+   font-family: 'AdishilaItalic';
-   font-size: 0.88em; font-weight: 700;
+  text-align: center; color: #333; margin: 0.7em 0 0.3em; line-height: 1.5;
-  color: #6a3e00; margin: 0.4em 0 0.2em;
-  font-family: inherit;
-  border: none;
 }
+.gr-moola { font-weight: bold; color: #c65; }
-/* ── Adhyaya block ────────────────────────────────────────────── */
+/* ── 16. ADHYAYA ───────────────────────────────────────────────── */
 .adhyaya-block { margin: 0 0 4px; }
 .adhyaya-trans { font-size: 0.9em; color: #666; margin: 2px 0 0; }
 .adhyaya-intro { margin-top: 8px; line-height: 1.75; color: #555; }
+.introduction p { color: var(--dark-gray); font-weight: 400; margin: 0 !important; padding: 0 !important; }
+.introduction { padding-bottom: 0.5em; text-align: justify; }
-/* ── Nyaya ────────────────────────────────────────────────────── */
+/* ── 17. NYAYA / PRASNA ────────────────────────────────────────── */
 .nyaya-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }
 .nyaya-title {
-   font-size: 1em; font-weight: 500; color: #e65100;
+   font-size: 1em; font-weight: 500; color: var(--orange);
-   margin-bottom: 0.4rem; border-bottom: 1px dotted #e65100; width: 50%;
+   margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;
 }
-.nyaya-title span { display: block; font-size: 0.85em; color: #666; }
 .nyaya-body { color: #555; line-height: 1.75; margin-top: 0.5rem; }
-/* ── Prasna ───────────────────────────────────────────────────── */
 .prasna-block { margin: 32px 0; padding-top: 12px; border-top: 1px solid #eee; }
 .prasna-title {
-   font-size: 1em; font-weight: 500; color: #e65100;
+   font-size: 1em; font-weight: 500; color: var(--orange);
-   margin-bottom: 0.4rem; border-bottom: 1px dotted #e65100; width: 50%;
+   margin-bottom: 0.4rem; border-bottom: 1px dotted var(--orange); width: 50%;
 }
-.prasna-title span { display: block; font-size: 0.85em; color: #666; }
 .prasna-question, .prasna-answer { color: #555; line-height: 1.75; margin-top: 0.5rem; }
 .prasna-answer { margin-left: 60px; }
-/* ── Verse action buttons ─────────────────────────────────────── */
+/* ── 18. VYAKHYA ELEMENTS ──────────────────────────────────────── */
+.gr-vyakhya-head, .gr-section-head {
+  font-size: 0.9em; font-weight: 700; color: var(--orange);
+  margin: 0.35em 0 0.15em; font-family: inherit; border: none; padding: 0;
+}
+.gr-avataranika {
+  color: #444; margin: 0.2em 0 0.5em 0.5em;
+  padding-left: 0.6em; border-left: 2px solid #c9a96e; line-height: 1.6;
+}
+.gr-vyakhya-pada {
+  font-size: 0.88em; color: #555; background: #fafafa;
+  border: 1px solid #e8e0d0; border-radius: 4px; padding: 0.5em 0.8em;
+  margin: 0.5em 0; line-height: 1.5; white-space: pre-wrap;
+}
+.gr-vyakhya-gadya {
+  font-weight: bold;
+}
+.gr-vyakhya-para { margin: 0 0 0.5em 0; line-height: 1.65; color: #444; }
+.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }
+.gr-gadya {
+ font-family: 'Adishila';font-weight: bold; display: block !important; margin-left: 0.2em;}
+.gr-author-note {
+  font-style: italic; color: var(--maroon); text-align: center; font-size: 0.9em;
+  margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: var(--font-indic)
+}
+.gr-devatachandas {
+    font-size: 1em;
+    color: #f77628;
+    font-weight: 500;
+    margin-top: 10px;
+    text-align: center; }
+.gr-vargikarana   {
+    font-size: 1em;
+    color: #f77628;
+    font-weight: 500;
+    margin-top: 10px;
+    text-align: center; }
+.gr-veda {
+ font-family: "AdishilaVedic";
+}
+/* ── 20. BHASHYA COLLECTION ────────────────────────────────────── */
+.mw-parser-output .bhashya-collection { margin: 0; padding: 0; }
+.mw-parser-output .bhashya + p:empty,
+.mw-parser-output .verse + p:empty,
+.mw-parser-output .bhashya-collection + p:empty,
+.mw-parser-output .pramana + p:empty,
+.mw-parser-output .author-note + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }
+/* ── 21. VERSE ACTIONS ─────────────────────────────────────────── */
 .verse-actions {
-   display: flex; flex-direction: row;
+   display: flex; flex-direction: row; align-items: center;
-  align-items: center; gap: 6px; margin-top: 4px;
+  gap: 6px; margin-top: 4px; justify-content: center;
-  padding-left: 2px; justify-content: center;
 }
 .verse-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
-   padding: 4px; border-radius: 6px; cursor: pointer;
+   padding: 4px; border-radius: 6px; cursor: pointer; opacity: 0.75; transition: all 0.2s;
-  opacity: 0.75; transition: all 0.2s ease;
 }
 .verse-action-btn:hover { opacity: 1; background-color: rgba(0,0,0,0.05); }
+.icon { display: inline-block; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: contain; }
-.icon {
-  display: inline-block; width: 18px; height: 18px;
-  background-repeat: no-repeat; background-position: center;
-  background-size: contain; transform: translateY(2px);
-  pointer-events: none;
-}
 .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%;
    transform: translateX(-50%) translateY(4px);
    white-space: nowrap; pointer-events: none; z-index: 9999;
-   display: inline-flex; align-items: center;
+   display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
-  padding: 2px 8px; border-radius: 999px;
+   font-size: 0.75rem; font-weight: 500; background: rgba(30,30,30,0.82); color: #fff;
-   font-size: 0.75rem; font-weight: 500;
+   opacity: 0; transition: opacity 0.2s, transform 0.2s;
-  background: rgba(30,30,30,0.82); color: #fff;
-   backdrop-filter: blur(6px); opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.copy-tooltip.copy-tooltip-visible {
-  opacity: 1; transform: translateX(-50%) translateY(0);
 }
+.copy-tooltip.copy-tooltip-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
-/* ── Code / pre ───────────────────────────────────────────────── */
+/* ── 22. CODE / PRE ────────────────────────────────────────────── */
 pre, code, .mw-code, tt, kbd {
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+   font-family: 'Adishila', 'Noto Serif Devanagari', serif ;
-   background-color: transparent !important; border: none !important;
+   background-color: transparent !important; border: none !important; padding: 0.3em 0 !important;
-  padding: 0.3em 0 !important; line-height: 1.65;
 }
 .mw-collapsible, .mw-collapsible-content, blockquote, .quotebox {
    background-color: transparent !important; border: none !important;
@@ Line 280: / Line 730: @@
 }
-.cargo-store-only { display: none !important; }
+/* ── 23. INLINE TOC BOX (wikitext __TOC__) ─────────────────────── */
-/* ── TOC — inline box ─────────────────────────────────────────── */
 .toc {
-   display: block !important; background: #fffdf5;
+   display: block !important; background: #fffdf5; border: 1px solid #e8c88a;
-  border: 1px solid #e8c88a; border-radius: 8px;
+  border-radius: 8px; padding: 12px 16px; margin: 0 0 24px 0;
-  padding: 12px 16px; margin: 0 0 24px 0;
    width: fit-content; min-width: 220px; max-width: 420px;
    font-size: 0.9em; line-height: 2;
-  font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
 }
 .toc h2, .toc .toctitle {
-   font-size: 0.85em !important; font-weight: 600 !important;
+   font-size: 0.85em !important; font-weight: 600 !important; color: var(--text) !important;
-  color: #5a3a00 !important; border: none !important;
+   border: none !important; margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: 0.05em;
-   border-bottom: none !important; width: auto !important;
-  margin: 0 0 6px !important; text-transform: uppercase; letter-spacing: 0.05em;
 }
 .toc ul { margin: 0 !important; padding-left: 1.2em !important; list-style: none !important; }
 .toc li { margin: 0; padding: 0; }
-.toc a { color: #7a4a10 !important; text-decoration: none !important; }
+.toc a { color: var(--text) !important; text-decoration: none !important; }
-.toc a:hover { color: #f57c00 !important; }
+.toc a:hover { color: var(--light-orange) !important; }
-.toc .toclevel-1 > a { font-weight: 600; color: #5a3a00 !important; }
+.toc .toclevel-1 > a { font-weight: 600; }
-.toc .toclevel-2 > a { color: #7a4a10 !important; }
+.tocnumber { display: none; }
-.toc .toclevel-3 > a { color: #9a6020 !important; font-size: 0.95em; }
-.tocnumber { color: #aaa; margin-right: 4px; font-size: 0.85em; }
-/* ── Vector 2022 sidebar TOC ──────────────────────────────────── */
+/* ── 24. DOC TEEKAS + TOC NAV ──────────────────────────────────── */
-/* Only override colours, sizes, and chevron styling.
+.gr-doc-teekas { margin-bottom: 1em; }
- * Never override display/flex/layout — Vector 2022 manages its own
+.gr-doc-teekas + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }
- * TOC layout and overriding it breaks multi-script rendering. */
+/* मूलम् / उल्लेख — real buttons, not grey chips: they are how a reader
-.vector-toc {
+   moves between the text and its commentaries, so they read as actions.
-   font-size: 0.95em !important;
+   Used by the desktop TOC and the mobile document nav alike. */
-   line-height: 1.6 !important;
+.toc-main-links {
+  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center;
+  margin: 6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #f1e3dc;
+}
+/* Sitting under the document title in the page, not in the panel */
+#gr-toc-doc-nav.toc-main-links { margin: 10px auto 22px; max-width: 640px; }
+.toc-main-link-item {
+  flex: 0 1 auto; min-width: 92px; text-align: center;
+  font-family: var(--font-indic); font-size: 18px; font-weight: 600; line-height: 1.4;
+  color: #fff !important; background: #b5451b; border: 0; border-radius: 999px;
+  padding: 9px 18px; text-decoration: none !important;
+  box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);
+  transition: background 0.15s, box-shadow 0.15s;
+}
+.toc-main-link-item:visited { color: #fff !important; }
+.toc-main-link-item:hover,
+.toc-main-link-item:focus-visible { background: #97370f !important; color: #fff !important; box-shadow: 0 2px 6px rgba(60, 20, 10, 0.26); }
+/* Phone: the same buttons as a pill row under the document title, shaped
+   like the reader toolbar's controls. White on the brand colour, stated
+   with !important because the skin colours links on its own. */
+.skin-minerva #gr-mob-doc-nav {
+  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
+  margin: 4px 0 14px; padding: 0 12px 14px; border-bottom: 1px solid #f0e0d6;
+}
+.skin-minerva #gr-mob-doc-nav .toc-main-link-item { font-size: 17px; padding: 11px 26px; min-width: 116px; }
+.skin-minerva .toc-main-link-item,
+.skin-minerva .toc-main-link-item:visited,
+.skin-minerva .toc-main-link-item:active { color: #fff !important; }
+/* ── 25. MAIN PAGE ─────────────────────────────────────────────── */
+body.page-Main_Page #mw-panel,
+body.page-Main_Page .vector-sidebar-container { display: none !important; }
+.gr-home { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }
+.gr-home-page-title {
+   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+   text-align: center; font-size: 1.8em; font-weight: 500; color: #1a2e40; margin: 24px 0 32px;
 }
-/* "Contents" heading */
+/* Section label: centred, with a rule running out on each side */
-.vector-toc .vector-toc-title {
+.gr-home-group-label {
-   font-size: 0.72em !important;
+   display: flex; align-items: center; gap: 16px;
-   font-weight: 700 !important;
+   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
-   text-transform: uppercase;
+   font-size: 1.1em; font-weight: 600; color: #1a2e40;
-  letter-spacing: 0.08em;
+   margin: 40px 0 18px; padding: 0; border: 0;
-  color: #b07040 !important;
+}
-   font-family: system-ui, sans-serif !important;
+.gr-home-group-label::before,
-   margin-bottom: 2px !important;
+.gr-home-group-label::after {
+   content: ""; flex: 1; height: 1px;
 }
+.gr-home-group-label::before { background: linear-gradient(90deg, transparent, #e2c3b9); }
+.gr-home-group-label::after  { background: linear-gradient(90deg, #e2c3b9, transparent); }
+#gr-view-grantha > .gr-home-group-label:first-child { margin-top: 8px; }
-/* Chevron toggle button — colour and size only, no layout override */
+/* Cards sit on a grid, so every row lines up */
-.vector-toc .cdx-button.vector-toc-toggle {
+.gr-home-grid {
-   background: none !important;
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  border: none !important;
+  gap: 20px; align-items: start; margin-bottom: 12px;
-   box-shadow: none !important;
+}
-   color: #9a6030 !important;
+.gr-home-card {
-   opacity: 1 !important;
+   background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;
-   transition: color 0.15s !important;
+   box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);
+  padding: 0; min-width: 0; overflow: hidden;
+}
+.gr-home-card-title {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+  font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+   font-size: 1em; font-weight: 600; color: #1a2e40; text-align: center; line-height: 1.4;
+   margin: 0; padding: 12px 16px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc;
+}
+.gr-home-card-count {
+   flex: none; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid #ecd3ca;
+  color: #c0392b; font: 600 11px/1.7 system-ui, sans-serif;
 }
-.vector-toc .cdx-button.vector-toc-toggle:hover {
-   color: #f57c00 !important;
+/* Numbered rows: number in a soft circle, a hairline between rows */
-   background: none !important;
+.gr-home-card ol { margin: 0; padding: 6px 0 8px; list-style: none; counter-reset: gr-item; }
+/* Each row is a two-column grid: number | title. The number sits in the
+   title's own row and is centred on it, so it lines up whatever the font. */
+.gr-home-card li {
+  counter-increment: gr-item; list-style: none;
+  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: center;
+   margin: 0; padding: 8px 16px; border-top: 1px solid #f6efec;
+   font-size: 0.95em; line-height: 1.6; color: #333; overflow-wrap: anywhere;
 }
-.vector-toc .cdx-button.vector-toc-toggle svg {
+.gr-home-card li:first-child { border-top: 0; }
-   fill: currentColor !important;
+.gr-home-card li::before {
+   content: counter(gr-item);
+  grid-column: 1; grid-row: 1; justify-self: center;
+  min-width: 22px; height: 22px; padding: 0 4px; box-sizing: border-box; border-radius: 11px;
+  background: #fbece8; color: #c0392b; text-align: center; font: 600 11px/22px system-ui, sans-serif;
 }
+.gr-home-card li > * { grid-column: 2; }
+.gr-home-card li > a:first-child, .gr-home-card li > a:first-of-type { grid-row: 1; }
+.gr-home-card li:hover { background: #fdf8f6; }
+.gr-home-card li a { color: #c0392b; text-decoration: none; }
+.gr-home-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }
+.gr-home-card li a.new { color: #c08080; }
+.gr-home-note { display: block; font-size: 0.82em; color: #888; line-height: 1.4; }
-/* Hide section numbers in TOC — consistent across all scripts */
+/* A card with a long list (Madhvacharya's 38 works) spans two columns */
-.vector-toc .vector-toc-numb {
+@media (min-width: 900px) {
-   display: none !important;
+  .gr-home-card.gr-home-card-wide { grid-column: span 2; }
+  .gr-home-card.gr-home-card-wide ol { column-count: 2; column-gap: 0; column-rule: 1px solid #f3e9e5; }
+   .gr-home-card.gr-home-card-wide li { break-inside: avoid; }
 }
-/* Allow long section names (Kannada, Tamil, etc.) to wrap rather than
+/* ── 26. TOGGLE BUTTONS ────────────────────────────────────────── */
- * overflow or overlap. Vector sets nowrap by default which causes
+/* One segmented control instead of two separate buttons */
- * multi-script long titles to bleed out of the sidebar column. */
+.gr-home-toggle {
-.vector-toc .vector-toc-text {
+  display: flex; gap: 4px; width: max-content; max-width: 100%; box-sizing: border-box;
-   white-space: normal !important;
+  margin: 4px auto 28px; padding: 4px;
-   word-break: break-word !important;
+  background: #f7ece8; border: 1px solid #efd9d1; border-radius: 999px;
-  overflow-wrap: anywhere !important;
+}
-   line-height: 1.35 !important;
+.gr-toggle-btn {
-   display: inline !important;
+   font-family: 'Adishila', 'Noto Serif Devanagari', serif;
+   font-size: 0.88em; padding: 7px 24px; border: 0; border-radius: 999px; text-align: center;
+   background: transparent; color: #a0402f; cursor: pointer; user-select: none;
+   transition: background 0.15s, color 0.15s, box-shadow 0.15s;
 }
+.gr-toggle-btn:hover { background: rgba(255, 255, 255, 0.7); color: #c0392b; }
+.gr-toggle-btn.gr-toggle-active { background: #c0392b; color: #fff; box-shadow: 0 1px 4px rgba(192, 57, 43, 0.35); }
+.gr-toggle-btn:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }
+/* ── 27. SCRIPT BAR ────────────────────────────────────────────── */
+.gr-script-bar { margin: 0 0 20px; font-size: 0.8em; color: #888; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.gr-script-label { font-family: system-ui, sans-serif; color: #aaa; }
+.gr-script-btn { font-family: 'Adishila', 'Noto Serif Devanagari', serif; color: #c0392b !important; text-decoration: underline dotted !important; cursor: pointer; }
+.gr-script-btn.active { color: #888 !important; text-decoration: none !important; cursor: default; }
+/* ── 28. MODALS ────────────────────────────────────────────────── */
+.grantha-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; z-index: 10000; }
+.grantha-modal-box { background: white; padding: 20px; border-radius: 10px; width: 300px; }
+.gm-title { font-weight: bold; margin-bottom: 10px; }
+.gm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
-.vector-toc a,
+/* ── 29. LOGIN PAGE ────────────────────────────────────────────── */
-.vector-toc .vector-toc-link { color: #5a3a00 !important; text-decoration: none !important; }
+body.page-Special_UserLogin .vector-search-box,
-.vector-toc a:hover,
+body.page-Special_UserLogin #p-search { display: none !important; }
-.vector-toc .vector-toc-link:hover { color: #f57c00 !important; }
+body.page-Special_UserLogin #content { max-width: 420px; margin: 40px auto !important; }
-/* ── TOC ACTIVE ITEM — fixed for Vector 2022 + Common.js span wrapping ─
+/* ── 30. SPECIAL PAGES ─────────────────────────────────────────── */
- *
+body.ns-special #footer, body.ns-special .mw-footer,
- * Common.js wraps every text node (including TOC link text) inside a
+body.ns-special .vector-footer { display: none !important; }
- * <span data-deva="…"> for transliteration. This means the direct >a
+body.ns-special .vector-page-tools { display: none !important; }
- * child selector fails — we need descendant selectors that reach into
- * the link regardless of span nesting.
+/* ── 31. MINERVA (mobile) ──────────────────────────────────────── */
- *
+.skin-minerva .mw-parser-output {
- * We also target BOTH the <a> element AND any [data-deva] span inside
+  font-size: 18px !important;
- * it to ensure the colour propagates regardless of how deep the span is.
+  line-height: 1.8 !important;
- * ──────────────────────────────────────────────────────────────────── */
+}
-.vector-toc .vector-toc-list-item-active .vector-toc-link,
+.skin-minerva .mw-parser-output h2,
-.vector-toc .vector-toc-list-item-active .vector-toc-link *,
+.skin-minerva .mw-parser-output .mw-heading2 h2 {
-.vector-toc .vector-toc-list-item-active > a,
+  width: 100% !important;
-.vector-toc .vector-toc-list-item-active > a *,
+}
-.vector-toc .vector-toc-level-1-active .vector-toc-link,
+.skin-minerva .mw-parser-output h3,
-.vector-toc .vector-toc-level-1-active .vector-toc-link * {
+.skin-minerva .mw-parser-output .mw-heading3 h3 {
-   color: #f57c00 !important;
+   width: 100% !important;
-  font-weight: 700 !important;
 }
+/* Home grid single column on Minerva */
-.vector-toc .vector-toc-level-1 > .vector-toc-link,
+.skin-minerva .gr-home-grid { grid-template-columns: 1fr; gap: 14px; }
-.vector-toc .vector-toc-level-1 > .vector-toc-link * {
+.skin-minerva .gr-home-toggle { width: 100%; margin: 4px 0 20px; }
-   font-weight: 600 !important; color: #3a1f00 !important;
+.skin-minerva .gr-toggle-btn { flex: 1; padding: 8px 10px; }
+.skin-minerva .gr-home-group-label { margin: 28px 0 14px; }
+/* Hide things that should be hidden on mobile too */
+.skin-minerva .catlinks,
+.skin-minerva #catlinks { display: none !important; }
+.skin-minerva .mw-editsection { display: none !important; }
+/* Minerva already has its own TOC — hide our inline .toc */
+.skin-minerva .toc { display: none !important; }
+/* ReaderToolbar on Minerva */
+.skin-minerva #gr-static-bar {
+  height: auto !important;
+  min-height: 52px !important;
+  overflow-x: auto !important;
+   overflow-y: hidden !important;
+  scrollbar-width: none !important;
 }
-.vector-toc .vector-toc-level-2 > .vector-toc-link,
+.skin-minerva #gr-static-bar::-webkit-scrollbar { display: none !important; }
-.vector-toc .vector-toc-level-2 > .vector-toc-link * { color: #5a3a00 !important; }
+.skin-minerva .gr-controls .gr-btn {
-.vector-toc .vector-toc-level-3 > .vector-toc-link,
+  height: 44px !important;
-.vector-toc .vector-toc-level-3 > .vector-toc-link * {
+   min-width: 44px !important;
-   color: #7a5010 !important; font-size: 0.95em !important;
+  font-size: 14px !important;
 }
-/* Override for active: must come AFTER level rules */
+.skin-minerva .gr-btn-staging { display: none !important; }
-.vector-toc .vector-toc-list-item-active .vector-toc-level-1 > .vector-toc-link,
+.skin-minerva .gr-controls .gr-sep { display: none !important; }
-.vector-toc .vector-toc-list-item-active .vector-toc-level-2 > .vector-toc-link,
+/* Minerva already shows page title — don't double-hide */
-.vector-toc .vector-toc-list-item-active .vector-toc-level-3 > .vector-toc-link {
+.skin-minerva h1.firstHeading { display: block !important; }
-  color: #f57c00 !important; font-weight: 700 !important;
+/* ── 32. PRINT ─────────────────────────────────────────────────── */
+@media print {
+  #gr-static-bar, .gr-controls, .vector-header-container { display: none !important; }
+  .mw-parser-output { font-size: 11pt !important; }
 }
-/* ── Doc teekas ───────────────────────────────────────────────── */
+/* ── 33. TYPOGRAPHY CLASSES ────────────────────────────────────── */
-.gr-doc-teekas { margin-bottom: 1em; }
-.gr-doc-teekas + p:empty { display: none !important; margin: 0 !important; height: 0 !important; }
+/* Heading — center, maroon, AdishilaDevGuru */
+.gr-heading {
+  display: block;
+  text-align: center;
+  font-size: 1.09em;
+  font-weight: 500;
+  color: #be100e;
+  font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
+  line-height: 1.4;
+  margin: 0.45em 0;
+}
-/* ── Main page ────────────────────────────────────────────────── */
+/* Sub-heading — center, orange, AdishilaDevGuru */
-.gr-home { max-width: 1080px; margin: 0 auto; padding: 0; }
+.gr-sub-heading {
-.gr-home-page-title {
+  display: block;
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+  text-align: center;
-   text-align: center; font-size: 1.8em; font-weight: 500;
+  font-size: 0.73em;
-   color: #1a2e40; margin: 24px 0 32px;
+  font-weight: 500;
+  color: #e65100;
+   font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
+   line-height: 1.5;
+   margin: 0.5em 0;
 }
-.gr-home-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
-.gr-home-card {
+/* Chapter Heading — center, maroon, AdishilaDevGuru */
-   background: #fff; border: 1px solid #e8e4df; border-radius: 10px;
+.gr-chapter-heading {
-   box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+  display: block;
-   padding: 18px 20px 20px; flex: 1 1 280px; min-width: 240px; max-width: 360px;
+  text-align: center;
+  font-size: 0.82em;
+  font-weight: 500;
+   color: #be100e;
+   font-family: 'AdishilaDevGuru', 'Adishila', 'Noto Serif Devanagari', serif;
+   line-height: 1.5;
+  margin: 0.5em 0;
 }
-.gr-home-card-title {
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+/* M.Veda Shloka — left, bold, maroon, AdishilaVed, 5mm indent */
-   font-size: 1em; font-weight: 600; color: #1a2e40;
+.gr-mv-shloka {
-   text-align: center; padding-bottom: 10px; margin-bottom: 12px;
+   display: block;
-   border-bottom: 1.5px solid #c0392b;
+  text-align: left;
+   font-size: 0.82em;
+  font-weight: bold;
+  color: #be100e;
+   font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;
+  padding-left: 0.86em;
+  margin: 0;
+   line-height: 1.75;
 }
-.gr-home-card ol { margin: 0; padding-left: 1.4em; list-style: decimal; }
-.gr-home-card li { font-size: 0.95em; line-height: 1.85; color: #333; }
+/* M.Veda Gadya — justify, bold, maroon, AdishilaVed */
-.gr-home-card li a { color: #c0392b; text-decoration: none; }
+.gr-mv-gadya {
-.gr-home-card li a:hover { text-decoration: underline; }
+  display: block;
-.gr-home-card li a.new { color: #c08080; }
+  text-align: justify;
-.gr-home-note { font-size: 0.82em; color: #888; }
+  font-size: 0.82em;
-.gr-home-group-label {
+  font-weight: bold;
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif !important;
+  color: #be100e;
-   font-size: 1.1em; font-weight: 600; color: #1a2e40;
+   font-family: 'AdishilaVed', 'Adishila', 'Noto Serif Devanagari', serif;
-   text-align: center; margin: 36px 0 16px; padding-bottom: 8px;
+   text-indent: 1.18em;
-   border-bottom: 2px solid #c0392b;
+  padding-left: 0.36em;
+   margin: 0;
+   line-height: 1.75;
 }
-/* ── Modals ───────────────────────────────────────────────────── */
+/* M.Shloka — left, bold, orange, AdishilaDev, 5mm indent */
-.grantha-new-btn {
+.gr-m-shloka {
-   background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
+   display: block;
-   color: white; padding: 6px 14px; border-radius: 20px; cursor: pointer; margin-right: 10px;
+  text-align: left;
+   font-weight: bold;
+  color: var(--maroon);
+  font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
+  margin: 0;
 }
-.grantha-modal {
-   position: fixed; inset: 0; background: rgba(0,0,0,0.35);
+/* B.Shloka / TK.Shloka / TP.Shloka — left, black, AdishilaDev */
-   display: flex; align-items: center; justify-content: center; z-index: 10000;
+.gr-b-shloka,
+.gr-tp-shloka {
+   display: block;
+  text-align: left;
+  font-weight: normal;
+   color: #1a1a1a;
+  font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
+  margin: 0;
 }
-.grantha-modal-box { background: white; padding: 20px; border-radius: 10px; width: 300px; }
-.gm-title { font-weight: bold; margin-bottom: 10px; }
-.gm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
-/* ── Main page sidebar hide ───────────────────────────────────── */
+/* Reference — orange, AdishilaDev */
-body.page-Main_Page #mw-panel,
+.gr-reference {
-body.page-Main_Page .vector-sidebar-container { display: none !important; }
+  font-family: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif; color: var(--maroon);
-body.page-Main_Page #footer { display: none !important; }
+}
-/* ── Main page view toggle ────────────────────────────────────── */
+/* Custom tag span — subtle dashed underline only */
-.gr-home-toggle { display: flex; gap: 8px; margin: 0 0 24px; justify-content: center; }
+.gr-custom {
-.gr-toggle-btn {
+   border-bottom: 1px dashed #b5451b;
-   font-family: 'Adishila', 'Noto Serif Devanagari', serif;
+   padding-bottom: 1px;
-  font-size: 0.88em; padding: 6px 20px;
-  border: 1.5px solid #c0392b; border-radius: 20px;
-  background: transparent; color: #c0392b;
-   cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s;
 }
-.gr-toggle-btn:hover { background: #fdf0ed; }
-.gr-toggle-btn.gr-toggle-active { background: #c0392b; color: #fff; }
-/* ── Script switcher bar ──────────────────────────────────────── */
+.gr-crosslink {
-.gr-script-bar {
+	color: #1a73e8;
-  margin: 0 0 20px; font-size: 0.8em; color: #888;
+	text-decoration: underline;
-  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+	cursor: pointer;
 }
-.gr-script-label { font-family: system-ui, sans-serif; color: #aaa; }
+.gr-crosslink:hover {
-.gr-script-btn {
+	color: #0b57cf;
-  font-family: 'Adishila', 'Noto Serif Devanagari', serif;
-  color: #c0392b !important; text-decoration: underline dotted !important; cursor: pointer;
 }
-.gr-script-btn.active { color: #888 !important; text-decoration: none !important; cursor: default; }
-/* ── Vector 2022 header ───────────────────────────────────────── */
+/* ── 34. MINERVA HEADER — orange theme + sticky ────────────────── */
-.vector-header-container {
+/* Kill space above header */
+.skin-minerva body { margin-top: 0 !important; padding-top: 0 !important; }
+.skin-minerva #mw-mf-viewport,
+.skin-minerva #mw-mf-page-center { margin-top: 0 !important; padding-top: 0 !important; }
+/* Header — orange, sticky */
+.skin-minerva header.header-container {
+  background: #b5451b !important;
+  position: fixed !important;
+  top: 0 !important;
+  z-index: 200 !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: #ffffff;
+}
+.skin-minerva .minerva-header {
    background: #b5451b !important;
-   border-bottom: 1px solid rgba(255,255,255,0.12);
+   display: flex !important;
+  align-items: center !important;
+  min-height: 54px !important;
+  padding: 0 12px !important;
+  margin: 0 !important;
+}
+.minerva-icon {
+ filter: brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1%) hue-rotate(296deg) brightness(104%) contrast(100%);
 }
-.vector-header {
-  background: transparent !important; max-width: 100% !important;
+/* Site name text */
-   display: flex !important; align-items: center !important;
+.skin-minerva .branding-box { background: transparent !important; }
-  justify-content: space-between !important;
+.skin-minerva .branding-box a {
-  padding-left: 20px !important; padding-right: 20px !important;
+  text-decoration: none !important;
+   display: flex !important;
+  align-items: center !important;
 }
-.vector-header-start {
+.skin-minerva .branding-box a span {
-   flex: 0 0 auto !important; display: flex !important;
+   color: #fff !important;
-   align-items: center !important; gap: 12px;
+  font-size: 18px !important;
+   font-weight: 700 !important;
+  font-family: system-ui, -apple-system, sans-serif !important;
+  white-space: nowrap !important;
 }
-.vector-header-end {
-   flex: 0 0 auto !important; display: flex !important;
+/* Hamburger + search icons — white */
-  align-items: center !important; gap: 16px; margin-left: auto;
+.skin-minerva .minerva-header label,
+.skin-minerva .minerva-header .search-toggle {
+   color: #fff !important;
 }
-.mw-logo { display: flex !important; align-items: center; opacity: 1 !important; }
+.skin-minerva .minerva-header svg path,
-.mw-logo-wordmark { color: #ffffff !important; font-weight: 700; font-size: 18px; }
+.skin-minerva .minerva-header svg rect,
-.mw-logo-icon { content: url('/favicon.ico'); width: 24px; height: 24px; }
+.skin-minerva .minerva-header svg circle {
-/* Invert header icons to white — but NOT the user-links area icons
+   fill: #fff !important;
- * (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;
 }
-/* Keep user-links icons visible at full opacity */
+.skin-minerva .minerva-header .mw-ui-icon:before {
-.vector-user-links .vector-icon,
+   color: #fff !important;
-#vector-user-links-dropdown .vector-icon,
+   filter: brightness(10) !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,
-.cdx-search-input__end-button path { filter: none !important; fill: #202124 !important; opacity: 1 !important; }
-.vector-header-end > *:not(#p-search) { color: rgba(255,255,255,0.9) !important; }
-.vector-user-links a { color: rgba(255,255,255,0.9) !important; }
-/* ── Hide: Watchlist, Appearance, fix user-menu dropdown text ──
+/* Reader toolbar below Minerva header */
- *
+.skin-minerva #gr-static-bar {
- * Vector 2022 header (right side, between username and chevron):
+   position: sticky !important;
- *   .mw-portlet-vector-user-menu-overflow  — overflow strip (watchlist ≡★)
+  top: 54px !important;
- *   #vector-appearance / pinned/unpinned containers — appearance panel
+  z-index: 100 !important;
- *
+}
- * 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.
+/* ── 35. MINERVA — auto-expand sections ────────────────────────── */
- * Do NOT hide .mw-portlet-vector-user-menu-overflow by class — on some
+.skin-minerva .collapsible-block,
- * Vector versions that portlet contains the profile/logout links too. */
+.skin-minerva .collapsible-heading + .collapsible-block {
-li#pt-watchlist,
+  display: block !important;
-li#pt-watchlist-kbd { display: none !important; }
+}
+.skin-minerva .mf-section-0,
+.skin-minerva .mf-section-1,
+.skin-minerva .mf-section-2,
+.skin-minerva .mf-section-3,
+.skin-minerva .mf-section-4,
+.skin-minerva .mf-section-5,
+.skin-minerva .mf-section-6,
+.skin-minerva .mf-section-7,
+.skin-minerva .mf-section-8,
+.skin-minerva .mf-section-9 {
+  display: block !important;
+}
+.skin-minerva .section-heading {
+  pointer-events: none !important;
+}
+.skin-minerva .section-heading .indicator {
+  display: none !important;
+}
+/* ── Hide MediaWiki default header user/account controls (desktop) ── */
+#pt-userpage-2,
+#p-vector-user-menu-userpage,
+/* Hide the right-side person-icon dropdown */
+#vector-user-links-dropdown,
+.vector-user-links-dropdown,
+#p-personal-more,
+.vector-user-menu,
+.mw-portlet-vector-user-menu-overflow,
+#pt-watchlist-2, #pt-watchlist {
+    display: none !important;
+}
+/* Hide original userpage text link */
+#p-vector-user-menu-userpage { display: none !important; }
-/* 2. Appearance panel — every container Vector 2022 might use */
+/* Hide the right-side person-icon user menu dropdown */
-#vector-appearance,
+#vector-user-links-dropdown { display: none !important; }
-#vector-appearance-pinned-container,
-#vector-appearance-unpinned-container,
-.mw-portlet-appearance,
-#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 */
+/* ── Custom username dropdown ── */
-/* The chevron (▾) opens .vector-user-menu which has a white card;
+#gr-user-dropdown {
- * the inherited header color: white must be overridden here. */
+    position: relative;
-.vector-user-menu .mw-list-item a,
+    display: inline-block;
-.vector-user-menu .vector-menu-content-list a,
+    font-family: system-ui, sans-serif;
-#p-personal .vector-menu-content a,
+}
-.mw-portlet-personal .vector-menu-content a,
+#gr-user-trigger {
-#vector-user-menu-overflow .vector-menu-content a { color: #202122 !important; }
+    display: inline-flex;
-.vector-user-menu .mw-list-item a:hover,
+    align-items: center;
-.vector-user-menu .vector-menu-content-list a:hover { color: #f57c00 !important; }
+    gap: 6px;
+    background: rgba(255,255,255,0.12);
+    border: none;
+    color: #fff;
+    font-size: 0.9em;
+    font-weight: 500;
+    padding: 6px 12px;
+    border-radius: 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+#gr-user-trigger:hover { background: rgba(255,255,255,0.2); }
+#gr-user-trigger .gr-caret { font-size: 0.7em; opacity: 0.8; }
-/* ── User dropdown — fix white text inside the menu ───────────── */
+#gr-user-menu {
-/* The dropdown card itself has a white/light background so links
+    position: absolute;
-   must be dark, not the header-inherited white. */
+    top: calc(100% + 6px);
-.vector-user-menu .vector-menu-content,
+    right: 0;
-.vector-user-menu .vector-menu-content a,
+    min-width: 180px;
-.vector-user-menu .vector-menu-content .mw-list-item a,
+    background: #fff;
-#pt-userpage, #pt-userpage a,
+    border: 1px solid #e0d8d2;
-.mw-portlet-personal .vector-menu-content a,
+    border-radius: 8px;
-/* OOUI dropdown items */
+    box-shadow: 0 6px 24px rgba(0,0,0,0.14);
-.oo-ui-menuSelectWidget a,
+    padding: 6px;
-.oo-ui-menuOptionWidget,
+    z-index: 1000;
-/* Codex menu */
+    display: none;
-.cdx-menu__listbox .cdx-menu-item__content,
-.cdx-menu__listbox a {
-  color: #202122 !important;
 }
-.vector-user-menu .vector-menu-content a:hover,
+#gr-user-menu.gr-open { display: block; }
-.mw-portlet-personal .vector-menu-content a:hover {
+#gr-user-menu a {
-  color: #f57c00 !important;
+    display: flex;
-  background: #fdf3ed !important;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 12px;
+    color: #2c1810;
+    text-decoration: none;
+    font-size: 0.92em;
+    border-radius: 6px;
+    white-space: nowrap;
 }
+#gr-user-menu a:hover { background: #f7f1ed; }
-#p-search { margin-left: 8px; }
+.vector-user-links a {
-.vector-search-box, .vector-search-box-expanded, .vector-search-box-auto-expand-width {
+    color: #1C1A17 !important;
-  min-width: 0 !important; flex-grow: 0 !important;
+}
-  position: relative !important; margin: 0 !important;
+.vector-user-links-main  {
+ display: none !important;
 }
-.cdx-search-input__input, .cdx-text-input__input {
+.gr-phone-row { margin-bottom: 12px; }
-  background: #ffffff !important; border: none !important;
+.gr-phone-label {
-  border-radius: 8px !important; color: #202124 !important;
+    display: block;
-  padding: 6px 10px !important; font-family: system-ui, sans-serif !important;
+    font-weight: 700;
+    font-size: 0.875rem;
+    margin-bottom: 6px;
 }
-.cdx-search-input__input::placeholder,
+.gr-phone-inputs {
-.cdx-text-input__input::placeholder { color: rgba(32,33,36,0.5) !important; }
+    display: flex;
-.cdx-search-input__end-button { background: transparent !important; border: none !important; }
+    gap: 8px;
-.cdx-typeahead-search, .cdx-typeahead-search__menu, .cdx-menu {
+    align-items: stretch;
-  background: #ffffff !important; color: #202124 !important;
+    height: 48px;
-  border-radius: 10px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
+    position: relative;
-  filter: none !important;
+    font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
-.cdx-menu-item, .cdx-menu-item * { color: #202124 !important; filter: none !important; }
+.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}
-.cdx-menu-item:hover, .cdx-menu-item--active, .cdx-menu-item--selected { background: #f1f3f4 !important; }
+.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}
-.cdx-menu-item__icon, .cdx-menu-item__icon svg,
-.cdx-menu-item__icon path { fill: #202124 !important; filter: none !important; }
-/* ── Gadya — styled as a sub-subheading (NOT adhyaya-title level) ─
+/* ── Country trigger button ── */
- *
+.gr-country-trigger {
- * Previously gadya used adhyaya-title styles which was too prominent.
+    display: flex;
- * Now it renders as a modest bold sub-heading, similar to h3 but
+    align-items: center;
- * without the dotted border, clearly below chapter level.
+    gap: 8px;
- * ──────────────────────────────────────────────────────────────── */
+    width: 101px;
-.gr-gadya,
+    border-radius: 12px;
-.verse-line.gr-gadya,
+    padding: 12px;
-.gr-verse-text.gr-gadya {
+    border: 1px solid #CED4DA;
-  display: block !important;
+    white-space: nowrap;
-  font-size: 0.96em !important;
+    background: #fff;
-  font-weight: 600 !important;
-  font-style: normal !important;
-  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;
 }
+.gr-country-trigger:hover { border-color: #72777d; }
+.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }
+.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }
+.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }
-/* ── Avataranika ──────────────────────────────────────────────── */
+/* ── Dropdown ── */
-.gr-avataranika {
+.gr-country-dropdown {
-  font-style: italic; color: #444;
+    position: absolute;
-  margin: 0 0 0.5em 0.5em; padding-left: 0.6em;
+    top: calc(100% + 4px); left: 0;
-  border-left: 2px solid #c9a96e; line-height: 1.6;
+    z-index: 9999;
+    width: 280px;
+    background: #fff;
+    border: 1px solid #a2a9b1;
+    border-radius: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+}
+.gr-country-search {
+    width: 100%; box-sizing: border-box;
+    padding: 8px 12px;
+    border: none; border-bottom: 1px solid #eee;
+    font-size: 0.9rem; outline: none;
+}
+.gr-country-list { max-height: 240px; overflow-y: auto; }
+.gr-country-option {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
 }
+.gr-country-option:hover { background: #f8f9fa; }
+.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }
+.gr-country-name { flex: 1; color: #202122; }
+.gr-country-dial { color: #54595d; font-size: 0.85rem; }
-/* ── Vyakhya-pada ─────────────────────────────────────────────── */
+.gr-phone-national:focus {
-.gr-vyakhya-pada {
+    outline: none; border-color: #4A433A;
-   font-size: 0.88em; color: #555;
+}
-   background: #fafafa; border: 1px solid #e8e0d0;
+/* Search Results Bar styles */
-   border-radius: 4px; padding: 0.5em 0.8em;
+.gr-search-hl-mobile {
-   margin: 0.5em 0; line-height: 1.5; white-space: pre-wrap;
+    position: fixed;
+    top: 105px;
+    left: 0px;
+    right: 0px;
+    z-index: 10200;
+    background: rgb(181, 69, 27);
+    color: rgb(255, 255, 255);   display: flex;
+    align-items: center;
+    justify-content: space-around;
+    font-family: "Noto Sans Devanagari", system-ui, sans-serif;
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
+    height: 52px;
+    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
+    padding: 5px 4px !important;
+    gap: 20px !important;
+}
+.gr-search-hl-mobile .gr-search-bar-btn {
+  height: 48px;
+  width: 48px;
+  border: none;
+   background: transparent;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+   justify-content: center;
+  position: relative;
+  transition: background 0.15s;
+  color: #fff;
+   font-size: 12px;
+  font-family: "Noto Sans Devanagari";
+  gap: 8px;
+  white-space: nowrap;
 }
-/* ── Vyakhya-gadya ────────────────────────────────────────────── */
+/* Hide Notes FAB, doc nav FAB and Reader toolbar on Updates/Help/About pages */
-.gr-vyakhya-gadya {
+body.page-My_wiki_Updates #gra-toggle,
-  font-weight: bold; font-size: 0.95em; text-align: center;
+body.page-My_wiki_Updates #se-docnav-btn,
-  color: #8b1a1a; margin: 0.8em 0 0.3em 0; letter-spacing: 0.03em;
+body.page-My_wiki_Updates #gr-static-bar,
+body.page-My_wiki_Help #gra-toggle,
+body.page-My_wiki_Help #se-docnav-btn,
+body.page-My_wiki_Help #gr-static-bar,
+body.page-My_wiki_About #gra-toggle,
+body.page-My_wiki_About #se-docnav-btn,
+body.page-My_wiki_About #gr-static-bar { display: none; }
+/* Welcome Page */
+/* Hide all chrome on Welcome */
+body.page-Welcome #mw-navigation,
+body.page-Welcome #mw-panel,
+body.page-Welcome #footer,
+body.page-Welcome .mw-footer,
+body.page-Welcome #siteSub,
+body.page-Welcome #contentSub,
+body.page-Welcome #firstHeading,
+body.page-Welcome .mw-page-title-main,
+body.page-Welcome .mw-indicators,
+body.page-Welcome .vector-header,
+body.page-Welcome .vector-page-toolbar,
+body.page-Welcome .vector-sticky-header,
+body.page-Welcome .mw-page-container,
+body.page-Welcome #gr-static-bar,
+body.page-Welcome #se-docnav-btn,
+body.page-Welcome #gra-toggle,
+body.page-Welcome #se-scrolltop {
+  display: none !important;
 }
+body.page-Welcome .mw-page-container
-/* ── Author note ──────────────────────────────────────────────── */
+/* Put the banner directly on the body of the Welcome page */
-.gr-author-note {
+body.page-Welcome {
-   font-style: italic; color: #666; text-align: center;
+   background-image: url('/images/banner.jpeg') !important;
-   font-size: 0.9em; margin: 0.8em 0 0.4em 0;
+  background-size: contain !important;
-   border-top: 1px solid #ddd; padding-top: 0.4em;
+  background-repeat: no-repeat !important;
+   background-position: center center !important;
+  background-attachment: fixed !important;
+   background-color: #3a0d0d !important;
+  cursor: pointer;
 }
-/* ── Leading bhashya ──────────────────────────────────────────── */
+/* Make the content area transparent so the body banner shows through */
-.gr-leading-bhashya { font-style: italic; color: #555; margin: 0.4em 0 0.5em 0; }
+body.page-Welcome #content,
+body.page-Welcome .mw-body,
+body.page-Welcome #mw-content-text,
+body.page-Welcome .mw-parser-output,
+body.page-Welcome #bodyContent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  min-height: 100vh;
+}
+/* Kill the white everywhere it's painted */
+body.page-Welcome,
+body.page-Welcome .mw-page-container,
+body.page-Welcome .mw-page-container-inner,
+body.page-Welcome .mw-content-container,
+body.page-Welcome #content,
+body.page-Welcome .mw-body,
+body.page-Welcome #mw-content-text,
+body.page-Welcome .mw-parser-output,
+body.page-Welcome #bodyContent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
-/* ── Verse text (general) ─────────────────────────────────────── */
+/* Put the banner on the body and force it full height */
-.gr-verse-text, .verse-line, .verse-text {
+body.page-Welcome {
-   color: #b5451b; font-style: italic; line-height: 1.5;  /* REDUCED */
+  background-image: url('/images/banner.jpeg') !important;
-   display: block; margin: 0.1em 0;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+   background-position: center center !important;
+  background-attachment: fixed !important;
+  background-color: #3a0d0d !important;
+   min-height: 100vh !important;
+  cursor: pointer;
 }
-.gr-verse-type-mantra .gr-verse-text,
+/* ---- Minerva (mobile) splash for Welcome ---- */
-.verse-block[data-type="mantra"] .verse-line { font-size: 1.05em; }
-.gr-verse-type-sutra .gr-verse-text,
-.verse-block[data-type="sutra"] .verse-line { font-style: normal; font-weight: 600; color: #b5451b; }
-/* ── Bhashyam / commentary prose ─────────────────────────────── */
+/* Hide all chrome on Welcome */
-.gr-bhashyam, .commentary-bhashyam {
+body.skin-minerva.page-Welcome .header-container,
-  color: #222; font-style: normal; line-height: 1.75; margin: 0.3em 0 0.5em 0;
+body.skin-minerva.page-Welcome .minerva-header,
+body.skin-minerva.page-Welcome #mw-mf-page-center > .header-container,
+body.skin-minerva.page-Welcome .banner-container,
+body.skin-minerva.page-Welcome .pre-content,
+body.skin-minerva.page-Welcome #page-actions,
+body.skin-minerva.page-Welcome .page-actions-menu,
+body.skin-minerva.page-Welcome .last-modified-bar,
+body.skin-minerva.page-Welcome .post-content,
+body.skin-minerva.page-Welcome #footer,
+body.skin-minerva.page-Welcome .minerva-footer,
+body.skin-minerva.page-Welcome .navigation-drawer,
+body.skin-minerva.page-Welcome .mw-page-title-main,
+body.skin-minerva.page-Welcome #section_0,
+body.skin-minerva.page-Welcome .pre-content .mw-ui-icon,
+body.skin-minerva.page-Welcome h1.mw-first-heading {
+  display: none !important;
 }
-/* ── Padapatha ────────────────────────────────────────────────── */
+/* Kill white on all Minerva container surfaces */
-.gr-padapatha { font-size: 0.9em; color: #555; margin: 0.2em 0 0.3em 0.8em; font-style: normal; }
+body.skin-minerva.page-Welcome,
+body.skin-minerva.page-Welcome #mw-mf-viewport,
+body.skin-minerva.page-Welcome #mw-mf-page-center,
+body.skin-minerva.page-Welcome #content,
+body.skin-minerva.page-Welcome .mw-body,
+body.skin-minerva.page-Welcome #mw-content-text,
+body.skin-minerva.page-Welcome .mw-parser-output,
+body.skin-minerva.page-Welcome #bodyContent {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
-/* ── Devatachandas / vargikarana ─────────────────────────────── */
+/* Put the banner on the body, full height */
-.gr-devatachandas { font-size: 0.82em; color: #777; font-style: normal; margin: 0.4em 0 0.2em 0; }
+body.skin-minerva.page-Welcome {
-.gr-vargikarana   { font-size: 0.82em; color: #888; font-style: normal; margin: 0.5em 0 0.1em 0; }
+  background-image: url('/images/banner.jpeg') !important;
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+   background-color: #3a0d0d !important;
+  min-height: 100vh !important;
+  cursor: pointer;
+}
+/* from LocalSettings line 393 */
+/* ===== HAMBURGER / SIDEBAR ===== */
+#mw-sidebar-button,
+.vector-main-menu,
+.vector-main-menu-container,
+.vector-main-menu-landmark,
+#vector-main-menu-dropdown {
+    display:none !important;
+}
-/* ── Uvaaca ───────────────────────────────────────────────────── */
+/* ===== FOOTER ===== */
-.gr-uvaaca, .uvaaca {
+#footer,
-  color: #b5451b; font-weight: 600; font-size: 0.92em;
+.mw-footer,
-  margin: 0.5em 0 0.2em 0; display: block;
+footer {
+    display:none !important;
 }
-/* ── Responsive ───────────────────────────────────────────────── */
+/* ===== LOGIN / SIGNUP PAGE CLEANUP ===== */
-@media (max-width: 600px) {
+body.page-Special_UserLogin #mw-sidebar-button,
-  .mw-parser-output { font-size: 16px; }
+body.page-Special_UserLogin .vector-main-menu,
-  .mw-parser-output h2, .mw-parser-output .mw-heading2 h2 { width: 100% !important; }
+body.page-Special_UserLogin .vector-page-toolbar,
-  .mw-parser-output h3, .mw-parser-output .mw-heading3 h3 { width: 100% !important; }
+body.page-Special_UserLogin .vector-page-tools,
-  .nyaya-title, .prasna-title { width: 100%; }
+body.page-Special_CreateAccount #mw-sidebar-button,
-  .bhashyam-block, .teeka-block { margin-left: 10px; }
+body.page-Special_CreateAccount .vector-main-menu,
-  .toc { max-width: 100%; }
+body.page-Special_CreateAccount .vector-page-toolbar,
-  .gr-gadya { width: 90%; }
+body.page-Special_CreateAccount .vector-page-tools,
+body.page-Special_PasswordReset #mw-sidebar-button,
+body.page-Special_PasswordReset .vector-main-menu,
+body.page-Special_PasswordReset .vector-page-toolbar,
+body.page-Special_PasswordReset .vector-page-tools {
+    display:none !important;
 }
+/* from LocalSettings line 436 */
+/* Kill every possible appearance container */
+#vector-appearance,
+#vector-appearance-dropdown,
+#vector-appearance-pinned-container,
+#vector-appearance-unpinned-container,
+[id*="appearance-dropdown"],
+[id*="appearance"][class*="vector"],
+.vector-dropdown[title*="Appearance"],
+.vector-dropdown[title*="appearance"] {
+    display:none !important;
+    visibility:hidden !important;
+    width:0 !important;
+    height:0 !important;
+    overflow:hidden !important;
+    margin:0 !important;
+    padding:0 !important;
+}
+/* Remove empty slot in header */
+.vector-page-tools,
+.vector-page-toolbar,
+.vector-header-end {
+    gap:0 !important;
+}
+/* from LocalSettings line 469 */
+/* Login page only */
+body.page-Special_UserLogin .vector-search-box,
+body.page-Special_UserLogin #p-search,
+body.page-Special_UserLogin .search-toggle,
+body.page-Special_UserLogin .vector-search-box-vue {
+    display:none !important;
+}
-/* ── Global spacing tightening ────────────────────────────────── */
+/* Show site wordmark/logo if hidden */
-.mw-parser-output p { margin-bottom: 0.35rem !important; }
+body.page-Special_UserLogin .mw-logo,
-.mw-parser-output .verse-block,
+body.page-Special_UserLogin .vector-logo,
-.mw-parser-output .shloka-block { margin-top: 2px !important; margin-bottom: 2px !important; }
+body.page-Special_UserLogin .vector-header-start {
+    display:flex !important;
+    visibility:visible !important;
+}
-/* ── Vyakhya sub-headings (h4 replaces === which breaks inside divs) */
+/* Cleaner top bar */
-.gr-vyakhya-head, .gr-section-head {
+body.page-Special_UserLogin .vector-header {
-  font-size: 0.9em;
+    justify-content:space-between !important;
-  font-weight: 700;
+    padding:0 16px !important;
-  color: #6a3e00;
-  margin: 0.35em 0 0.15em;
-  font-family: inherit;
-  border: none;
-  padding: 0;
 }
-/* ── Vyakhya page layout ──────────────────────────────────────── */
+/* Match Main_Page branded header bar */
-.gr-vyakhya-gadya { margin: 0.2em 0; line-height: 1.6; }
+body.page-Special_UserLogin .vector-header-container .mw-header {
-.gr-avataranika   { margin: 0.2em 0; line-height: 1.6; color: #555; }
+    background: #b5451b !important;
-.gr-embedded-bhashya { margin: 0.2em 0 0.2em 1em; line-height: 1.6; }
+}
+body.page-Special_UserLogin .mw-logo-wordmark,
-/* ── Individual vyakhya prose paragraphs ─────────────────────── */
+body.page-Special_UserLogin .mw-logo-wordmark strong {
-.gr-vyakhya-para {
+    color: #fff !important;
-  margin: 0 0 0.5em 0;
+}
-  line-height: 1.65;
+body.page-Special_UserLogin .mw-logo-container {
-  color: #444;
+    color: #fff !important;
 }
-.gr-vyakhya-para:last-child { margin-bottom: 0; }
-/* Shloka-lines inside teeka-block (quoted verses within commentary) */
+/* Single logo: favicon only (no quill gr-header-icon) */
-.teeka-body .shloka-block {
+body.page-Special_UserLogin .gr-header-icon {
-  margin: 0.4em 0;
+    display: none !important;
-  padding: 0.3em 0.6em;
-  border-left: 3px solid #e8c88a;
-  background: transparent;
 }
-.teeka-body .shloka-line {
+body.page-Special_UserLogin .mw-logo-icon {
-  color: #8a4a00;
+    display: inline-block !important;
-  font-style: italic;
+    width: 36px !important;
-  font-size: 0.97em;
+    height: 36px !important;
+    object-fit: contain !important;
 }
-/* ══════════════════════════════════════════════════════════════════
+/* Hide Create Account and Login Links in header starts */
-   TEEKA VIEW MODES
+body.page-Special_UserLogin .vector-header-end {
-   Applied to <body> by Common.js based on referrer / ?ref= param.
+    display: none !important;
+}
+/* Hide Create Account and Login Links in header end */
-   gr-standalone  — direct URL access: plain reading view
+/* from LocalSettings line 530 */
-   gr-ref-mode    — navigated from main doc: styled embedded view
+body.page-Special_PasswordReset .vector-search-box,
-   ══════════════════════════════════════════════════════════════════ */
+body.page-Special_PasswordReset #p-search,
+body.page-Special_PasswordReset .search-toggle,
+body.page-Special_PasswordReset .vector-search-box-vue {
+    display:none !important;
+}
+body.page-Special_PasswordReset .mw-logo,
+body.page-Special_PasswordReset .vector-logo,
+body.page-Special_PasswordReset .vector-header-start {
+    display:flex !important;
+    visibility:visible !important;
+}
+body.page-Special_PasswordReset .vector-header {
+    justify-content:space-between !important;
+    padding:0 16px !important;
+}
+body.page-Special_PasswordReset .vector-header-container .mw-header {
+    background: #b5451b !important;
+}
+body.page-Special_PasswordReset .mw-logo-wordmark,
+body.page-Special_PasswordReset .mw-logo-wordmark strong {
+    color: #fff !important;
+}
+body.page-Special_PasswordReset .mw-logo-container {
+    color: #fff !important;
+}
+body.page-Special_PasswordReset .gr-header-icon {
+    display: none !important;
+}
+body.page-Special_PasswordReset .mw-logo-icon {
+    display: inline-block !important;
+    width: 36px !important;
+    height: 36px !important;
+    object-fit: contain !important;
+}
+body.page-Special_PasswordReset .vector-header-end {
+    display: none !important;
+}
+body.page-Special_PasswordReset .vector-page-toolbar {
+    display: none !important;
+}
-/* ── Standalone mode: strip all container chrome ──────────────── */
+/* from LocalSettings line 584 */
-/* The gr-page-nav back-link is useful in standalone, keep it */
+body.page-Special_CreateAccount .vector-search-box,
-body.gr-standalone .gr-page-nav {
+body.page-Special_CreateAccount #p-search,
-  display: block;
+body.page-Special_CreateAccount .search-toggle,
+body.page-Special_CreateAccount .vector-search-box-vue {
+    display:none !important;
+}
+body.page-Special_CreateAccount .mw-logo,
+body.page-Special_CreateAccount .vector-logo,
+body.page-Special_CreateAccount .vector-header-start {
+    display:flex !important;
+    visibility:visible !important;
 }
-/* Remove coloured box — show as plain flowing text */
+body.page-Special_CreateAccount .vector-header {
-body.gr-standalone .teeka-block {
+    justify-content:space-between !important;
-  background: none !important;
+    padding:0 16px !important;
-  border: none !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
 }
-body.gr-standalone .teeka-title {
+body.page-Special_CreateAccount .vector-header-container .mw-header {
-  display: none !important;
+    background: #b5451b !important;
 }
-/* Each entry flows naturally, small separator between descriptors */
+body.page-Special_CreateAccount .mw-logo-wordmark,
-body.gr-standalone .gr-teeka-entry {
+body.page-Special_CreateAccount .mw-logo-wordmark strong {
-  border-bottom: 1px solid #f0e8d8;
+    color: #fff !important;
-  padding-bottom: 0.8em;
-  margin-bottom: 0.8em;
 }
-body.gr-standalone .gr-teeka-entry:last-of-type {
+body.page-Special_CreateAccount .mw-logo-container {
-  border-bottom: none;
+    color: #fff !important;
 }
-/* Shlokas in standalone get the normal verse color, no extra indent */
+body.page-Special_CreateAccount .gr-header-icon {
-body.gr-standalone .teeka-body .shloka-block {
+    display: none !important;
-  border-left: none;
-  padding-left: 0;
-  background: none;
 }
-body.gr-standalone .teeka-body .shloka-line {
+body.page-Special_CreateAccount .mw-logo-icon {
-  color: #be100e;
+    display: inline-block !important;
-  font-style: italic;
+    width: 36px !important;
+    height: 36px !important;
+    object-fit: contain !important;
 }
-/* Vyakhya headings still show, but lighter */
+body.page-Special_CreateAccount .vector-header-end {
-body.gr-standalone .gr-vyakhya-head {
+    display: none !important;
-  color: #a07040;
-  font-size: 0.95em;
-  margin-top: 0.8em;
 }
-/* ── Ref mode: full styled embedded view (default teeka-block look) ── */
+/* from LocalSettings line 635 */
-/* This is already the default from .teeka-block rules above.
+body.page-Special_UserLogin {
-   Explicit declarations here for clarity and override safety. */
+    background: #FAF6EE !important;
-body.gr-ref-mode .teeka-block {
+}
-  background: #fffdf5 !important;
+body.page-Special_UserLogin .mw-page-container,
-  border: 1px solid #f0e0b0 !important;
+body.page-Special_UserLogin .mw-page-container-inner,
-  padding: 6px 10px 8px !important;
+body.page-Special_UserLogin .mw-body {
-  border-radius: 5px !important;
+    background: transparent !important;
+}
+body.page-Special_UserLogin .mw-body-header,
+body.page-Special_UserLogin .vector-page-titlebar,
+body.page-Special_UserLogin #firstHeading {
+    display: none !important;
+}
+body.page-Special_UserLogin #content {
+    max-width: 440px !important;
+    margin: 28px auto 48px !important;
+    padding: 0 16px !important;
+    float: none !important;
+}
+body.page-Special_UserLogin #bodyContent,
+body.page-Special_UserLogin .mw-body-content {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+body.page-Special_UserLogin #userloginprompt:empty {
+    display: none !important;
+}
+body.page-Special_UserLogin .mw-body-content > .mw-ui-container {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
+    padding: 32px 32px 28px;
+    box-sizing: border-box;
+}
+body.page-Special_UserLogin .mw-body-content > .mw-ui-container::before {
+    content: "Login/Signup";
+    display: block;
+    text-align: center;
+    font-size: 24px;
+    color: #1C1A17;
+    margin-bottom: 22px;
+    font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+body.page-Special_UserLogin #userloginForm,
+body.page-Special_UserLogin #userloginForm form {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_UserLogin .mw-htmlform {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_UserLogin .mw-htmlform-field {
+    margin-bottom: 18px;
+}
+body.page-Special_UserLogin .cdx-label,
+body.page-Special_UserLogin .mw-htmlform-field > label {
+    display: block;
+    font-size: 0.875rem;
+    color: #1C1A17;
+    margin-bottom: 6px;
+    font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;
+}
+/* Codex: border on wrapper only (inner input has its own border = double line) */
+body.page-Special_UserLogin .cdx-text-input {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    background: #fff !important;
+    min-height: 46px;
+}
+body.page-Special_UserLogin .cdx-text-input__input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background: transparent !important;
+    padding: 12px 14px !important;
+    font-size: 1rem !important;
+    min-height: 44px;
+}
+body.page-Special_UserLogin .cdx-text-input:focus-within {
+    border-color: #ffffff !important;
+    box-shadow: rgba(177, 74, 46, 0.1) !important;
+}
+body.page-Special_UserLogin .cdx-text-input__input:focus {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+/* Fallback if inputs are not wrapped in Codex */
+body.page-Special_UserLogin input#wpName1,
+body.page-Special_UserLogin input#wpPassword1 {
+    width: 100% !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    padding: 12px 14px !important;
+    font-size: 1rem !important;
+    min-height: 46px;
+}
+body.page-Special_UserLogin input#wpName1:focus,
+body.page-Special_UserLogin input#wpPassword1:focus {
+    outline: none !important;
+    border-color: #b5451b !important;
+    box-shadow: rgba(177, 74, 46, 0.1) !important;
+}
+body.page-Special_UserLogin .mw-userlogin-rememberme {
+    display: none !important;
+}
+body.page-Special_UserLogin .gr-login-forgot-password {
+    text-align: left;
+    margin: 2px 0 14px;
+    padding: 0;
+}
+body.page-Special_UserLogin .gr-login-forgot-password a {
+    color: #b5451b !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem;
+    text-decoration: none !important;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_UserLogin .gr-login-forgot-password a:hover {
+    text-decoration: underline !important;
+}
+body.page-Special_UserLogin .mw-htmlform-field:has(#wpLoginAttempt),
+body.page-Special_UserLogin .mw-htmlform-submit {
+    margin-top: 8px;
+    margin-bottom: 0;
+}
+body.page-Special_UserLogin #wpLoginAttempt,
+body.page-Special_UserLogin #wpLoginAttempt.cdx-button {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    background: #b5451b !important;
+    border: none !important;
+    border-radius: 10px !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    padding: 14px 20px !important;
+    min-height: 48px;
+    cursor: pointer;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_UserLogin #wpLoginAttempt:hover {
+    background: #A33C20 !important;
+}
+body.page-Special_UserLogin .mw-userlogin-help,
+body.page-Special_UserLogin .mw-form-related-link-container,
+body.page-Special_UserLogin #mw-createaccount,
+body.page-Special_UserLogin #mw-createaccount-cta {
+    font-size: 0.9rem;
+    margin-top: 12px;
+}
+body.page-Special_UserLogin .mw-userlogin-help a,
+body.page-Special_UserLogin .mw-form-related-link-container a,
+body.page-Special_UserLogin #mw-createaccount a,
+body.page-Special_UserLogin #mw-createaccount-cta a {
+    color: #b5451b !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+}
+body.page-Special_UserLogin .mw-userlogin-help a:hover,
+body.page-Special_UserLogin .mw-form-related-link-container a:hover,
+body.page-Special_UserLogin #mw-createaccount a:hover,
+body.page-Special_UserLogin #mw-createaccount-cta a:hover {
+    text-decoration: underline !important;
+}
+body.page-Special_UserLogin .cdx-message,
+body.page-Special_UserLogin .mw-message-box {
+    border-radius: 10px;
+    margin-bottom: 16px;
+}
+body.page-Special_UserLogin .gr-google-login {
+    margin: 20px 0 4px;
+    padding: 0;
+}
+body.page-Special_UserLogin .gr-google-login-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    line-height: 0;
+    margin-top: -3px;
+}
+body.page-Special_UserLogin .gr-google-login-icon svg {
+    display: block;
 }
-body.gr-ref-mode .teeka-title {
+body.page-Special_UserLogin .gr-google-login-btn {
-  display: block !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 12px;
+    min-height: 44px;
+    border-radius: 12px;
+    border: 1px solid #e5e7eb;
+    background: #F3F4F6;
+    color: #1C1A17;
+    font-size: 14px;
+    text-decoration: none !important;
+    font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
 }
-/* The page-nav back-link is redundant when embedded in main doc */
+body.page-Special_UserLogin .gr-google-login-btn:hover {
-body.gr-ref-mode .gr-page-nav {
+    background: #f9fafb;
-  display: none;
+    border-color: #d1d5db;
 }
+body.page-Special_UserLogin .gr-google-login-divider {
-/* ── Default (no body class yet — JS may not have run) ────────── */
+    display: flex;
-/* Show styled until JS classifies */
+    align-items: center;
-.gr-teeka-page .teeka-block {
+    gap: 12px;
-  background: #fffdf5;
+    margin: 18px 0 16px;
-  border: 1px solid #f0e0b0;
+    color: #F4ECDF;
+    font-size: 14px;
+    font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
 }
-/* ═══════════════════════════════════════════════════════════════════
+body.page-Special_UserLogin .gr-google-login-divider::before,
-   Common.css — additions for v7  (append to existing Common.css)
+body.page-Special_UserLogin .gr-google-login-divider::after {
-   ═══════════════════════════════════════════════════════════════════ */
+    content: "";
+    flex: 1;
-/* ── TOC: Remove bold from all non-active level rules ─────────────
+    height: 1px;
- * Common.js v7 sets font-weight:400 !important on every inactive
+    background: #F4ECDF;
- * item via inline style, so the level-1 bold rule below would be
- * overridden anyway. These declarations make the CSS self-consistent
- * and work even if JS hasn't run yet. Active-item bold is handled
- * entirely by JS inline style. ──────────────────────────────────── */
-.vector-toc .vector-toc-level-1 > .vector-toc-link,
-.vector-toc .vector-toc-level-1 > .vector-toc-link * {
-  font-weight: 400 !important;   /* was 600 — now normal; JS makes active bold */
-  color: #3a1f00 !important;
 }
-.vector-toc .vector-toc-level-2 > .vector-toc-link,
+.gr-phone-row { margin-bottom: 12px; }
-.vector-toc .vector-toc-level-2 > .vector-toc-link * {
+.gr-phone-label {
-  font-weight: 400 !important;
+    display: block;
-  color: #5a3a00 !important;
+    font-weight: 700;
+    font-size: 0.875rem;
+    margin-bottom: 6px;
 }
-.vector-toc .vector-toc-level-3 > .vector-toc-link,
+.gr-phone-inputs {
-.vector-toc .vector-toc-level-3 > .vector-toc-link * {
+    display: flex;
-  font-weight: 400 !important;
+    gap: 8px;
-  color: #7a5010 !important;
+    align-items: stretch;
-  font-size: 0.95em !important;
+    height: 48px;
+    position: relative;
+    font-family: "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 }
+.gr-phone-country { width: 101px; border-radius: 12px; padding: 12px; gap: 8px; border: 1px solid #CED4DA;}
+.gr-phone-national { flex: 1; border-radius: 12px; padding: 12px; border: 1px solid #CED4DA;}
-/* Active overrides — must come AFTER level rules.
+/* ── Country trigger button ── */
- * JS inline style also handles this; CSS is a belt-and-braces backup. */
+.gr-country-trigger {
-.vector-toc .vector-toc-list-item-active .vector-toc-link,
+    display: flex;
-.vector-toc .vector-toc-list-item-active .vector-toc-link * {
+    align-items: center;
-  color: #f57c00 !important;
+    gap: 8px;
-  font-weight: 700 !important;
+    width: 101px;
+    border-radius: 12px;
+    padding: 12px;
+    border: 1px solid #CED4DA;
+    white-space: nowrap;
+    background: #fff;
 }
+.gr-country-trigger:hover { border-color: #72777d; }
+.gr-trigger-flag { font-size: 1.3rem; line-height: 1; }
+.gr-trigger-dial { font-size: 0.9rem; color: #54595d; }
+.gr-trigger-caret { font-size: 0.7rem; color: #54595d; }
-/* ── TOC: विषयसूची title label ────────────────────────────────── */
+/* ── Dropdown ── */
-/* Adishila doesn't cover ASCII fallback well at tiny sizes —
+.gr-country-dropdown {
- * keep the title in system-ui as before. The JS sets the text. */
+    position: absolute;
-.vector-toc .vector-toc-title {
+    top: calc(100% + 4px); left: 0;
-  font-family: system-ui, sans-serif !important;
+    z-index: 9999;
+    width: 280px;
+    background: #fff;
+    border: 1px solid #a2a9b1;
+    border-radius: 4px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
 }
+.gr-country-search {
-/* ── TOC: मूल / उल्लेख nav bar ────────────────────────────────── */
+    width: 100%; box-sizing: border-box;
-#gr-toc-doc-nav {
+    padding: 8px 12px;
-  /* Layout via JS inline style; these are safety defaults */
+    border: none; border-bottom: 1px solid #eee;
-  font-family: 'Adishila', 'Noto Serif Devanagari', serif;
+    font-size: 0.9rem; outline: none;
 }
-#gr-toc-doc-nav a:focus {
+.gr-country-list { max-height: 240px; overflow-y: auto; }
-  outline: 2px solid #f57c00;
+.gr-country-option {
-  outline-offset: 1px;
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; cursor: pointer; font-size: 0.9rem;
 }
+.gr-country-option:hover { background: #f8f9fa; }
+.gr-country-flag { font-size: 1.2rem; flex-shrink: 0; }
+.gr-country-name { flex: 1; color: #202122; }
+.gr-country-dial { color: #54595d; font-size: 0.85rem; }
-/* ── About / Main_Page: hide sidebar TOC panel entirely ───────────
+.gr-phone-national:focus {
- * These pages use __NOTOC__ in wikitext; the sidebar TOC should not
+    outline: none; border-color: #4A433A;
- * appear. Vector 2022 may still render the pinned container empty —
- * hide it to avoid a blank sidebar gap. ─────────────────────────── */
-body.page-My_wiki-About .vector-sidebar,
-body.page-My_wiki-About .vector-sticky-pinned-container,
-body.page-My_wiki-About #vector-toc-pinned-container,
-body.page-My_wiki-About .mw-table-of-contents-container {
-  display: none !important;
 }
-/* ── Ullekha (references index) page ──────────────────────────── */
+/* OTP verification screen */
-.gr-ullekha-back {
+#gr-otp-screen { padding: 8px 0; }
-  font-size: 0.88em;
+.gr-otp-title { font-size: 24px; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif; text-align: center; margin-bottom: 12px; color: #1C1A17}
-  color: #888;
+.gr-otp-desc { font-size: 16px; text-align: center; color: #1C1A17; margin-bottom: 20px; line-height: 1.5; font-family: "Noto Sans Devanagari" }
-  margin-bottom: 0.5em;
+.gr-otp-label { display: block; font-size: 16px; margin-bottom: 8px;  font-family: "Noto Sans Devanagari"; color: #1C1A17}
+.gr-otp-boxes {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 20px;
+    justify-content: center;
 }
-.gr-ullekha-back a { color: #b04b00; text-decoration: none; }
+.gr-otp-box {
-.gr-ullekha-back a:hover { text-decoration: underline; }
+    flex: 1;
+    min-width: 0;
+    max-width: 52px;
+    width: 52px;
+    height: 52px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+    border: 1px solid #CED4DA;
+    border-radius: 12px;
+    outline: none;
+    padding: 0;
+    box-sizing: border-box;
+}
+.gr-otp-box:focus { border-color: #4A433A; }
-.gr-ullekha-summary {
+.gr-continue-btn:not(:disabled):hover { background: #B14A2E; }
-  font-size: 0.9em;
+.gr-continue-btn:disabled { opacity: 0.6; cursor: not-allowed; }
-  color: #666;
+.gr-resend-row { text-align: center; font-size: 14px; color: #54595d; }
-  margin-bottom: 1.5em;
+.gr-link-btn {
-  font-style: italic;
+    background: none; border: none; padding: 0;
+    color: #B14A2E; cursor: pointer; font-size: inherit;
+    text-decoration: none;
 }
+.gr-link-btn:hover { text-decoration: underline; }
-.gr-ullekha-source {
+/* Login button on phone screen */
-  margin-bottom: 2em;
+.gr-login-btn, .gr-continue-btn {
-  border: 1px solid #e8d4a0;
+    width: 100%; padding: 16px 8px; border: none; gap: 8px;
-  border-radius: 6px;
+    border-radius: 12px; background: #B14A2E;
-  padding: 10px 14px 12px;
+    color: #fff; font-size: 16px; font-weight: 500;
-  background: #fffdf5;
+    cursor: pointer; font-family: "Noto Sans Devanagari", system-ui, -apple-system, sans-serif;
+}
+.gr-login-btn:hover { background: #993C1D; }
+.gr-otp-hidden-field {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0,0,0,0) !important;
+    white-space: nowrap !important;
+}
+.gr-otp-error {
+    background: #fce8e8;
+    border: 1px solid #e57373;
+    border-radius: 6px;
+    color: #b71c1c;
+    padding: 10px 14px;
+    margin-bottom: 12px;
+    font-size: 14px;
+    text-align: center;
+}
+    .gr-login-checks{display:flex;justify-content: space-between; gap:8px;margin:12px 0;}
+.gr-check-label{display:flex;align-items:center;gap:8px;font-size:14px;color:#1C1A17;cursor:pointer; font-family: "Noto Sans Devanagari"}
+.gr-check-label input{width:16px;height:16px;accent-color:#B14A2E;cursor:pointer; font-family: "Noto Sans Devanagari"}
+@media (max-width: 480px) {
+    body.page-Special_UserLogin .mw-body-content > .mw-ui-container {
+        padding: 24px 20px 20px;
+        border-radius: 12px;
+    }
+    body.page-Special_UserLogin #content {
+        margin: 16px auto 32px !important;
+        padding: 0 12px !important;
+    }
 }
-.gr-ullekha-source-title {
+/* from LocalSettings line 1021 */
-  font-size: 1.05em;
+body.page-Special_PasswordReset {
-  font-weight: 600;
+    background: #FAF6EE !important;
-  color: #5a3000;
+}
-  margin-bottom: 2px;
+body.page-Special_PasswordReset .mw-page-container,
-  border-bottom: 1px dotted #c9a060;
+body.page-Special_PasswordReset .mw-page-container-inner,
-  padding-bottom: 4px;
+body.page-Special_PasswordReset .mw-body {
+    background: transparent !important;
+}
+body.page-Special_PasswordReset .mw-body-header,
+body.page-Special_PasswordReset .vector-page-titlebar,
+body.page-Special_PasswordReset #firstHeading {
+    display: none !important;
+}
+body.page-Special_PasswordReset #content {
+    max-width: 440px !important;
+    margin: 28px auto 48px !important;
+    padding: 0 16px !important;
+    float: none !important;
+}
+body.page-Special_PasswordReset #bodyContent,
+body.page-Special_PasswordReset .mw-body-content {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
+    padding: 32px 32px 28px;
+    box-sizing: border-box;
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper::before {
+    content: "Reset password";
+    display: block;
+    text-align: center;
+    font-size: 1.65rem;
+    font-weight: 700;
+    color: #2d2348;
+    margin-bottom: 16px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+body.page-Special_PasswordReset .mw-htmlform-ooui-header {
+    margin-bottom: 18px;
+    font-size: 0.9rem;
+    color: #6b7280;
+    line-height: 1.5;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_PasswordReset .mw-htmlform-ooui-header p {
+    margin: 0;
+}
+body.page-Special_PasswordReset .mw-htmlform-ooui-wrapper .oo-ui-fieldLayout {
+    margin-bottom: 18px;
+}
+body.page-Special_PasswordReset .oo-ui-fieldLayout-header .oo-ui-labelElement-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #6b7280;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_PasswordReset .oo-ui-textInputWidget .oo-ui-inputWidget-input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    padding: 12px 14px !important;
+    font-size: 1rem !important;
+    min-height: 46px;
+    background: #fff !important;
+}
+body.page-Special_PasswordReset .oo-ui-textInputWidget.oo-ui-widget-focus .oo-ui-inputWidget-input {
+    border-color: #b5451b !important;
+    box-shadow: rgba(177, 74, 46, 0.1) !important;
+}
+body.page-Special_PasswordReset .oo-ui-fieldLayout-field {
+    width: 100% !important;
+}
+body.page-Special_PasswordReset .oo-ui-textInputWidget {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_PasswordReset .mw-htmlform-submit-buttons {
+    margin-top: 8px;
+    width: 100% !important;
+}
+body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement,
+body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonInputWidget {
+    width: 100% !important;
+    display: block !important;
+}
+body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button {
+    width: 100% !important;
+    justify-content: center;
+    background: #b5451b !important;
+    border-color: #b5451b !important;
+    border-radius: 10px !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    padding: 14px 20px !important;
+    min-height: 48px;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_PasswordReset .mw-htmlform-submit-buttons .oo-ui-buttonElement-button:hover {
+    background: #A33C20 !important;
+    border-color: #A33C20 !important;
+}
+body.page-Special_PasswordReset .gr-passwordreset-footer {
+    text-align: center;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid #f0eef5;
+    font-size: 0.9rem;
+    color: #6b7280;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_PasswordReset .gr-passwordreset-footer a {
+    color: #b5451b !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+}
+body.page-Special_PasswordReset .gr-passwordreset-footer a:hover {
+    text-decoration: underline !important;
+}
+body.page-Special_PasswordReset .cdx-message,
+body.page-Special_PasswordReset .mw-message-box,
+body.page-Special_PasswordReset .successbox,
+body.page-Special_PasswordReset .warningbox,
+body.page-Special_PasswordReset .errorbox {
+    border-radius: 10px;
+    margin-bottom: 16px;
+}
+@media (max-width: 480px) {
+    body.page-Special_PasswordReset .mw-body-content > .mw-htmlform-ooui-wrapper {
+        padding: 24px 20px 20px;
+        border-radius: 12px;
+    }
+    body.page-Special_PasswordReset #content {
+        margin: 16px auto 32px !important;
+        padding: 0 12px !important;
+    }
 }
-.gr-ullekha-source-count {
+/* from LocalSettings line 1197 */
-  font-size: 0.78em;
+body.page-Special_CreateAccount {
-  color: #999;
+    background: #FAF6EE !important;
-  font-family: system-ui, sans-serif;
+}
-  margin-bottom: 8px;
+body.page-Special_CreateAccount .mw-page-container,
+body.page-Special_CreateAccount .mw-page-container-inner,
+body.page-Special_CreateAccount .mw-body {
+    background: transparent !important;
+}
+body.page-Special_CreateAccount .mw-body-header,
+body.page-Special_CreateAccount .vector-page-titlebar,
+body.page-Special_CreateAccount #firstHeading {
+    display: none !important;
+}
+body.page-Special_CreateAccount #content {
+    max-width: 440px !important;
+    margin: 28px auto 48px !important;
+    padding: 0 16px !important;
+    float: none !important;
+}
+body.page-Special_CreateAccount #bodyContent,
+body.page-Special_CreateAccount .mw-body-content {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+body.page-Special_CreateAccount .vector-page-toolbar {
+    display: none !important;
+}
+body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(45, 35, 72, 0.1);
+    padding: 32px 32px 28px;
+    box-sizing: border-box;
+}
+body.page-Special_CreateAccount .mw-body-content > .mw-ui-container::before {
+    content: "Create account";
+    display: block;
+    text-align: center;
+    font-size: 1.65rem;
+    font-weight: 700;
+    color: #2d2348;
+    margin-bottom: 22px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+body.page-Special_CreateAccount #signupstart {
+    font-size: 0.9rem;
+    color: #6b7280;
+    margin-bottom: 16px;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount .mw-createacct-benefits-container {
+    display: none !important;
+}
+body.page-Special_CreateAccount #userloginForm,
+body.page-Special_CreateAccount #userloginForm form {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_CreateAccount .mw-htmlform {
+    width: 100% !important;
+    max-width: 100% !important;
+}
+body.page-Special_CreateAccount .mw-htmlform-field {
+    margin-bottom: 18px;
+}
+body.page-Special_CreateAccount .cdx-label,
+body.page-Special_CreateAccount .mw-htmlform-field > label {
+    display: block;
+    font-size: 0.875rem;
+    color: #1C1A17;
+    margin-bottom: 6px;
+    font-family: Noto Sans Devanagari UI, system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount .cdx-text-input {
+    width: 100% !important;
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    background: #fff !important;
+    min-height: 46px;
+}
+body.page-Special_CreateAccount .cdx-text-input__input {
+    width: 100% !important;
+    box-sizing: border-box !important;
+    border: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important;
+    outline: none !important;
+    background: transparent !important;
+    padding: 12px 14px !important;
+    font-size: 1rem !important;
+    min-height: 44px;
+}
+body.page-Special_CreateAccount .cdx-field__help-text,
+body.page-Special_CreateAccount .htmlform-tip {
+    font-size: 0.8rem;
+    color: #9ca3af;
+    margin-top: 6px;
+    line-height: 1.4;
+}
+body.page-Special_CreateAccount .cdx-text-input:focus-within {
+    border-color: #b5451b !important;
+    box-shadow: rgba(177, 74, 46, 0.1) !important;
+}
+body.page-Special_CreateAccount .cdx-text-input__input:focus {
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+body.page-Special_CreateAccount input#wpName2,
+body.page-Special_CreateAccount input#wpPassword2,
+body.page-Special_CreateAccount input#wpRetype,
+body.page-Special_CreateAccount input#wpEmail {
+    width: 100% !important;
+    box-sizing: border-box !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    padding: 12px 14px !important;
+    font-size: 1rem !important;
+    min-height: 46px;
+}
+body.page-Special_CreateAccount input#wpName2:focus,
+body.page-Special_CreateAccount input#wpPassword2:focus,
+body.page-Special_CreateAccount input#wpRetype:focus,
+body.page-Special_CreateAccount input#wpEmail:focus {
+    outline: none !important;
+    border-color: #b5451b !important;
+    box-shadow: rgba(177, 74, 46, 0.1) !important;
+}
+body.page-Special_CreateAccount .mw-htmlform-field:has(#wpCreateaccount),
+body.page-Special_CreateAccount .mw-htmlform-submit {
+    margin-top: 8px;
+    margin-bottom: 0;
+}
+body.page-Special_CreateAccount #wpCreateaccount,
+body.page-Special_CreateAccount #wpCreateaccount.cdx-button {
+    width: 100% !important;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    background: #b5451b !important;
+    border: none !important;
+    border-radius: 10px !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    padding: 14px 20px !important;
+    min-height: 48px;
+    cursor: pointer;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount #wpCreateaccount:hover {
+    background: #A33C20 !important;
+}
+body.page-Special_CreateAccount .gr-login-signup-footer {
+    text-align: center;
+    margin-top: 18px;
+    padding-top: 16px;
+    border-top: 1px solid #f0eef5;
+}
+body.page-Special_CreateAccount .gr-login-signup-text {
+    font-size: 0.9rem;
+    color: #6b7280;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount .gr-login-signup-link {
+    color: #b5451b !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+}
+body.page-Special_CreateAccount .gr-login-signup-link:hover {
+    text-decoration: underline !important;
+}
+body.page-Special_CreateAccount #signupend,
+body.page-Special_CreateAccount .mw-form-related-link-container {
+    font-size: 0.9rem;
+    color: #6b7280;
+    margin-top: 14px;
+    line-height: 1.5;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount #signupend a,
+body.page-Special_CreateAccount .mw-form-related-link-container a {
+    color: #b5451b !important;
+    font-weight: 600 !important;
+    text-decoration: none !important;
+}
+body.page-Special_CreateAccount #signupend a:hover,
+body.page-Special_CreateAccount .mw-form-related-link-container a:hover {
+    text-decoration: underline !important;
+}
+body.page-Special_CreateAccount .cdx-message,
+body.page-Special_CreateAccount .mw-message-box {
+    border-radius: 10px;
+    margin-bottom: 16px;
+}
+body.page-Special_CreateAccount .gr-google-login {
+    margin: 20px 0 4px;
+    padding: 0;
+}
+body.page-Special_CreateAccount .gr-google-login-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    line-height: 0;
+}
+body.page-Special_CreateAccount .gr-google-login-icon svg {
+    display: block;
+}
+body.page-Special_CreateAccount .gr-google-login-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 12px 16px;
+    min-height: 48px;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    color: #2d2348;
+    font-weight: 600;
+    font-size: 1rem;
+    text-decoration: none !important;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount .gr-google-login-btn:hover {
+    background: #f9fafb;
+    border-color: #d1d5db;
+}
+body.page-Special_CreateAccount .gr-google-login-divider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin: 18px 0 16px;
+    color: #9ca3af;
+    font-size: 0.85rem;
+    font-family: system-ui, -apple-system, sans-serif;
+}
+body.page-Special_CreateAccount .gr-google-login-divider::before,
+body.page-Special_CreateAccount .gr-google-login-divider::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: #e5e7eb;
 }
-.gr-ullekha-list {
+    .page-Special_UserLogin #mw-mf-page-center,
-  margin: 0 !important;
+.page-Special_UserLogin .mw-mf-page-center {
-  padding-left: 1.4em !important;
+    display: flex !important;
-  list-style: decimal !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-height: 100vh !important;
+    padding: 16px !important;
+    box-sizing: border-box !important;
 }
-.gr-ullekha-item {
+.page-Special_UserLogin .mw-ui-container {
-  margin: 0.4em 0;
+    width: 100% !important;
-  line-height: 1.55;
+    max-width: 400px !important;
+    margin: 0 auto !important;
 }
+@media (max-width: 480px) {
-.gr-ullekha-quote {
+    body.page-Special_CreateAccount .mw-body-content > .mw-ui-container {
-  font-style: italic;
+        padding: 24px 20px 20px;
-  color: #444;
+        border-radius: 12px;
+    }
+    body.page-Special_CreateAccount #content {
+        margin: 16px auto 32px !important;
+        padding: 0 12px !important;
+    }
 }
-.gr-ullekha-ref {
+/* from LocalSettings line 1484 */
-  font-size: 0.8em;
+.vector-page-toolbar,
-  font-style: normal;
+        .vector-page-toolbar-container,
-  color: #999;
+        .mw-page-container {
-  margin-left: 4px;
+            border-top: 0 !important;
-  font-family: system-ui, sans-serif;
+            box-shadow: none !important;
+        }
+        .vector-page-toolbar {
+            display:none !important;
+        }
+        .mw-body {
+            margin-top:0 !important;
+            padding-top:0 !important;
+        }
+/* from LocalSettings line 1525 */
+.mw-logo-wordmark,
+.vector-header-start a.mw-wiki-title {
+    display: flex !important;
+    flex-direction: column !important;
 }
-.gr-ullekha-ref a { color: #b04b00 !important; text-decoration: none; }
-.gr-ullekha-ref a:hover { text-decoration: underline; }
+.mw-logo-wordmark::after,
-/* ═══════════════════════════════════════════════════════════════════
+.vector-header-start a.mw-wiki-title::after {
-   Common.css — v7 additions  (append to existing Common.css)
+    content: "A Digital Archive of Dvaita Vedanta Literature";
-   Full typography spec implementation.
+    display: block;
-   ═══════════════════════════════════════════════════════════════════ */
+    font-size: 11px;
-:root {
+    font-weight: 400;
-  --gr-maroon:     #800000;
+    color: #ffffff;
-  --gr-orange:     #f57c00;
+    letter-spacing: 0.3px;
-  --gr-black:      #222222;
+    margin-top: 1px;
-  --gr-i5mm:  19px;
+    font-family: sans-serif;
-  --gr-i7mm:  26px;
-  --gr-i10mm: 38px;
-  --gr-i2mm:   8px;
-  --gr-font-dev:   'Adishila', 'Noto Serif Devanagari', serif;
-  --gr-font-vedic: 'AdishilaVedic', 'Adishila', 'Noto Serif Devanagari', serif;
 }
-/* 1. Heading */
-.gr-doc-title { font-family:var(--gr-font-dev)!important; font-size:24px!important; font-weight:500!important; color:var(--gr-maroon)!important; text-align:center!important; margin:0 0 18px; border:none!important; }
+/* ===== namespace toolbar hiding (was BeforePageDisplay line 1484) =====
-/* 2. Sub-heading */
+   Original: hide top toolbar on all namespaces EXCEPT Special, Template, MediaWiki.
-.gr-section-head,.gr-gadya-head,h4.gr-section-head,h4.gr-gadya-head { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:600!important; color:var(--gr-orange)!important; text-align:center!important; margin:18px 0 8px!important; padding:0!important; border:none!important; }
+   MediaWiki adds body classes ns-0, ns-10 (Template), ns-8 (MediaWiki), ns--1 (Special).
-/* 3. Chapter heading */
+   So: hide globally, then re-show on the allowed namespaces. */
-.mw-parser-output h2,.mw-parser-output .mw-heading2 h2 { font-family:var(--gr-font-dev)!important; font-size:18px!important; font-weight:600!important; color:var(--gr-maroon)!important; text-align:center!important; margin:28px auto 6px!important; padding:0!important; border:none!important; border-bottom:2px dotted var(--gr-maroon)!important; width:80%; line-height:1.6; }
+.vector-page-toolbar,
-.mw-parser-output h3,.mw-parser-output .mw-heading3 h3 { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:600!important; color:var(--gr-orange)!important; text-align:center!important; margin:22px auto 6px!important; padding:0!important; border:none!important; border-bottom:1px dotted var(--gr-orange)!important; width:70%; line-height:1.5; }
+.vector-page-toolbar-container,
-/* 4. Author-note */
+.mw-page-container { border-top: 0 !important; box-shadow: none !important; }
-.bhashyam-block.gr-author-note,.gr-author-note { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:700!important; color:var(--gr-maroon)!important; text-align:center!important; margin:12px 0!important; padding:0!important; border:none!important; background:none!important; }
+.vector-page-toolbar { display: none !important; }
-/* 5. Moola Veda Shloka */
+.mw-body { margin-top: 0 !important; padding-top: 0 !important; }
-.verse-block[data-type="mantra"] .shloka-line,.gr-verse-type-mantra .shloka-line { font-family:var(--gr-font-vedic)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-maroon)!important; text-align:left!important; display:block; padding-left:var(--gr-i5mm)!important; line-height:1.55; margin:0; }
-/* 6. Moola Veda Gadya */
+/* re-show toolbar on Special / Template / MediaWiki namespaces */
-.verse-block[data-type="mantra"] .bhashyam-block.gr-pramana-gadya { font-family:var(--gr-font-vedic)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-maroon)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0!important; }
+body.ns--1 .vector-page-toolbar,
-/* 7. Moola Shloka */
+body.ns-10 .vector-page-toolbar,
-.verse-block .shloka-line,.shloka-block .shloka-line,.gr-verse-text { font-family:var(--gr-font-dev)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-orange)!important; text-align:left!important; display:block; padding-left:var(--gr-i5mm)!important; line-height:1.55; margin:0; }
+body.ns-8  .vector-page-toolbar { display: block !important; }
-.verse-block[data-type="sutra"] .shloka-line,.gr-verse-type-sutra .shloka-line { color:var(--gr-maroon)!important; font-style:normal!important; }
-/* 8. Moola Gadya */
+/* Style overrides for QuickEdit */
-.gr-verse-text.gr-pramana-gadya,.bhashyam-block.gr-pramana-gadya { font-family:var(--gr-font-dev)!important; font-size:18px!important; font-weight:700!important; color:var(--gr-orange)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0!important; }
+.mw-body-content[contenteditable="true"]:focus-visible {
-/* 9. Bhashya Shloka (pramana-padya) */
+ outline: 0;
-.bhashyam-block.gr-pramana-padya,.gr-verse-text.gr-pramana-padya { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:left!important; display:block; padding-left:var(--gr-i10mm)!important; margin-left:0!important; line-height:1.6; }
-/* 10. Bhashya Gadya */
-.bhashyam-block,.gr-bhashyam,.gr-inlinepara-run { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; margin-left:0!important; line-height:1.65; margin-bottom:0.3em; }
-/* 11-12. Teeka Shloka/Gadya */
-.teeka-block .teeka-body { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; line-height:1.65; }
-.teeka-block .shloka-line { font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:left!important; padding-left:var(--gr-i10mm)!important; line-height:1.6; }
-.teeka-block .bhashyam-block,.teeka-block .gr-vyakhya-para,.teeka-block p { font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; text-align:justify!important; text-indent:var(--gr-i7mm)!important; padding-left:var(--gr-i2mm)!important; }
-/* 13-14. Tippani */
-.gr-tippani-block { font-family:var(--gr-font-dev)!important; font-size:16px!important; font-weight:400!important; color:var(--gr-black)!important; background:#f5f8fa; border:1px solid #c8dae8; border-radius:4px; padding:6px 10px 8px; margin:0.3em 0; }
-.gr-tippani-block .shloka-line { text-align:left!important; padding-left:var(--gr-i10mm)!important; }
-/* 15. Moola prateeka */
-.gr-mulaprateeka-block,em.Moola,.gr-moola { font-weight:700!important; font-style:italic!important; color:var(--gr-maroon)!important; display:block; text-align:center; margin:0.6em 0 0.3em; }
-/* 16. Prateeka */
-.gr-prateeka,em.prateeka,span.prateeka { font-weight:700!important; font-style:normal!important; color:var(--gr-orange)!important; }
-/* 17. Reference */
-.gr-reference,a.qt,span.gr-blockquote .gr-reference,.pramana a { color:var(--gr-orange)!important; font-style:italic; text-decoration:none; }
-.gr-reference:hover,a.qt:hover { text-decoration:underline dotted; }
-/* Moola reference shloka above teeka entries */
-.gr-moola-ref { display:block; margin:0 0 6px; padding:4px 0 4px var(--gr-i5mm); border-left:3px solid var(--gr-orange); }
-.gr-moola-ref .shloka-line { font-size:17px!important; font-weight:600!important; color:var(--gr-orange)!important; padding-left:0!important; }
-/* TOC bold only on active */
-.vector-toc .vector-toc-level-1>.vector-toc-link,.vector-toc .vector-toc-level-1>.vector-toc-link * { font-weight:400!important; color:#3a1f00!important; }
-.vector-toc .vector-toc-level-2>.vector-toc-link,.vector-toc .vector-toc-level-2>.vector-toc-link * { font-weight:400!important; color:#5a3a00!important; }
-.vector-toc .vector-toc-level-3>.vector-toc-link,.vector-toc .vector-toc-level-3>.vector-toc-link * { font-weight:400!important; color:#7a5010!important; font-size:.95em!important; }
-.vector-toc .vector-toc-list-item-active .vector-toc-link,.vector-toc .vector-toc-list-item-active .vector-toc-link * { color:#f57c00!important; font-weight:700!important; }
-/* About/Main_Page no sidebar TOC */
-body.page-My_wiki-About .vector-sidebar,body.page-My_wiki-About .vector-sticky-pinned-container,body.page-My_wiki-About #vector-toc-pinned-container { display:none!important; }
-/* Ullekha page */
-.gr-ullekha-back { font-size:.88em; color:#888; margin-bottom:.5em; }
-.gr-ullekha-back a { color:var(--gr-maroon); text-decoration:none; }
-.gr-ullekha-source { margin-bottom:2em; border:1px solid #e8d4a0; border-radius:6px; padding:10px 14px 12px; background:#fffdf5; }
-.gr-ullekha-source-title { font-size:1.05em; font-weight:600; color:#5a3000; margin-bottom:2px; border-bottom:1px dotted #c9a060; padding-bottom:4px; }
-.gr-ullekha-list { margin:0!important; padding-left:1.4em!important; list-style:decimal!important; }
-.gr-ullekha-item { margin:.4em 0; line-height:1.55; }
-.gr-ullekha-quote { font-style:italic; color:#444; }
-.gr-ullekha-ref { font-size:.8em; font-style:normal; color:#999; margin-left:4px; font-family:system-ui,sans-serif; }
-.gr-ullekha-ref a { color:var(--gr-maroon)!important; text-decoration:none; }
-/* Responsive */
-@media (max-width:600px) {
-  .mw-parser-output h2,.mw-parser-output h3 { width:100%!important; }
-  .bhashyam-block { text-indent:12px!important; padding-left:4px!important; }
-  .verse-block .shloka-line { padding-left:8px!important; }
 }
+/* ── 36. COMMENTARY INTERLEAVING (Show/hide teeka in moola) ─────── */
+.gr-injected-teeka-group { margin: 0 0 6px 0; }
-/* ── Moola page (verse-text only view) ──────────────────────────── */
+/* Inline checkbox placed directly before an existing commentary link
-/* The title shows "...— मूलम्" with a warm ochre accent */
+   wherever it appears on the page (e.g. a "वादावली" list) - same maroon
-.gr-doc-title[data-moola="1"] {
+   accent as the toolbar dropdown's own checkboxes, for visual
-   color: var(--gr-maroon) !important;
+   consistency between the two places a reader can toggle a commentary.
-  border-bottom: 2px solid var(--gr-orange);
-  padding-bottom: 8px;
+   CHANGED: was relying on vertical-align + a plain width/height on the
-   margin-bottom: 20px;
+   bare <input> - confirmed directly (screenshot) this rendered
+   noticeably oversized and misaligned with the surrounding text, since
+   native checkbox rendering size/baseline varies significantly across
+   browsers/OS (especially mobile Safari) and isn't reliably constrained
+   by width/height alone without also resetting the native appearance.
+   Now wrapped in an inline-flex span the checkbox sits inside, which
+   centers it against the line's actual content height regardless of
+   the checkbox's own native box quirks - a more robust fix than tuning
+   vertical-align offsets by hand. */
+.gr-teeka-cb-wrap {
+   /* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
+     aligned "middle" is positioned by its own height against the parent's
+     x-height, so the whole control - checkbox AND label together - sat
+     progressively lower than the text beside it as the reader enlarged the
+     type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain
+     inline, the label is ordinary text and lines up with its neighbours by
+     definition; only the checkbox needs aligning, and it does that with an
+     em-based offset that holds at any size. */
+   display: inline;
 }
-/* On the Moola page, verse lines use full-width justified layout
+.gr-teeka-inline-checkbox {
-   matching the "M. Shloka / M. Gadya" spec (no bhashya indentation) */
+  -webkit-appearance: none; appearance: none;
-.mw-parser-output .verse-block {
+  /* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
-   margin: 8px 0 12px;
+px box against text that grows; clamped so it stays a sensible
+     target at both extremes.
+     Alignment was measured rather than guessed. vertical-align:middle is
+     the only value that stays consistent as the type size changes (it is
+     computed from the font's x-height), but it sits about 2.5px low
+     against this line-height at every size - so that constant bias is
+     taken back with `top`, giving under a pixel of error from 16px to
+px. The element is already position:relative for its tick. */
+  width: clamp(13px, 0.8em, 24px) !important;
+  height: clamp(13px, 0.8em, 24px) !important;
+  min-width: 13px; min-height: 13px;
+  margin: 0 6px 0 0; padding: 0; cursor: pointer;
+  vertical-align: middle; top: -2.5px;
+  border: 1.5px solid #b5451b; border-radius: 3px;
+   background: #fff; position: relative; flex-shrink: 0;
+  box-sizing: border-box;
 }
-.mw-parser-output .verse-block .shloka-block {
+.gr-teeka-inline-checkbox:checked {
-   margin: 0;
+  background: #b5451b; border-color: #b5451b;
+}
+.gr-teeka-inline-checkbox:checked::after {
+   /* Placed and sized in % of the box, so the tick follows the em-based
+     box instead of staying a 4x8px mark inside a checkbox that grew. */
+  content: ''; position: absolute; left: 32%; top: 8%;
+  width: 26%; height: 55%;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
 }
+/* CHANGED: bullets removed from any <li> this feature attaches a
+   checkbox to - the checkbox itself is now the visual marker, so the
+   original bullet point is redundant clutter, not a second marker. */
+.gr-teeka-list-item { list-style: none !important; }
+/* Toolbar "Commentaries" dropdown button - matches .gr-btn-edit /
+   .gr-btn-settings exactly (border #f0cfc4, maroon text, cream hover). */
+/* CHANGED: pill shape + soft shadow, matching the toolbar-wide "soft
+   rounded pill" redesign - consistent with .gr-btn's own border-radius
+   and box-shadow treatment in readerToolbar.js rather than this one
+   button keeping the old sharp-cornered bordered look on its own. */
+/* CHANGED: was styled for a text label + caret ("टीका ▾") - now an
+   icon-only eye.svg button, so font-size and the caret rule are no
+   longer relevant and removed; border-radius reduced to match the
+   toolbar-wide radius reduction (see readerToolbar.js). */
+.gr-teeka-dropdown-btn { border: none; border-radius: 12px; box-shadow: 0 2px 6px rgba(181,69,27,0.22); transition: box-shadow .15s, transform .15s; }
+.gr-teeka-dropdown-btn:hover { background: #fdf0eb; box-shadow: 0 4px 14px rgba(181,69,27,0.34); transform: translateY(-1px); }
-/* ── Ullekha page ────────────────────────────────────────────────── */
+.gr-teeka-dropdown-panel {
-/* Title: maroon, dotted bottom border (matches ref site exactly) */
+   background: #fff; border: 1px solid #f0cfc4; border-radius: 10px;
-.gr-ullekha-title {
+   box-shadow: 0 4px 16px rgba(181,69,27,0.16); max-height: 60vh; overflow-y: auto;
-   color: var(--gr-maroon) !important;
-  font-size: 22px !important;
-  border-bottom: 1.5px dotted var(--gr-maroon) !important;
-   padding-bottom: 6px !important;
-  margin-bottom: 20px !important;
-  text-align: left !important;
 }
-/* Source heading (h2): orange, dotted bottom border */
+.gr-teeka-dropdown-header {
-.mw-parser-output .gr-ullekha-page h2,
+  font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;
-body .mw-parser-output h2.gr-ullekha-source-heading {
+  /* CHANGED: fixed 11px -> scales with the reader's text size. */
-   color: var(--gr-orange) !important;
+   font-size: clamp(12px, calc(var(--gr-font-size, 22px) * 0.6), 17px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
-  font-size: 1em !important;
+   color: #b5451b; padding: 10px 14px 6px; border-bottom: 1px solid #f7e4da; margin-bottom: 2px;
-  font-weight: 600 !important;
-   border-bottom: 1px dotted var(--gr-orange) !important;
-  width: 60% !important;
-  text-align: left !important;
 }
-/* Numbered list of quotes */
+.gr-teeka-dropdown-list { padding: 4px 0; }
-.gr-ullekha-list {
+.gr-teeka-dropdown-item {
-   margin: 0.5em 0 1.2em 0 !important;
+   display: flex; align-items: center; gap: 9px; padding: 8px 14px;
-   padding-left: 1.6em !important;
+  /* CHANGED: fixed 14px -> scales with the reader's text size. */
-   list-style: decimal !important;
+  font-size: clamp(15px, calc(var(--gr-font-size, 22px) * 0.82), 26px);
+   font-family: var(--font-indic);
+   color: #3a2a20; cursor: pointer; white-space: nowrap;
+  transition: background .12s;
 }
-.gr-ullekha-list li {
+.gr-teeka-dropdown-item:hover { background: #fdf0eb; }
-   margin: 0.3em 0;
+/* CHANGED: matches the same robust custom-checkbox approach as
-   line-height: 1.6;
+   .gr-teeka-inline-checkbox above, rather than accent-color alone,
+   which doesn't reliably constrain native checkbox SIZE across
+   browsers even though it does control the checked-state color. */
+.gr-teeka-dropdown-checkbox {
+  -webkit-appearance: none; appearance: none;
+  width: 16px !important; height: 16px !important;
+  min-width: 16px; min-height: 16px; flex-shrink: 0;
+   margin: 0; padding: 0; cursor: pointer;
+   border: 1.5px solid #b5451b; border-radius: 3px;
+  background: #fff; position: relative; box-sizing: border-box;
 }
-/* Each quote as an orange link with single quotes, italic */
+.gr-teeka-dropdown-checkbox:checked { background: #b5451b; border-color: #b5451b; }
-.gr-ullekha-ref-link a,
+.gr-teeka-dropdown-checkbox:checked::after {
-.gr-ullekha-list li a {
+   content: ''; position: absolute; left: 4.5px; top: 1.5px;
-   color: var(--gr-orange) !important;
+   width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
-   font-style: italic;
+   transform: rotate(45deg);
-   text-decoration: none !important;
 }
-.gr-ullekha-ref-link a:hover,
+/* Sub-commentaries (tippanis) nested under their parent teeka - shown
-.gr-ullekha-list li a:hover {
+   only once the parent is checked (see readerToolbar.js), indented to
-  text-decoration: underline dotted !important;
+   read as a sub-category rather than a peer option. */
-}
+.gr-teeka-dropdown-subitem { padding-left: 34px !important; }
-/* Highlighted text on bhashya page after clicking Ullekha link */
+.gr-teeka-dropdown-sublist { display: none; }
-.gr-ullekha-highlight {
+.gr-teeka-dropdown-sublist.gr-open { display: block; }
-   background: #fff176 !important;
+.gr-teeka-dropdown-item-label {
-  border-radius: 2px;
+   overflow: hidden; text-overflow: ellipsis;
-   padding: 0 2px;
+   font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;
 }
+/* Toolbar control only needs to be shown as a fallback once the inline
+   checkbox list scrolls out of view - hidden by default, toggled by
+   readerToolbar.js listening to window.grTeekaInterleave.onVisibilityChange. */
+.gr-teeka-dropdown-wrap { display: none; }
+.gr-teeka-dropdown-wrap.gr-visible { display: inline-block; }
-/* ═══════════════════════════════════════════════════════════════════
+/* ── 37. HEADER LINKS + UPDATES PAGE ───────────────────────────── */
-   Canonical XSL class mappings (added v7.1)
+/* Desktop header links (Help, About, Login, Library, Updates) */
-   The renderer now emits HTML directly with classes matching the XSL
+.gr-header-link {
-   template from the reference site, so styles work without MW templates.
+  display: inline-flex; align-items: center;
-   ═══════════════════════════════════════════════════════════════════ */
+  color: rgba(255, 255, 255, 0.88) !important; font-size: 0.88em; font-family: system-ui, sans-serif; font-weight: 500;
+  line-height: inherit; text-decoration: none !important; white-space: nowrap;
+  padding: 4px 10px; margin: 0 4px 0 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+.gr-header-link:hover,
+.gr-header-link:focus-visible,
+.gr-header-link.is-current { color: #fff !important; background: rgba(255, 255, 255, 0.12); }
-/* Wrap all document content */
+/* Mobile menu panel items (Library, Updates) — same look as Home/Help */
-.mw-parser-output {
+.gr-mob-item {
-   /* All content lives inside maintext-equivalent scope */
+   display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0;
+  padding: 15px 20px; border-bottom: 1px solid #f0ebe6; border-left: 3px solid transparent; background: #fff;
+  font-size: 16px; font-family: system-ui, sans-serif; color: #2c1810 !important;
+  text-decoration: none !important;
 }
+.gr-mob-item.is-current { border-left-color: #c0392b; background: #fdf8f5; color: #c0392b !important; font-weight: 600; }
+#gr-header-user-menu a.is-current { background: #f5efe9; font-weight: 600; }
-/* ── Verse block (XSL: div.verse > div.verse-text > div.shloka > span.shloka-line) */
+/* Updates page (My_wiki:Updates) */
-.mw-parser-output .verse {
+.gr-updates-page { max-width: 1140px; margin: 0 auto; padding: 0 0 40px; }
-   margin: 8px 0 4px;
+.gr-updates-intro { margin: 0 0 24px; font-family: system-ui, sans-serif; font-size: 15px; color: #666; line-height: 1.6; }
+.gr-updates-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
+.gr-updates-layout.gr-no-bulletin { grid-template-columns: minmax(0, 1fr); }
+.gr-updates-heading,
+.gr-bulletin-heading {
+   font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
+  color: #b5451b;
 }
-.mw-parser-output .verse-text {
+.gr-updates-heading { margin: 0 0 6px; }
-  font-size: 1.1em;
-  color: var(--gr-orange);
+/* What's new: grouped list */
-   font-weight: 600;
+.gr-updates-feed { min-height: 120px; }
-   margin-top: 6px;
+.gr-upd-group { margin: 22px 0 8px; font: 600 14px system-ui, sans-serif; color: #1a2e40; }
+.gr-upd-group:first-child { margin-top: 8px; }
+.gr-upd-list {
+  margin: 0; padding: 0;
+   background: #fff; border: 1px solid #efe4df; border-radius: 10px; overflow: hidden;
+   box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06);
 }
-.mw-parser-output .verse[type="sutra"] .verse-text,
+.gr-upd-item {
-.mw-parser-output .verse[type="sutra"] .shloka-line {
+   display: flex; align-items: baseline; gap: 16px;
-   color: var(--gr-maroon) !important;
+   margin: 0; padding: 12px 18px; border-top: 1px solid #f6efec; border-left: 3px solid transparent;
-   font-style: normal !important;
 }
-.mw-parser-output .verse[type="mantra"] .verse-text,
+.gr-upd-item:first-child { border-top: 0; }
-.mw-parser-output .verse[type="mantra"] .shloka-line {
+.gr-upd-item:hover { background: #fdf8f6; }
-   font-family: var(--gr-font-vedic) !important;
+.gr-upd-item.gr-upd-unseen { border-left-color: #c0392b; background: #fffaf8; }
-   color: var(--gr-maroon) !important;
+.gr-upd-main { flex: 1; min-width: 0; }
-  font-weight: 700 !important;
+.gr-upd-title {
+   font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1em; font-weight: 600; line-height: 1.45;
+   color: #c0392b !important; text-decoration: none !important; overflow-wrap: anywhere;
 }
-.mw-parser-output .shloka {
+.gr-upd-title:hover { text-decoration: underline !important; text-underline-offset: 3px; }
-  margin: 0;
+.gr-upd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; font-size: 13px; color: #777; }
-   padding: 0;
+.gr-upd-work { font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 14px; }
+.gr-upd-tag { flex: none; padding: 1px 8px; border-radius: 9px; font: 600 11px/1.6 system-ui, sans-serif; }
+.gr-upd-tag.gr-upd-new    { background: #fbece8; color: #c0392b; }
+.gr-upd-tag.gr-upd-update { background: #eaf1fb; color: #2a5aa8; }
+.gr-upd-date { flex: none; font: 13px system-ui, sans-serif; color: #888; white-space: nowrap; }
+.gr-upd-empty { margin: 12px 0; padding: 24px; text-align: center; font: 14px system-ui, sans-serif; color: #888;
+   background: #fff; border: 1px dashed #e6d6cf; border-radius: 10px; }
+/* Announcements & events card */
+.gr-bulletin {
+  background: #fff; border: 1px solid #efe4df; border-top: 3px solid #c0392b; border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(60, 20, 10, 0.06); overflow: hidden;
 }
-.mw-parser-output .shloka-line {
+.gr-bulletin.gr-bulletin-is-empty { display: none; }
-  display: block;
+.gr-bulletin-heading { padding: 12px 18px; background: #fcf6f3; border-bottom: 1px solid #f1e2dc; }
-  font-size: 18px;
+.gr-bulletin-item { padding: 14px 18px; border-top: 1px solid #f6efec; }
-  font-weight: 600;
+.gr-bulletin-item:first-child { border-top: 0; }
-  color: var(--gr-orange);
+.gr-bulletin-item.gr-bulletin-expired { display: none; }
-   padding-left: var(--gr-i5mm);
+.gr-bulletin-item.gr-bulletin-past { opacity: 0.55; }
-   line-height: 1.55;
+.gr-bulletin-meta { display: flex; align-items: center; gap: 8px; font: 12px system-ui, sans-serif; color: #888; }
-  margin: 0;
+.gr-bulletin-type { padding: 1px 8px; border-radius: 9px; font-weight: 600; font-size: 11px; background: #eaf1fb; color: #2a5aa8; }
+.gr-bulletin-type::before { content: "Announcement"; }
+.gr-bulletin-item[data-type="event"] .gr-bulletin-type { background: #fdf1dc; color: #9a5b00; }
+.gr-bulletin-item[data-type="event"] .gr-bulletin-type::before { content: "Event"; }
+.gr-bulletin-item.gr-bulletin-past .gr-bulletin-type::before { content: "Past event"; }
+.gr-bulletin-item-title {
+   margin-top: 6px; font-family: 'Adishila', 'Noto Serif Devanagari', serif; font-size: 1.05em; font-weight: 600;
+   line-height: 1.45; color: #1a2e40;
 }
+.gr-bulletin-item-title a { color: #c0392b; }
+.gr-bulletin-where { display: block; margin-top: 2px; font: 13px system-ui, sans-serif; color: #666; }
+.gr-bulletin-item-text { margin-top: 4px; font-size: 0.92em; line-height: 1.6; color: #444; }
+.gr-bulletin-item-text p { margin: 0; }
+.gr-bulletin-where:empty, .gr-bulletin-item-text:empty, .gr-bulletin-date:empty { display: none; }
-/* ── Introduction (XSL: div.introduction) */
+@media (max-width: 900px) {
-.mw-parser-output .introduction {
+   .gr-updates-layout { grid-template-columns: minmax(0, 1fr); }
-   font-family: var(--gr-font-dev) !important;
+   .gr-bulletin { order: -1; }   /* announcements first on small screens */
-  font-size: 16px;
-  color: var(--gr-black);
-  text-align: justify;
-  text-indent: var(--gr-i7mm);
-   padding-left: var(--gr-i2mm);
-  margin: 0.5em 0 0.3em;
-  line-height: 1.65;
 }
-.mw-parser-output .introduction p {
+/* Phones: title on its own line, tag + date underneath */
-   display: inline;
+@media (max-width: 600px) {
-   margin: 0;
+  .gr-updates-intro { font-size: 14px; margin-bottom: 18px; }
+  .gr-upd-item { flex-direction: column; align-items: stretch; gap: 2px; padding: 11px 14px; }
+   .gr-upd-title { font-size: 0.9em; }
+   .gr-upd-date { font-size: 12px; }
+  .gr-bulletin-heading { padding: 10px 14px; }
+  .gr-bulletin-item { padding: 12px 14px; }
 }
-/* ── Bhashya (XSL: div.bhashya) */
+/* Minerva menu panel: our list replaces the skin's; the skin's lists are
-.mw-parser-output .bhashya {
+   kept (hidden) because Minerva's own script looks them up. */
-  font-family: var(--gr-font-dev) !important;
+#mw-mf-page-left > .gr-mf-native-menu { display: none !important; }
-  font-size: 16px;
+.gr-mob-menu { width: 100%; margin-top: 8px; background: #fff; }
-  color: var(--gr-black);
-  text-align: justify;
+/* ── 38. FOOTNOTE MARKERS AND CARDS ────────────────────────────── */
-  text-indent: var(--gr-i7mm);
+/* QuickEdit writes the notes; common.js turns them into a superscript at the
-   padding-left: var(--gr-i2mm);
+   point of reading and a card on click. The list it writes at the foot of the
-   margin: 0.2em 0 0.35em;
+   document is taken off the screen but kept for print, where there is nothing
-   line-height: 1.65;
+   to click and the apparatus belongs at the end. */
+/* The annotated words. QuickEdit marks them with a flat yellow highlight,
+   which is right while editing and shouts on a reading page — a dotted rule
+   says "there is a note here" without breaking the line of the text. */
+#mw-content-text .gra-qe-footnote-highlight {
+  background: none;
+   border-bottom: 1px dotted #c9976b;
+   text-decoration: none;
+   cursor: pointer;                 /* the words open the note too, not only the marker */
 }
-.mw-parser-output .bhashya p {
+#mw-content-text .gra-qe-footnote-highlight:hover { border-bottom-color: #b5451b; }
-   display: inline;
-   margin: 0;
+.gr-note-marker {
+   display: inline-block; vertical-align: super;
+   margin-left: 1px; padding: 0 3px;
+  font-family: var(--font-ui); font-weight: 600; line-height: 1.5;
+  /* Relative to the text, but capped: the reader's A+ goes to 30px and an
+     uncapped marker starts competing with the words it annotates. */
+  font-size: clamp(10px, 0.62em, 14px);
+  color: #8a5a2b; background: #fbf1e6; border: 1px solid #eddcc8; border-radius: 4px;
+  cursor: pointer; user-select: none; white-space: nowrap;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
 }
-.mw-parser-output .bhashya.footnote {
+.gr-note-marker:hover,
-  font-size: 0.9em;
+.gr-note-marker:focus-visible { background: #f3e0c9; color: #6d4318; border-color: #ddc3a3; }
-  padding-left: 40px;
+.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
-  padding-top: 12px;
+.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }
-   padding-bottom: 12px;
-   border-top: 1px solid #007bff;
+/* The open state for an annotated WORD - used when the card is anchored to
-   border-bottom: 1px solid #007bff;
+   the words themselves, which is the case for a commentary's notes (they
+   carry no superscript). It must not reverse the text out, or the word it
+   is meant to point at becomes unreadable. */
+#mw-content-text .gra-qe-footnote-highlight.gr-note-hl-open {
+   background: #fdefe6;
+   border-bottom: 1px solid #b5451b;
+   border-radius: 3px;
+  box-shadow: 0 0 0 2px #fdefe6;
 }
-/* ── Leading-bhashya (XSL: div.leading-bhashya) */
+/* The card. Fixed, because it is positioned against the marker's viewport
-.mw-parser-output .leading-bhashya {
+   box and follows it on scroll. */
-   font-style: italic;
+.gr-note-card {
-   color: var(--gr-black);
+  /* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,
-   margin: 0.4em 0 0.5em;
+     so the card opened underneath them. */
-   line-height: 1.6;
+   position: fixed; z-index: 10500; width: min(380px, calc(100vw - 20px));
+   background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;
+   box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);
+   overflow: hidden;
 }
+.gr-note-card[hidden] { display: none; }
-/* ── Pramana container (XSL: div.pramana) */
+.gr-note-card-head {
-.mw-parser-output .pramana {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
-   font-style: italic;
+  padding: 9px 10px 9px 14px; border-bottom: 1px solid #f1e4db; background: #fdf8f4;
-   color: #be100e;
+}
-   margin: 0.4em 0;
+.gr-note-card-kind {
+  font-family: var(--font-indic); font-weight: 600; color: #b5451b;
+  /* CHANGED: fixed 14px -> scales with the reader's text size. */
+  font-size: clamp(14px, calc(var(--gr-font-size, 22px) * 0.72), 22px);
+}
+.gr-note-card-close {
+   flex: none; width: 26px; height: 26px; padding: 0;
+   font: 400 18px/1 var(--font-ui); color: #8b7d74;
+   background: transparent; border: 0; border-radius: 6px; cursor: pointer;
 }
-/* Pramana verse (XSL: div.padya inside div.pramana) */
+.gr-note-card-close:hover { background: #f3e7df; color: #5a4a41; }
-.mw-parser-output .pramana .padya {
+.gr-note-card-body {
-   margin-bottom: 1.2em;
+   padding: 13px 14px 15px;
-   text-align: left;
+  font-family: var(--font-indic); line-height: 1.7; color: #2c1810;
-   padding-left: var(--gr-i5mm);
+   /* CHANGED: fixed 17px against 22px body text -> scales with it. */
-   line-height: 1.55;
+   font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.94), 30px);
+   max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere;
 }
-/* Pramana prose (XSL: div.gadya inside div.pramana) */
-.mw-parser-output .pramana .gadya {
+/* Phones: a sheet at the bottom reads better than a card floating over the
-  margin-bottom: 0.8em;
+   line, and there is no hover to fall back on. */
-  text-align: justify;
+@media (max-width: 600px) {
-  text-indent: var(--gr-i7mm);
+  .gr-note-card {
-   padding-left: var(--gr-i2mm);
+    left: 0 !important; right: 0; top: auto !important; bottom: 0;
+    width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0;
+    box-shadow: 0 -8px 30px rgba(60, 20, 10, 0.2);
+   }
+  .gr-note-card-body { font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.9), 26px); max-height: 50vh; }
 }
-/* ── Uvaaca (XSL: blockquote.uvaaca) */
+/* The list QuickEdit keeps at the foot of the document */
-.mw-parser-output blockquote.uvaaca,
+.gra-qe-footnotes.gr-notes-listed { display: none; }
-.mw-parser-output .uvaaca {
+@media print {
-  color: #BF360C;
+  .gr-note-marker { background: none; border: 0; color: #000; }
-   padding: 8px 40px;
+   .gr-note-card { display: none !important; }
-   border-left: 3px solid #BF360C;
+   .gra-qe-footnotes.gr-notes-listed { display: block; margin-top: 28px; padding-top: 12px; border-top: 1px solid #ccc; }
-   margin: 16px 0 20px;
+   .gra-qe-footnote-quote { font-weight: 600; margin-right: 6px; }
-   background-color: #FFF4F3;
+   .gra-qe-footnote-item,
-   font-style: normal;
+   .gra-qe-footnote-text { font-family: var(--font-indic); }
-  font-weight: 500;
 }
-/* ── Author-note (XSL: p.author-note / div.gr-author-note) */
+/* ── 39. LINE ALIGNMENT CARRIED FROM THE SOURCE DOCUMENT ──────────
-.mw-parser-output .author-note,
+   A converted document puts one of these on a line whose source
-.mw-parser-output .gr-author-note {
+   paragraph carried an explicit alignment (Katha sets 288 paragraphs
-   font-family: var(--gr-font-dev) !important;
+   CENTER - every invocation and colophon). New classes only: no existing
-   font-size: 16px !important;
+   rule is overridden, and a line whose source set no alignment gets no
-  font-weight: 700 !important;
+   class and keeps whatever the site already gives it. */
-  color: var(--gr-maroon) !important;
+.gr-align-center  { text-align: center; }
-   text-align: center !important;
+/* The closing verse number is one unit - "॥ ४ ॥" is separated by ordinary
-  margin: 14px 0 !important;
+   spaces, so without this a narrow column wraps between them and strands
-   padding: 0 !important;
+   the number on a line of its own. */
-  border: none !important;
+.gr-verse-num { white-space: nowrap; }
-  background: none !important;
+.gr-align-right   { text-align: right; }
-  line-height: 1.6;
+.gr-align-justify { text-align: justify; }
+/* Footnotes belonging to an interleaved commentary, grouped under its name
+   in the right-hand panel. Shown only where that list is shown. */
+.gr-teeka-notes-group { margin-top: 14px; }
+.gr-teeka-notes-title {
+   font-family: var(--font-deva);
+   font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.68), 19px);
+   font-weight: 600; color: #b5451b;
+   padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;
 }
-/* ── Prateeka / Moola inline (XSL: span.prateeka, em.Moola) */
+/* Footnote panel: one section per source document. The page's own notes
-.mw-parser-output .prateeka,
+   come first, then a section per commentary shown on the page. */
-.mw-parser-output .gr-prateeka {
+.gra-footnote-section-title {
-   font-weight: bold !important;
+   font-family: var(--font-deva);
-   font-style: normal !important;
+   font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);
-  color: var(--gr-orange) !important;
+   font-weight: 600; color: #b5451b;
-   display: inline-block;
+  margin: 14px 4px 6px; padding-bottom: 4px;
-   margin: 0 0.1em;
+   border-bottom: 1px solid #f1e4db;
 }
-.mw-parser-output .Moola,
+.gra-footnote-section-title:first-child { margin-top: 2px; }
-.mw-parser-output .gr-moola {
+.gra-footnote-section-own { color: #7a6a60; }
-   font-weight: bold !important;
+/* Repeated on the card, for when the heading has scrolled out of view. */
-   font-style: italic !important;
+.gra-footnote-source {
-  color: var(--gr-maroon) !important;
+   font-family: var(--font-deva);
-   display: inline-block;
+   font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
-  margin: 0 0.1em;
+   color: #b5451b; opacity: 0.85; margin-bottom: 2px;
 }
-/* ── Reference / quote links (XSL: a.qt) */
+/* The annotation count badge was removed (it was clipped by the round
-.mw-parser-output a.qt,
+   toggle's own overflow). This keeps it hidden for anyone still served a
-.mw-parser-output .gr-reference {
+   cached copy of the old gadget. */
-   color: var(--gr-orange) !important;
+#gra-toggle-badge { display: none !important; }
-   font-style: italic;
-  text-decoration: none !important;
+/* ── LINK LANDING ───────────────────────────────────────────────────
+   Where a copied id or a bookmark citation link lands. The flash used to
+   be injected by copyId.js; it lives here so the landing still reads when
+   only common.js is loaded. */
+.gid-target {
+   animation: gid-target-flash 2.4s ease-out 1;
+   border-radius: 4px;
 }
-.mw-parser-output a.qt:hover,
+@keyframes gid-target-flash {
-.mw-parser-output .gr-reference:hover {
+%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }
-   text-decoration: underline dotted !important;
+%    { background: transparent; box-shadow: none; }
 }
+@media (prefers-reduced-motion: reduce) {
-/* ── Adhikarana heading (XSL: h3.adhikarana-heading) */
+   .gid-target { animation: none; background: rgba(181,69,27,0.14); }
-.mw-parser-output h3.adhikarana-heading,
-.mw-parser-output .adhikarana-heading {
-  font-size: 1em !important;
-  font-weight: 600 !important;
-  color: var(--gr-orange) !important;
-   text-align: center !important;
-  margin: 22px auto 6px !important;
-  border-bottom: 1px dotted var(--gr-orange) !important;
-  width: 65%;
-  padding: 0 !important;
 }
-/* ── Avataranika (XSL: p.avataranika) */
+/* ── BOOKMARK CITATION ──────────────────────────────────────────────
-.mw-parser-output .avataranika {
+   The reference a bookmark produces, shown on its card and copyable in
-   font-style: italic;
+   one click. Set small and in the UI face deliberately: it is apparatus
-   color: #444;
+   for the reader to take away, not part of the text. */
-   margin: 0.3em 0 0.5em 0.5em;
+.gra-bookmark-cite {
-   padding-left: 0.6em;
+  margin-top: 6px;
-   border-left: 2px solid #c9a96e;
+  /* --font-translit, not --font-indic. The reference is romanised - IAST
-   line-height: 1.6;
+     author, IAST title, Latin site name and URL - and Gentium Book Plus
+     is the only family here with a REAL italic face (Adishila, which
+     --font-indic leads with, has none at this weight, so the italic title
+     fell back to a synthetic slant or to nothing at all). Gentium's
+     unicode-range covers Latin only, so a Devanagari fallback title still
+     lands on Adishila further down the stack. */
+  font-family: var(--font-translit);
+   font-synthesis: style;            /* allow a slant for the Devanagari case */
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);
+   line-height: 1.5; color: #6b5b52;
+   /* Ragged right and flush left. The hanging indent that was here reads
+     correctly in a printed reference LIST, where it separates one entry
+     from the next; on a single card it just looked like the lines had
+     slipped. Justification came in from the panel and stretched the word
+     gaps, which is what made the spacing look broken. */
+  text-align: left;
+  text-indent: 0;
+   padding-left: 0;
+   overflow-wrap: break-word;
+   word-break: normal;
+  hyphens: none;
 }
+.gra-bookmark-cite a {
-/* ── Mulaprateeka (XSL: p.mulaprateeka) */
+   color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;
-.mw-parser-output .mulaprateeka,
+   overflow-wrap: anywhere;          /* only the URL may break mid-token */
-.mw-parser-output .gr-mulaprateeka-block {
-  font-weight: bold !important;
-  font-style: italic !important;
-   color: var(--gr-maroon) !important;
-  text-align: center !important;
-  margin: 0.6em 0 0.3em !important;
-   line-height: 1.5;
 }
+.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }
+.gra-bookmark-cite i,
+.gra-bookmark-cite em { font-style: italic; font-synthesis: style; }
-/* ── Gadya heading (XSL: h2.topichead) */
+/* Where the bookmark sits in the text. A caption, not part of the
-.mw-parser-output h2.topichead {
+   citation - so it is set in the UI face and kept visually apart from
-   font-size: 1em !important;
+   the reference below it. */
-   color: #800080 !important;
+.gra-bookmark-locator {
-   font-weight: 500 !important;
+  margin-top: 5px;
-   margin-top: 10px !important;
+   font-family: var(--font-ui);
-   display: none; /* ref site hides topichead by default */
+   font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);
+   font-weight: 600;
+   letter-spacing: .02em;
+   color: #8a7a70;
 }
-/* ── Bhashya-collection inlinepara run */
+.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }
-.mw-parser-output .gr-inlinepara-run {
-  font-family: var(--gr-font-dev) !important;
-  font-size: 16px;
-  color: var(--gr-black);
-  text-align: justify;
-  line-height: 1.65;
-  margin: 0.2em 0;
-}
-/* ── Bhashya anchor (for copy-id hover) */
+.gra-cite-copy {
-.mw-parser-output .gr-bhashya-anchor {
+  margin-top: 6px; padding: 3px 10px;
-   /* inline, no visual change — just provides ID anchor */
+  font-family: var(--font-ui);
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
+  font-weight: 600; color: #b5451b;
+  background: #fff5f2; border: 1px solid #f0cfc4; border-radius: 20px;
+   cursor: pointer; transition: background .15s, color .15s, border-color .15s;
 }
+.gra-cite-copy:hover { background: #b5451b; color: #fff; border-color: #b5451b; }
+.gra-cite-copy--done { background: #2e6e40; color: #fff; border-color: #2e6e40; }