MediaWiki:Common.css: Difference between revisions

(9 intermediate revisions by the same user not shown)

Line 30:

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;

--font-indic: '~~Gentium Book Plus~~',

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

'AdishilaDev~~', 'Adishila~~', 'Noto Serif Devanagari',

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',

Line 41:

Line 51:

'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 {

Line 54:

Line 75:

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

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

font-display: swap;

}

@font-face {

Line 59:

Line 81:

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

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

font-display: swap;

}

@font-face {

Line 64:

Line 87:

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

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

font-display: swap;

}

@font-face {

Line 69:

Line 93:

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

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

font-display: swap;

}

@font-face {

Line 74:

Line 99:

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

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

font-display: swap;

}

@font-face {

Line 79:

Line 105:

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

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

font-display: swap;

}

@font-face {

Line 84:

Line 111:

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

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

font-display: swap;

}

Line 213:

Line 241:

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

Line 506:

Line 539:

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-~~indic~~);

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

}

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

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

else a page mixes in. */

#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);

}

Line 2,478:

Line 2,521:

vertical-align offsets by hand. */

.gr-teeka-cb-wrap {

~~display~~: inline-flex~~; align~~-~~items: center; gap~~: 6px;

/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box

~~vertical-align~~: ~~middle~~;

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;

}

.gr-teeka-inline-checkbox {

-webkit-appearance: none; appearance: none;

width: ~~15px~~ !important; height: ~~15px~~ !important;

/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed

min-width: ~~15px~~; min-height: ~~15px~~;

15px box against text that grows; clamped so it stays a sensible

margin: 0; padding: 0; cursor: pointer;

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;

Line 2,494:

Line 2,555:

}

.gr-teeka-inline-checkbox:checked::after {

content: ''; position: absolute; left: ~~4px~~; top: ~~1px~~;

/* Placed and sized in % of the box, so the tick follows the em-based

width: ~~4px~~; height: ~~8px~~;

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);

Line 2,716:

Line 2,779:

.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }

/* The open state for an annotated WORD - used when the card is anchored to

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;

}

/* The card. Fixed, because it is positioned against the marker's viewport

box and follows it on scroll. */

.gr-note-card {

position: fixed; z-index: ~~1200~~; width: min(380px, calc(100vw - 20px));

/* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,

so the card opened underneath them. */

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);

Line 2,784:

Line 2,860:

.gr-align-right { text-align: right; }

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

}

/* Footnote panel: one section per source document. The page's own notes

come first, then a section per commentary shown on the page. */

.gra-footnote-section-title {

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

font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);

font-weight: 600; color: #b5451b;

margin: 14px 4px 6px; padding-bottom: 4px;

border-bottom: 1px solid #f1e4db;

}

.gra-footnote-section-title:first-child { margin-top: 2px; }

.gra-footnote-section-own { color: #7a6a60; }

/* Repeated on the card, for when the heading has scrolled out of view. */

.gra-footnote-source {

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

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);

color: #b5451b; opacity: 0.85; margin-bottom: 2px;

}

/* The annotation count badge was removed (it was clipped by the round

toggle's own overflow). This keeps it hidden for anyone still served a

cached copy of the old gadget. */

#gra-toggle-badge { display: 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;

}

@keyframes gid-target-flash {

0%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }

100% { background: transparent; box-shadow: none; }

}

@media (prefers-reduced-motion: reduce) {

.gid-target { animation: none; background: rgba(181,69,27,0.14); }

}

/* ── BOOKMARK CITATION ──────────────────────────────────────────────

The reference a bookmark produces, shown on its card and copyable in

one click. Set small and in the UI face deliberately: it is apparatus

for the reader to take away, not part of the text. */

.gra-bookmark-cite {

margin-top: 6px;

/* --font-translit, not --font-indic. The reference is romanised - IAST

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 {

color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;

overflow-wrap: anywhere; /* only the URL may break mid-token */

}

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

/* Where the bookmark sits in the text. A caption, not part of the

citation - so it is set in the UI face and kept visually apart from

the reference below it. */

.gra-bookmark-locator {

margin-top: 5px;

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

font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);

font-weight: 600;

letter-spacing: .02em;

color: #8a7a70;

}

