MediaWiki:Common.css: Difference between revisions

Revision as of 03:26, 12 October 2026

/* INSTALL ONLY IN MediaWiki:Common.css — Vanisource V7 */
/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');

/* ==========================================================================
   1. VANISOURCE CORE UTILITIES & TEXT FORMATTING
   ========================================================================== */
.cw_0 { display: none; }
.cw_50 { width: 50px; }
.cw_150 { width: 150px; }
.cw_500 { width: 500px; }

.tabs-input { display: none !important; }
.noautonum .tocnumber { display: none; }

.daytable { text-align: left; }
.vanitable {
    border: 0.1em solid #BFBFBF;
    border-collapse: collapse;
    padding: 0.25em;
    background-color: #F2F2F2;
    text-align: left;
    vertical-align: middle;
}
.journaltable { max-width: 108em; min-width: 65em; }

.timelineh2 {
    text-align: center;
    border: 1px solid #ddcef2;
    background: #F2F2F2;
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelineh3 {
    text-align: center;
    border-top: 1px solid #ddcef2;
    border-bottom: 1px solid #ddcef2;
    background: #FFFFFF;
    padding: 0.2em 0.4em;
    margin: auto;
    overflow: hidden;
}
.timelinesummary {
    border: thin solid #ddcef2;
    border-radius: 1em;
    box-shadow: 0.5em 0.5em 0.5em #888888;
    background: #FFFFCC;
    min-width: 77em;
    margin: 1em auto 3em auto;
    padding: 1em;
    text-align: center;
}
.timelinelinks { text-align: center; font-size: 132%; font-weight: bold; }
.timelinelinks a { color: #B5BD64; }

.greentext { color: #296F39; }
.quotelink { font-size: 1em; font-weight: bold; color: #296F39; }
.nectardroptext { font-size: 1em; font-weight: bold; color: #296F39; }
.daystext { color: #296F39; }
.daystextb { color: #296F39; font-weight: bold; }
.lec_code { font-weight: bold; }
.code { font-weight: bold; font-size: 90%; }

.highlight_quote { background-color: #F9F7E0; margin: 0px; padding: 4px 2px; }
.highlight_terms { background-color: #EEE8AA; }
.hlterm { background-color: yellow; border: 1px Solid #EE9977; padding: 1px 2px 1px 2px; margin: -1px; }

.firstchar {
    float: left;
    width: 0.7em;
    font-size: 375%;
    font-family: algerian, courier;
    line-height: 80%;
}
.MITL_page_nav {
    text-align: left;
    border: 1px solid #BFBFBF;
    background: #FFF2E6;
    padding: 0.2em 0.4em;
    margin: auto;
}
.daysnav,.monthsnav { display: flex; flex-wrap: wrap; justify-content: center; }
.daysnav .month { margin: 25px 2%; }
.monthsnav .year { margin: 25px 5%; }

/* ----------------- Book styles ----------------- */
.devanagari { color: #000000; font-weight: bold; }
@font-face {
    font-family: interDiac;
    src: url(/css/GauraTimes.ttf);
}
.verse { color: #000000; font-style: italic; }
.versecenter { color: #000000; font-style: italic; text-align: center; }
.verse.inter_diac { font-family: interDiac; }
.synonyms { color: #000000; }
.synonyms.inter_diac { font-family: interDiac; }
.translation { color: #000000; font-weight: bold; }
.translation.inter_diac { font-family: interDiac; font-size: 1.1em; }
.purport { color: #000000; }
.purport.inter_diac { font-family: interDiac; font-size: 1.1em; }
*:not(a).text { color: #000000; }
.text.inter_diac { font-family: interDiac; font-size: 1.1em; }
a[href*="syno_o"]:visited { color: purple; }

.SB65verse {
    white-space: pre-line;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    text-align: center;
    color: #000000;
}

#verse { white-space: pre; }
#translation { color: #000000; font-weight: bold; }

/* -------------------- BEGIN NEW COMPILE FORM -------------------- */
.quote { margin: 1.5em 0em; font-family: tahoma; }
.quote_heading { font-weight: bold; color: #296F39; }
.quote_translation { font-weight: bold; color: #000000; }
.quote_link { font-weight: bold; }
.quote_text { color: #000000; }
.quote_verse { color: #000000; }
.quote_text a { font-weight: bold; }

/* -------------------- BEGIN MAIN PAGE CODING -------------------- */
.MainHeader h4 { margin:0!important; padding:0.2em 0.4em; }

body.page-Main_Page h2, body.page-Talk_Main_Page h2, body.page-Main_Page_test h2, body.page-Main_Page_test h1 {
    background: #f9f9f9; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    padding: 0.3em; 
    margin: 1em 0; 
    color: #B5BD64; 
    font-family: georgia; 
    font-weight: bold; 
    text-align: center;
}

#banner {
    text-align: center; 
    background: #f9f9f9; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    padding: 0.3em; 
    font-size: 125%;
}

#mainbanner {
    text-align: center; 
    background: #345B63; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc; 
    padding: 0.3em; 
    color: #faf2af; 
    font-family: georgia; 
    font-size: 150%; 
    font-style: italic;
}

#mainlinks { text-align:center; font-weight:bold; font-size: 110%; margin-bottom:0.5em }
#mainlinks a, #mainh2links a { color:#B5BD64 }
#mainmantra { text-align:center; margin-top:1.5em; color:#B5BD64; }
.maincenter { text-align:center; max-width:65em; margin:0px auto; padding-bottom:1em; }
.mainleft { text-align: left; max-width: 100em; margin: 0px auto; padding-bottom: 1em; }
.mainjustify { text-align: justify; max-width: 65em; margin: 0px auto; padding-bottom: 1em; }

.vaniquotebox { text-align: left; min-height: 11.6em; border:thin solid #000000; border-radius: 1em; box-shadow: 0.5em 0.5em 1em #bcbcbc; margin: 1em 0em; }
@media screen and (min-width: 800px) { .vaniquotebox { max-width:80%; } }
.vaniquotebox > table { text-align:left; font-size:1em; color:#000000; min-height: 11.5em; margin: 0; }
.vaniquotebox td { padding: 8px; }

/* V6: original article utilities retained; shared shell replaced below. */
/* ==========================================================================
   6. UI COMPONENTS (ACCORDION, THEME GRID, CARDS, BACK-TO-TOP)
   ========================================================================== */
.theme-analysis-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; margin: 2em 0; width: 100%; box-sizing: border-box; }
.theme-column { background: rgba(255, 255, 255, 0.2); padding: 15px; border: 1px solid #B5BD64; border-radius: 8px; }
.theme-column ul { list-style-type: none; padding: 0; margin: 0; }
.theme-column li { margin-bottom: 10px; font-weight: bold; }

.book-accordion { background: #FFF8EE; border: none; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.06); overflow: hidden; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.book-accordion-header { background-color: #91cfa9; color: #1f4033; padding: 16px 20px 16px 60px; font-size: 18px; font-weight: bold; border-bottom: 3px solid #296F39; cursor: pointer; transition: background-color 0.2s ease; user-select: none; }
.book-accordion-header:hover { background-color: #7fbd97; }
.book-accordion .mw-collapsible-toggle { float: right; font-weight: normal; font-size: 13px; background: rgba(255, 255, 255, 0.15); padding: 4px 12px; border-radius: 20px; margin-top: -2px; }
.book-accordion .mw-collapsible-toggle a { color: #1f4033 !important; text-decoration: none; }
.book-accordion .mw-collapsible-toggle a:hover { text-decoration: underline; }
.book-accordion-content { padding: 24px; }

.book-grid-list { column-width: 280px; column-gap: 20px; list-style-type: none; margin: 0; padding: 0; }
.book-grid-list.single-column { column-width: auto; column-count: 1; column-gap: 0; }
.book-grid-list li { margin-bottom: 12px; break-inside: avoid; }
.mw-parser-output .book-grid-list li a, .mw-parser-output .book-grid-list li a.external { display: block !important; padding: 8px 16px !important; background-color: #ffffff !important; background-image: none !important; border: 1px solid #e1e4e8 !important; border-radius: 6px; text-decoration: none; color: #1a5e9a; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.2s ease; }
.mw-parser-output .book-grid-list li a:hover, .mw-parser-output .book-grid-list li a.external:hover { background-color: #f4f8fc !important; border-color: #1a5e9a !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(26,94,154,0.12); }

.vision-btn.btn-framed { position: relative !important; margin: 12px !important; }
.vision-btn.btn-framed::after { content: ""; position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 2px solid #296F39 !important; border-radius: 6px !important; pointer-events: none; }
.vision-btn.btn-framed:hover::after { border-color: #1d5229 !important; }

.compilation-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 30px; margin: 20px auto; max-width: 1000px; }
.compilation-image { flex: 1 1 300px; text-align: center; max-width: 450px; }
.compilation-button-grid { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 15px; }
.compilation-btn { background-color: #296F39; padding: 12px 24px; font-size: 16px; font-weight: bold; border-bottom: 3px solid #1d5229; border-radius: 4px; text-align: center; }
.compilation-btn a { color: #ffffff !important; text-decoration: none; display: block; }
.compilation-btn-full { grid-column: 1 / -1; }

#vanipedia-back-to-top { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background-color: #296F39 !important; color: #ffffff !important; border: none !important; outline: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; z-index: 1000 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease !important; }
#vanipedia-back-to-top.visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
#vanipedia-back-to-top:hover { background-color: #1d5229 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important; }
#vanipedia-back-to-top svg { display: block !important; width: 22px !important; height: 22px !important; stroke: #ffffff !important; }

/* MEDIA SNIPPETS OVERFLOW FIX */
.mw-parser-output div[style*="#feffe1"] { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
.mw-parser-output div[style*="#feffe1"] div { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
.mw-parser-output div[style*="#feffe1"] img, .mw-parser-output div[style*="#feffe1"] iframe, .mw-parser-output div[style*="#feffe1"] .embedvideo, .mw-parser-output div[style*="#feffe1"] span[typeof="mw:File"] { max-width: 100% !important; height: auto !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; }

/* ==========================================================================
   7. MOBILE RESPONSIVENESS
   ========================================================================== */
@media screen and (max-width: 900px) {
    .theme-analysis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 768px) {
    .mw-parser-output img { max-width: 100%; height: auto !important; }
    #vanipedia-back-to-top { bottom: 18px !important; right: 18px !important; width: 40px !important; height: 40px !important; }
    .book-grid-list { grid-template-columns: 1fr; display: block; }
}
@media screen and (max-width: 600px) {
    .theme-analysis-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   8. LEGACY AC_RESULTS (AUTOCOMPLETE)
   ========================================================================== */
.ac_results { padding: 0px; border: 1px solid black; background-color: Window; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; }
.ac_loading { background: Window url('indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: aquamarine; color: HighlightText; }
.ac_moreItems { text-align: center; background-color: InactiveCaption; color: InactiveCaptionText; margin: 0px; padding: 0px 5px; cursor: default; display: block; width: 100%; font: bold menu 12px; overflow: hidden; -moz-user-select: none; -khtml-user-select: none; }

/* ==========================================================================
   9. USED BY TEMPLATE:NAVBAR AND BG FOOTER
   ========================================================================== */
.verse-nav { float:right; }
.prev-link { float:left; min-height:22px; padding:0 0 0 25px; background:url(/w/images/Go-previous.png) no-repeat left }
.next-link { float:left; min-height:22px; padding:0 25px; background:url(/w/images/Go-next.png) no-repeat right }
.chap-nav, #chap-nav, #book-nav, #page-nav { float:left }

/* ==========================================================================
   10. DARK MODE / NIGHT MODE OVERRIDES
   ========================================================================== */
html.skin-theme-clientpref-night { --background-color-base: #121212 !important; --background-color-page: #121212 !important; --background-color-quiet: #1a1a1a !important; --color-base: #e2e8f0 !important; }
html.skin-theme-clientpref-night body, html.skin-theme-clientpref-night #content, html.skin-theme-clientpref-night .mw-body, html.skin-theme-clientpref-night #mw-page-base, html.skin-theme-clientpref-night #mw-head-base { background: #121212 !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .mw-page-container, html.skin-theme-clientpref-night .mw-page-container-inner, html.skin-theme-clientpref-night .mw-content-container, html.skin-theme-clientpref-night .mw-header, html.skin-theme-clientpref-night .vector-header-container, html.skin-theme-clientpref-night .vector-sticky-header, html.skin-theme-clientpref-night .vector-column-start, html.skin-theme-clientpref-night .vector-column-end, html.skin-theme-clientpref-night .vector-sidebar-container, html.skin-theme-clientpref-night .vector-pinnable-element, html.skin-theme-clientpref-night .vector-pinnable-header, html.skin-theme-clientpref-night .vector-pinned-container, html.skin-theme-clientpref-night .vector-toc, html.skin-theme-clientpref-night #vector-toc, html.skin-theme-clientpref-night .vector-toc-pinned-container, html.skin-theme-clientpref-night .vector-toc-contents, html.skin-theme-clientpref-night .vector-menu-content, html.skin-theme-clientpref-night .vector-appearance-pinned-container, html.skin-theme-clientpref-night .vector-page-toolbar-container, html.skin-theme-clientpref-night .vector-page-toolbar, html.skin-theme-clientpref-night .cdx-menu, html.skin-theme-clientpref-night .cdx-menu__list, html.skin-theme-clientpref-night .cdx-menu-item, html.skin-theme-clientpref-night .cdx-radio, html.skin-theme-clientpref-night #vector-appearance { background-color: #121212 !important; background-image: none !important; border: none !important; box-shadow: none !important; color: #e2e8f0 !important; }
html.skin-theme-clientpref-night #vector-sticky-header { background-color: #1a1a1a !important; border-bottom: 2px solid #3b4b5f !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; }
html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .mw-headline, html.skin-theme-clientpref-night #vector-sticky-header .vector-sticky-header-context-bar .vector-sticky-header-title { color: #ffffff !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top { background-color: #3b4b5f !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important; }
html.skin-theme-clientpref-night #vanipedia-back-to-top:hover { background-color: #4f637c !important; }
html.skin-theme-clientpref-night .quote_text, html.skin-theme-clientpref-night *:not(a).text { color: #e2e8f0 !important; }
html.skin-theme-clientpref-night .devanagari, html.skin-theme-clientpref-night .verse, html.skin-theme-clientpref-night .versecenter, html.skin-theme-clientpref-night .synonyms, html.skin-theme-clientpref-night .translation, html.skin-theme-clientpref-night .purport { color: #e2e8f0 !important; }

/* ==========================================================================
   11. LIGHT MODE SPECIFIC OVERRIDES
   ========================================================================== */
html:not(.skin-theme-clientpref-night) .vector-sidebar-container { background-color: #e6dfa1 !important; --background-color-interactive: #e6dfa1 !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content { background-color: #ffffff !important; border: 1px solid #c8ccd1 !important; border-radius: 4px !important; padding: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; }
html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-main-menu, html:not(.skin-theme-clientpref-night) .vector-dropdown-content #vector-toc { background-color: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .vector-menu-heading, html:not(.skin-theme-clientpref-night) .vector-dropdown-content .vector-menu-heading { background-color: #296F39 !important; color: #ffffff !important; border-radius: 4px !important; padding: 8px 12px !important; margin-bottom: 4px !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link { color: #296F39 !important; }
html:not(.skin-theme-clientpref-night) #vector-main-menu .mw-list-item a:hover, html:not(.skin-theme-clientpref-night) #vector-toc .vector-toc-link:hover { color: #0645ad !important; background-color: #e6dfa1 !important; border-radius: 2px !important; }

/* ==========================================================================
   12. VANIPEDIA MAIN PAGE & CUSTOM HOMEPAGE GRIDS
   ========================================================================== */
body.page-Custom_Landing_Page #mw-head, body.page-Custom_Landing_Page #mw-panel, body.page-Custom_Landing_Page #left-navigation, body.page-Custom_Landing_Page #right-navigation, body.page-Custom_Landing_Page #p-personal, body.page-Custom_Landing_Page #p-search, body.page-Custom_Landing_Page #p-logo, body.page-Custom_Landing_Page #siteSub, body.page-Custom_Landing_Page #contentSub, body.page-Custom_Landing_Page #jump-to-nav, body.page-Custom_Landing_Page .mw-indicators, body.page-Custom_Landing_Page .mw-editsection, body.page-Custom_Landing_Page .vector-page-toolbar, body.page-Custom_Landing_Page .vector-page-titlebar, body.page-Custom_Landing_Page .vector-header-container, body.page-Custom_Landing_Page .vector-column-start, body.page-Custom_Landing_Page .vector-column-end, body.page-Custom_Landing_Page .vector-toc, body.page-Custom_Landing_Page .vector-settings, body.page-Custom_Landing_Page .vector-page-tools, body.page-Custom_Landing_Page .vector-main-menu-landmark, body.page-Custom_Landing_Page .mw-page-title-main, body.page-Custom_Landing_Page .firstHeading, body.page-Custom_Landing_Page #footer, body.page-Custom_Landing_Page .printfooter, body.page-Custom_Landing_Page .catlinks, body.page-Custom_Landing_Page .vector-sitenotice-container, body.page-Custom_Landing_Page #siteNotice, body.page-Custom_Landing_Page #localNotice, body.page-Custom_Landing_Page #mainbanner { display: none !important; }
body.page-Custom_Landing_Page, body.page-Custom_Landing_Page .mw-page-container, body.page-Custom_Landing_Page .mw-page-container-inner, body.page-Custom_Landing_Page .mw-content-container, body.page-Custom_Landing_Page #content, body.page-Custom_Landing_Page .mw-body, body.page-Custom_Landing_Page .mw-body-content, body.page-Custom_Landing_Page #bodyContent, body.page-Custom_Landing_Page #mw-content-text, body.page-Custom_Landing_Page .mw-parser-output { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #f6f2e9 !important; }
body.page-Custom_Landing_Page .mw-page-container, body.page-Custom_Landing_Page .mw-page-container-inner, body.page-Custom_Landing_Page .mw-content-container { display: block !important; min-height: 0 !important; }
body.page-Custom_Landing_Page main#content { position: static !important; }
body.page-Custom_Landing_Page { overflow-x: hidden; }

/* 13. CUSTOM WIKIPEDIA-STYLE HOVER POPUP */
a[title]:hover::after {
    content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%);
    background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px;
    border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000;
}

/* ==========================================================
   VANISOURCE HEADER TABS
   ========================================================== */


/* HEADER STRIP */

#headertabs .oo-ui-menuLayout-menu {
    background: #faedf5 !important;
    border: 1px solid #5a636c !important;
    border-bottom: none !important;
    padding: 5px 5px 0 5px !important;
    box-shadow: none !important;
}


/* REMOVE OOUI FRAMES */

#headertabs .oo-ui-menuLayout-menu .oo-ui-panelLayout-framed,
#headertabs .oo-ui-tabSelectWidget-framed,
#headertabs .mw-header-tabs-wrapper.oo-ui-panelLayout-framed {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   CONTENT BELOW TABS
   ========================================================== */

#headertabs .oo-ui-menuLayout-content {
    background: transparent !important;
    border: 1px solid #a2a9b1 !important;
    border-top: 1px solid #5a636c !important;
    font-size: 16px !important;
    padding: 1.5em !important;
}


/* ==========================================================
   ALL TABS
   ========================================================== */

#headertabs .oo-ui-tabOptionWidget {
    position: relative !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}


/* TAB TEXT */

#headertabs .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
    font-size: 15px !important;
    color: #000000 !important;
    font-weight: bold !important;
    padding: 6px 12px !important;
}


/* ==========================================================
   ACTIVE TAB
   ========================================================== */

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    position: relative !important;
    z-index: 10 !important;

    background: #BDB76B !important;

    border: 1px solid #a2a9b1 !important;
    border-bottom: none !important;

    box-shadow: none !important;

    margin-bottom: -1px !important;
}


/* ==========================================================
   REMOVE ALL OOUI DECORATION INSIDE ACTIVE TAB
   ========================================================== */

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-buttonElement-button,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-buttonElement-button > span {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;

    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}


/* Restore active-tab text */

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label {
    color: #000000 !important;
}


/* ==========================================================
   REMOVE OOUI PSEUDO ELEMENTS
   ========================================================== */

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected::before,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected::after,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-buttonElement-button::before,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-buttonElement-button::after,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label::before,

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected
.oo-ui-labelElement-label::after {
    content: none !important;
    display: none !important;
}


/* ==========================================================
   ACTIVE TAB BOTTOM
   Covers line belonging to the strip underneath
   ========================================================== */

#headertabs
.oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
    border-bottom: 3px solid #BDB76B !important;
}

/* ==========================================================
   INACTIVE TAB HOVER
   ========================================================== */

#headertabs
.oo-ui-tabOptionWidget:hover:not(.oo-ui-optionWidget-selected) {
    background: #d7d4a8 !important;
    border: 1px solid #a2a9b1 !important;
}


/* Inner inactive tabs */

#headertabs
.oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected)
.oo-ui-buttonElement-button {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* V6 — one responsive main-page system, plus the shared petal shell. */
:root {
    --vs-paper:#faf7ef; --vs-ink:#263a39; --vs-green:#486247;
    --vs-gold:#f4d98b; --vs-brass:#805b16; --vs-line:#ded7c6;
    --vs-wash:#f0eee3;
}
body { background:var(--vs-paper); }
body.vs-main-view, body.vs-main-view .mw-page-container,
body.vs-main-view .mw-page-container-inner, body.vs-main-view .mw-body,
body.vs-main-view .mw-content-container { background:var(--vs-paper); }
body.vs-main-view .mw-page-container { padding:0 24px; }
body.vs-main-view .mw-page-container-inner {
    display:block; max-width:1240px; margin-inline:auto;
}
body.vs-main-view .mw-body { width:100%; min-width:0; max-width:none; margin:0; padding:0; border:0; }
body.vs-main-view #firstHeading, body.vs-main-view .mw-body-header,
body.vs-main-view .vector-column-start, body.vs-main-view .vector-column-end,
body.vs-main-view .vector-page-toolbar { display:none; }
body.vs-main-view .mw-parser-output { width:100%; }
body.vs-shell-ready .vs-native-header-replaced,
body.vs-shell-ready #vector-sticky-header { display:none !important; }
body.vs-shell-ready .vector-header-container { padding:0; min-height:0; }
body.vs-main-view .vector-main-menu-pinned-container { display:none; }

/* Main page: selectors are isolated from existing book and article styles. */
#vs-home { box-sizing:border-box; width:100%; max-width:1180px; margin:0 auto; padding:24px 24px 32px; color:var(--vs-ink); font:400 17px/1.6 Georgia,'Noto Serif',serif; }
#vs-home * { box-sizing:border-box; }
#vs-home a { color:var(--vs-ink); background-image:none; text-decoration:underline; text-decoration-color:#8e9a8a; text-underline-offset:4px; overflow-wrap:anywhere; }
#vs-home a:hover { color:var(--vs-brass); text-decoration-thickness:2px; }
#vs-home a:focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; border-radius:2px; }
#vs-home h1, #vs-home h2 { background:none; border:0; padding:0; margin:0; font-family:inherit; line-height:1.3; font-weight:600; color:var(--vs-brass); text-align:left; overflow-wrap:anywhere; }
#vs-home h1 { font-size:27px; text-align:center; margin-bottom:18px; }
#vs-home h2 { font-size:24px; margin-bottom:14px; }
#vs-home h2 a { color:inherit; text-decoration:none; }
#vs-home h2 a:hover { text-decoration:underline; }
#vs-home .mw-heading { display:block; margin:0; }
#vs-home .mw-editsection { display:none; }
#vs-home p { margin:0; }
#vs-home .vs-search { display:flex; align-items:end; gap:8px; max-width:660px; margin:0 auto 32px; font:400 16px/1.4 system-ui,sans-serif; }
#vs-home .vs-search label { display:block; flex:1; min-width:0; font-size:14px; }
#vs-home .vs-search input[type="search"] { display:block; width:100%; min-height:48px; padding:12px 14px; margin-top:6px; background:#fffdf7; color:var(--vs-ink); border:1px solid #829078; border-radius:5px; font:400 16px/1.4 system-ui,sans-serif; }
#vs-home .vs-search button { min-height:48px; padding:12px 18px; color:var(--vs-gold); background:var(--vs-green); border:1px solid var(--vs-green); border-radius:5px; font:400 16px/1.4 system-ui,sans-serif; cursor:pointer; }
#vs-home .vs-search :focus-visible { outline:3px solid var(--vs-green); outline-offset:3px; }
#vs-home #vs-search-slot>a { display:block; margin-bottom:24px; text-align:center; }
#vs-home .vs-collections { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.17fr) minmax(0,1fr); grid-template-areas:'books sanctuary lectures' 'letters sanctuary conversations'; gap:26px 32px; align-items:start; }
#vs-home .vs-books { grid-area:books; } #vs-home .vs-letters { grid-area:letters; }
#vs-home .vs-lectures { grid-area:lectures; } #vs-home .vs-conversations { grid-area:conversations; }
#vs-home .vs-sanctuary { grid-area:sanctuary; text-align:center; padding:0 8px; min-width:0; }
#vs-home .vs-collection { min-width:0; }
#vs-home .vs-collection h2 { padding-bottom:10px; border-bottom:1px solid var(--vs-line); }
#vs-home .vs-link-list a { display:block; min-height:44px; padding:8px 24px 8px 0; position:relative; text-decoration:none; border-bottom:1px solid #e9e3d6; }
#vs-home .vs-link-list a::after { content:'›'; position:absolute; right:4px; top:8px; color:var(--vs-brass); font-size:22px; }
#vs-home .vs-link-list a:hover { text-decoration:underline; }
#vs-home .vs-link-list a:last-child { border-bottom:0; }
#vs-home #vs-portrait-frame { display:block; position:relative; width:230px; height:230px; max-width:100%; margin:0 auto 20px; border:3px solid #345b63; border-radius:50%; overflow:hidden; background:var(--vs-wash); box-shadow:0 4px 16px #263a3920; }
#vs-home #vs-portrait-frame p, #vs-home #vs-portrait-frame span, #vs-home #vs-portrait-frame a { display:contents; }
#vs-home #vs-portrait-frame img { display:block; position:absolute; inset:0; width:100%; height:100% !important; max-width:none; object-fit:cover; object-position:50% 50%; margin:0; }
#vs-home .vs-source-quote { font-size:17px; line-height:1.6; margin-bottom:12px; }
#vs-home .vs-source-meta { font-size:15px; }
#vs-home .vs-source-meta a { color:var(--vs-brass); }
#vs-home .vs-browse { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin:32px 0; padding:22px 0; border-block:1px solid var(--vs-line); }
#vs-home .vs-browse h2 { font-size:21px; color:var(--vs-green); margin-bottom:8px; }
#vs-home .vs-browse-group { min-width:0; }
#vs-home .vs-browse-group a { display:inline-block; padding:6px 0; min-height:36px; }
#vs-home .vs-resources { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
#vs-home .vs-resource { min-width:0; }
#vs-home .vs-resource h2 { font-size:22px; margin-bottom:10px; }
#vs-home .vs-resource>div { font-size:16px; }
#vs-home .vs-resource a { display:inline-block; padding-block:5px; }

/* Tablet and narrower windows: center identity followed by two collections per row. */
@media (max-width:1050px) {
    #vs-site-header { grid-template-columns:140px minmax(0,1fr) 100px; padding-inline:16px; }
    #vs-home .vs-collections { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-areas:'sanctuary sanctuary' 'books letters' 'lectures conversations'; gap:26px; }
    #vs-home .vs-sanctuary { max-width:620px; width:100%; margin-inline:auto; padding-bottom:22px; border-bottom:1px solid var(--vs-line); }
    #vs-home #vs-portrait-frame { width:160px; height:160px; }
    #vs-home .vs-browse, #vs-home .vs-resources { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Phones: keep the visitor's orientation, normal text sizes and vertical scroll. */
@media (max-width:650px) {
    body.vs-main-view .mw-page-container { padding-inline:0; }
    #vs-site-header { grid-template-columns:64px minmax(0,1fr) 74px; padding:12px 8px; gap:6px; }
    #vs-site-header .vs-header-tools>a { display:none; }
    #vs-site-header button { padding:8px 4px; font-size:14px; }
    #vs-site-header .vs-name { font-size:21px; letter-spacing:1px; }
    #vs-site-header .vs-subtitle { font-size:12px; }
    #vs-site-header .vs-header-petals { display:none; }
    #vs-site-header .vs-shell-panel { left:8px; width:min(360px,calc(100vw - 16px)); max-height:65vh; }
    #vs-site-header #vs-account-panel { right:8px; left:auto; }
    #vs-home { padding:20px; }
    #vs-home .vs-search { gap:6px; margin-bottom:24px; }
    #vs-home .vs-search button { padding-inline:10px; }
    #vs-home .vs-search input[type="search"] { padding-inline:10px; }
    #vs-home .vs-collections { grid-template-columns:minmax(0,1fr); grid-template-areas:'sanctuary' 'books' 'letters' 'lectures' 'conversations'; gap:24px; }
    #vs-home h1 { font-size:24px; }
    #vs-home h2 { font-size:23px; }
    #vs-home #vs-portrait-frame { width:110px; height:110px; margin-bottom:14px; }
    #vs-home .vs-browse { gap:20px 18px; margin:26px 0; }
    #vs-home .vs-browse h2 { font-size:20px; }
    #vs-home .vs-browse-group a { min-height:44px; }
    #vs-home .vs-resources { grid-template-columns:minmax(0,1fr); gap:24px; }
    #vs-home .vs-resource a { min-height:44px; padding-block:9px; }
    #vs-site-footer { padding:18px; }
    #vs-site-footer nav { gap:3px 18px; }
}
@media (max-width:360px) {
    #vs-site-header { grid-template-columns:58px minmax(0,1fr) 65px; gap:4px; }
    #vs-site-header .vs-name { font-size:19px; }
    #vs-home { padding:16px; }
    #vs-home .vs-browse { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
    #vanipedia-back-to-top { transition:none !important; }
}

/* V7 — shared Vanipedia V173 bars with Vanisource identity. */
:root { --vs-green:#526b50; }
#siteNotice, #localNotice, .vector-sitenotice-container, #mainbanner, .mw-sitenotice { display:none !important; }
.vector-header-container { width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; }
header.vector-header, header.mw-header {
    display:grid !important; grid-template-columns:280px minmax(0,1fr) 220px !important;
    position:relative !important; align-items:center !important; gap:12px !important;
    width:100% !important; max-width:none !important; height:auto !important; min-height:86px !important;
    max-height:none !important; box-sizing:border-box !important; padding:10px 24px !important;
    background:#526b50 !important; border-bottom:2px solid #b1873d !important;
    box-shadow:0 4px 18px #00000038 !important; z-index:100 !important;
}
header .mw-logo { display:none !important; }
header .vector-header-start { display:flex !important; align-items:center !important; gap:14px !important; grid-column:1; grid-row:1; min-width:0; }
header .vector-header-end { display:flex !important; justify-content:flex-end !important; align-items:center !important; grid-column:3; grid-row:1; min-width:0; margin:0 !important; }
header #vanipedia-topbar-center-block { position:static !important; transform:none !important; grid-column:2; grid-row:1; width:100% !important; min-width:0; white-space:normal !important; }
header #vanipedia-topbar-title { font-size:18px !important; white-space:normal !important; line-height:1.3 !important; }
header .vanipedia-topbar-vaniseva-title a { font-size:12px !important; white-space:normal !important; }
header .vanipedia-topbar-sister-links { flex-wrap:wrap; gap:10px !important; }
header .vanipedia-topbar-sister-link { font-size:13px !important; }
header #p-search { width:170px !important; min-width:0 !important; margin:0 !important; position:static !important; }
header #p-search .vector-search-box-inner { width:100%; min-width:0; }
header #p-search input[name="search"] { width:100%; min-width:0; font-size:14px; color:#e7e2c9; background:#19383e; border:1px solid #b1873d; border-radius:18px; padding:6px 10px; }
header #p-search input::placeholder { color:#e7e2c9; }
#vanipedia-topbar-home-link { display:inline-flex !important; align-items:center; gap:6px; color:#f5d77f !important; text-decoration:none; font:600 15px Georgia,serif; }
.vanipedia-home-icon svg { display:block; }
header .vector-icon { filter:invert(88%) sepia(36%) saturate(520%) hue-rotate(350deg); }
header .vector-user-links a, header .vector-dropdown-label { color:#f5d77f !important; }
header .vector-dropdown-content { background:#faf7ef !important; color:#263a39; }
header .vector-dropdown-content a { color:#263a39 !important; }
header .vector-dropdown-content { max-width:calc(100vw - 32px); }
body #vector-sticky-header { display:none !important; }
#vh-bottom-bar {
    position:fixed; bottom:0; left:0; right:0; width:100%; height:38px;
    display:flex; align-items:center; box-sizing:border-box; background:#526b50;
    border-top:1.5px solid #b1873d; box-shadow:0 -3px 12px #00000038; z-index:100;
}
#vh-bottom-bar .vh-bottom-bar-inner { gap:10px; }
#vh-bottom-bar .vh-bottom-bar-left-space, #vh-bottom-bar .vh-bottom-bar-right-space { flex:1 1 0; min-width:0; }
#vh-bottom-bar .vh-bottom-nav-links { flex:0 0 auto; white-space:nowrap; }
#vh-bottom-bar a { color:#f5d77f; font-family:'Noto Serif',Georgia,serif; font-size:13px; text-decoration:none; }
#vh-bottom-bar a:hover { color:#fff; text-decoration:underline; }
#vh-bottom-bar .vh-bottom-link { display:inline-flex; align-items:center; padding:4px 6px; border-radius:4px; white-space:nowrap; font-weight:600; }
#vh-bottom-bar .vh-bottom-petal-links { display:flex; justify-content:center; gap:12px; }
#vh-bottom-bar .vh-bottom-petal-links a { font-size:12px; }
#vh-bottom-bar .vh-bottom-sep { color:#f5d77f66; }
#vh-bottom-bar .vh-bottom-donate { border:1px solid #dfad3e99; border-radius:12px; padding:3px 14px; background:#dfad3e26; }
#vh-bottom-bar .vh-bottom-social-links { gap:18px !important; }
#vh-bottom-bar .vh-bottom-social-item { min-width:28px; min-height:32px; justify-content:center; }
#vh-bottom-bar .vh-bottom-social-item img { height:20px !important; width:auto !important; }
body { padding-bottom:46px; }
#vanipedia-back-to-top { bottom:62px !important; }
header a:focus-visible, #vh-bottom-bar a:focus-visible { outline:3px solid #fff2c4 !important; outline-offset:3px; }
header .vector-dropdown-content a:focus-visible { outline-color:#345b63 !important; }
/* Same controls and three footer groups are retained on narrow screens. */
@media(max-width:1250px) {
    #vh-bottom-bar { position:static; height:auto; min-height:44px; }
    #vh-bottom-bar .vh-bottom-bar-inner { flex-wrap:wrap !important; justify-content:center; padding:12px 16px !important; gap:12px !important; }
    #vh-bottom-bar .vh-bottom-bar-left-space, #vh-bottom-bar .vh-bottom-bar-right-space { flex:1 1 100% !important; }
    #vh-bottom-bar .vh-bottom-nav-links { flex:1 1 100% !important; flex-wrap:wrap; white-space:normal !important; gap:8px !important; }
    #vh-bottom-bar .vh-bottom-link, #vh-bottom-bar .vh-bottom-petal-links a, #vh-bottom-bar .vh-bottom-social-item { min-height:44px; }
    body { padding-bottom:0; }
    #vanipedia-back-to-top { bottom:24px !important; }
}
@media(max-width:1050px) {
    header.vector-header, header.mw-header { grid-template-columns:minmax(0,1fr) auto !important; padding:12px 16px !important; }
    header .vector-header-start { grid-column:1; grid-row:1; }
    header .vector-header-end { grid-column:2; grid-row:1; }
    header #vanipedia-topbar-center-block { grid-column:1 / -1; grid-row:2; margin-top:8px; }
    header #vanipedia-topbar-title { font-size:17px !important; }
    header .vanipedia-topbar-vaniseva-title a { font-size:12px !important; }
    header .vanipedia-topbar-sister-links { gap:4px !important; }
    header .vanipedia-topbar-sister-link { min-height:36px; align-items:center; }
}
@media(max-width:650px) {
    header.vector-header, header.mw-header { padding:10px !important; gap:6px !important; }
    header .vector-header-start { gap:8px !important; flex-wrap:wrap; }
    header .vector-header-end { gap:4px; flex-wrap:wrap; max-width:130px; }
    header #p-search { width:130px !important; }
    header #vanipedia-topbar-title { font-size:16px !important; letter-spacing:1px !important; }
    header .vanipedia-topbar-sister-link { font-size:12px !important; padding:4px !important; }
    #vanipedia-topbar-home-link { font-size:14px; }
    header .vector-dropdown-label { min-width:36px; min-height:36px; }
    #vh-bottom-bar .vh-bottom-sep { display:none; }
    #vh-bottom-bar .vh-bottom-social-links { gap:24px !important; }
}