.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.gra-cite-copy {

margin-top: 6px; padding: 3px 10px;

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 30: / Line 30: @@
       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;
-   --font-indic: 'Gentium Book Plus',
+  /* The READING face. Adishila leads: this is what moola, bhashya, teeka
-                'AdishilaDev', 'Adishila', 'Noto Serif Devanagari',
+     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',
@@ Line 41: / Line 51: @@
                  '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 {
@@ Line 54: / Line 75: @@
    src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 59: / Line 81: @@
    src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
    font-weight: bold; font-style: italic;
+  font-display: swap;
 }
 @font-face {
@@ Line 64: / Line 87: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 69: / Line 93: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 74: / Line 99: @@
    src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 79: / Line 105: @@
    src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 84: / Line 111: @@
    src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
@@ Line 213: / Line 241: @@
    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
@@ Line 506: / Line 539: @@
    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-indic);
+   text-align:center; font-family: var(--font-deva);
+}
+/* Headings take AdishilaDev (--font-deva) rather than the general Indic
+   stack, so the heading face is the same everywhere regardless of what
+   else a page mixes in. */
+#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);
 }
@@ Line 2,478: / Line 2,521: @@
     vertical-align offsets by hand. */
 .gr-teeka-cb-wrap {
-   display: inline-flex; align-items: center; gap: 6px;
+   /* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
-   vertical-align: middle;
+     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;
 }
 .gr-teeka-inline-checkbox {
    -webkit-appearance: none; appearance: none;
-   width: 15px !important; height: 15px !important;
+  /* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
-   min-width: 15px; min-height: 15px;
+px box against text that grows; clamped so it stays a sensible
-   margin: 0; padding: 0; cursor: pointer;
+     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;
@@ Line 2,494: / Line 2,555: @@
 }
 .gr-teeka-inline-checkbox:checked::after {
-   content: ''; position: absolute; left: 4px; top: 1px;
+  /* Placed and sized in % of the box, so the tick follows the em-based
-   width: 4px; height: 8px;
+     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);
@@ Line 2,716: / Line 2,779: @@
 .gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
 .gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }
+/* The open state for an annotated WORD - used when the card is anchored to
+   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;
+}
 /* The card. Fixed, because it is positioned against the marker's viewport
     box and follows it on scroll. */
 .gr-note-card {
-   position: fixed; z-index: 1200; width: min(380px, calc(100vw - 20px));
+  /* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,
+     so the card opened underneath them. */
+   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);
@@ Line 2,784: / Line 2,860: @@
 .gr-align-right   { text-align: right; }
 .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;
+}
+/* Footnote panel: one section per source document. The page's own notes
+   come first, then a section per commentary shown on the page. */
+.gra-footnote-section-title {
+  font-family: var(--font-deva);
+  font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);
+  font-weight: 600; color: #b5451b;
+  margin: 14px 4px 6px; padding-bottom: 4px;
+  border-bottom: 1px solid #f1e4db;
+}
+.gra-footnote-section-title:first-child { margin-top: 2px; }
+.gra-footnote-section-own { color: #7a6a60; }
+/* Repeated on the card, for when the heading has scrolled out of view. */
+.gra-footnote-source {
+  font-family: var(--font-deva);
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
+  color: #b5451b; opacity: 0.85; margin-bottom: 2px;
+}
+/* The annotation count badge was removed (it was clipped by the round
+   toggle's own overflow). This keeps it hidden for anyone still served a
+   cached copy of the old gadget. */
+#gra-toggle-badge { display: 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;
+}
+@keyframes gid-target-flash {
+%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }
+%    { background: transparent; box-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gid-target { animation: none; background: rgba(181,69,27,0.14); }
+}
+/* ── BOOKMARK CITATION ──────────────────────────────────────────────
+   The reference a bookmark produces, shown on its card and copyable in
+   one click. Set small and in the UI face deliberately: it is apparatus
+   for the reader to take away, not part of the text. */
+.gra-bookmark-cite {
+  margin-top: 6px;
+  /* --font-translit, not --font-indic. The reference is romanised - IAST
+     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 {
+  color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;
+  overflow-wrap: anywhere;          /* only the URL may break mid-token */
+}
+.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; }
+/* Where the bookmark sits in the text. A caption, not part of the
+   citation - so it is set in the UI face and kept visually apart from
+   the reference below it. */
+.gra-bookmark-locator {
+  margin-top: 5px;
+  font-family: var(--font-ui);
+  font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);
+  font-weight: 600;
+  letter-spacing: .02em;
+  color: #8a7a70;
+}
+.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.gra-cite-copy {
+  margin-top: 6px; padding: 3px 10px;
+  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; }