/* Copyright (c) Pawan Nayar · LLOS.ai · 2026 — Original pedagogy and tool design by Pawan Nayar — all rights reserved. */
/* inherits: LLOS_Final/inner-growth/gita/v2/gita-v2.css — every value here is a token from
assets/shell/tokens.css or a number measured off the live page. Not one raw hex, not one raw font size. */
/*
[2026-09-18] THE ELEGANCE PASS, before launch. Pawan walked the three pages on a phone and named
ten things. Every one was measured at 390 before it was touched, and the measurement is quoted
beside the fix so nobody has to take my word for it later.
He also said these are GLOBAL inputs, not Gita fixes. What is general has been written as a rule
under its own heading, so it can be lifted to other pages without re-deriving it.
*/
/* ═══ 1 · ONE SEPARATOR, ONE ROW, AND IT SCROLLS ═══════════════════════════════════════════════
Pawan: "browse sequence is - or / very confusing we should have only one convention global
convention and as discussed never in 2 rows" · "if long we have ... tap/hover ensures it scrolls
and ideally you have language switcher there so we dont have wasted row space".
MEASURED at 390 on ch.html: the crumb row was 43px tall - it WRAPPED - and it carried BOTH marks:
slashes from the component and a middle dot inside the last crumb's own text ("Chapter 1 · Arjuna
Vishada Yoga"). Two marks doing one job in one line.
THE CONVENTION IS THE SLASH, because that is what the gold component uses:
design/textstock/TextStock.html:1217 /. The dot was the intruder and it
is removed at the source (ch.html writes the crumb). Nothing here changes the mark.
THE RULE, general to any page with a breadcrumb: a browse sequence is ONE row. If it does not fit
it scrolls sideways inside its own box - it never wraps, and it never pushes what sits beside it
onto a second line. Whatever shares the row (a language pair, a count) is pinned and does not
shrink. */
.gitach .crumb-row, .gitav .crumb-row, .gitacon .crumb-row{
display:flex; align-items:center; gap:var(--space-3);
flex-wrap:nowrap; /* it was wrapping - that is the 43px */
min-width:0;
}
.gitach .crumb-row > .crumb, .gitav .crumb-row > .crumb, .gitacon .crumb-row > .crumb{
flex:1 1 auto; min-width:0;
white-space:nowrap;
overflow-x:auto; overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; -ms-overflow-style:none;
}
.gitach .crumb-row > .crumb::-webkit-scrollbar,
.gitav .crumb-row > .crumb::-webkit-scrollbar,
.gitacon .crumb-row > .crumb::-webkit-scrollbar{ display:none }
/* the language pair keeps its size while the crumb gives way - it is the thing you came to press */
.gitach #gpLangPick, .gitav #gpLangPick, .gitacon #gpLangPick{ flex:0 0 auto }
/* ═══ 2 · A TOUCH IS NOT A HOVER, AND IT IS NEVER A TEXT SELECTION ════════════════════════════
Pawan: "in mobile when i expand a card i see this effect unnecessary selection" · "in mobile when
you hover on a card it doesnt look good nor selected nor clear the effect is not clear".
MEASURED: the verse card's summary carried the BROWSER DEFAULT tap flash,
-webkit-tap-highlight-color: rgba(51,181,229,0.4) - a blue wash nobody chose, in a colour that is
in no token file - and user-select:auto, so tapping to expand also selected the words under the
finger.
THE RULE, general: anything a finger presses declares its own pressed state and turns off both the
browser's flash and text selection on its label. A pressed state on touch must be the SAME
treatment as hover on a mouse, because a phone has no other way to say "this one". */
.gitach a, .gitach button, .gitach summary, .gitach .task,
.gitav a, .gitav button, .gitav summary,
.gitacon a, .gitacon button,
.gitahub a, .gitahub button, .gitahub .chapter-card{
-webkit-tap-highlight-color:transparent;
}
.gitach summary, .gitav summary{
-webkit-user-select:none; user-select:none; /* the label is a control, not a paragraph */
}
.gitach summary *, .gitav summary *{ -webkit-user-select:none; user-select:none }
@media (hover:none){
/* hover does not exist here; :active is the only honest signal, so it has to be unmistakable */
.gitach .task > summary:active,
.gitahub .chapter-card:active,
.gitav .chip:active{
background:var(--accent-soft);
border-color:var(--primary);
}
.gitach .task > summary:active{ border-radius:inherit }
/* and the hover rules stop firing, because on a phone they stick after the finger lifts */
.gitahub .chapter-card:hover{ transform:none }
}
/* ═══ 3 · A CARD ENDS ON THE RAIL ═════════════════════════════════════════════════════════════
Pawan: "a selected card seems cut on sides".
MEASURED at 390 on ch.html: the rail's text edge is at x=24. The verse card sat at x=11 and ran
368px wide, because details.task carries margin-inline:-13px (ch.html:234) to bleed past the rail.
A card wider than the words inside it reads as cut, not as full-bleed - and the first thing the
eye checks on a card is whether its edges line up with the text above it.
THE RULE, general: a card sits ON the rail or it bleeds to the WINDOW edge. Thirteen pixels past
the rail is neither, and it is the one that looks broken. */
@media(max-width:639px){
.gitach .verses > details.task{ margin-inline:0 }
.gitach .verses > details.task > summary{ padding-inline:var(--space-3) }
}
/* ═══ 4 · THE CHAPTER CARD ON A PHONE ═════════════════════════════════════════════════════════
Pawan: "why do i have this where neither image could be understood nor text and looks so odd in
2 column on small mobile".
MEASURED at 390: card 166x257. Inside it a 140x76 slice of a WIDE painting - a 640x349 banner at
140px across, which is a smear - with a 44px glyph badge sitting ON TOP of that same picture, then
a label ellipsised to "CH 1 · 6 0...", then a title over two lines, then Devanagari, then a 44px
button. Six things in 166 pixels.
TWO COLUMNS STAY. feedback_mobile_never_one_col_mixed_grid is explicit - "mobile never spans full
width = never 1-wide" - so the fix is not fewer columns, it is fewer things per column.
THE BANNER GOES and the GLYPH GROWS. The glyph was drawn to carry a chapter at badge size; the
painting was composed for a 1200px band and cannot survive 140. Keeping both meant neither read.
One picture per card, and it is the one that works at this size.
THE RULE, general: when a card narrows, drop the element that was composed for a wider frame
before shrinking the element that was composed for this one. */
@media(max-width:639px){
.gitahub .chapter-card .ch-thumb{ display:none }
.gitahub .chapter-card > .ch-shape{
position:static; width:56px; height:56px; margin:0 0 var(--space-2);
border-radius:14px;
}
/* MEASURED at 360, and the first attempt here was wrong: shrinking the label was not the fix.
The card is 151 wide with 12px of its own padding, and .chapter-info adds ANOTHER 12px inside
that - 48px of gutter on a 151px card, a third of it - which left the label 101px for a line
that needs 123. ALL EIGHTEEN were ellipsised at 360, not just the two-digit ones.
The inner padding goes; the card's own padding is the gutter. */
.gitahub .chapter-card .chapter-info{ padding-inline:0 }
.gitahub .chapter-card .ch-badge{ letter-spacing:.04em; font-size:var(--fs-micro) }
/* the title gets two lines and no more - a third line is what pushed the cards to 257px */
.gitahub .chapter-card .chapter-info h4{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; line-height:1.25;
}
.gitahub .chapter-card .ch-sans{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
}
/* ═══ 5 · BUTTONS ARE ROUNDED RECTANGLES, AND THEY ARE ONLY AS TALL AS THEY NEED TO BE ════════
Pawan: "see cards button shadows in mobile are we making too circish buttons when we had rectangle
with rounded corners and the light color in mobile seldom registers the height of button looks
bigger than need".
MEASURED: the card's play button is 44x44 with a 12px radius - at that size a 12px radius on a
square reads as a circle - in accent-soft, which against a cream card is nearly nothing.
44px is the touch minimum and it is NOT negotiable, so the box keeps its 44px of TARGET while the
painted part is shorter and wider: a 64x36 rounded rectangle centred in a 44px tall tap area. The
target does not shrink; only the thing the eye reads does.
THE RULE, general: keep the 44px target, shrink the paint. A control that looks big because it
must be easy to hit is a drawing problem, not an accessibility one. */
@media(max-width:639px){
.gitahub .chapter-actions .act-btn{
width:64px; height:36px; border-radius:10px;
border:1px solid var(--primary);
background:var(--accent-soft); color:var(--primary-deep);
box-shadow:none; /* the shadow under a light chip is what read as smudge */
display:inline-flex; align-items:center; justify-content:center;
position:relative;
}
/* the 44px target, restored around the smaller paint */
.gitahub .chapter-actions .act-btn::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%);
}
}
/* ═══ 6 · THE CHAPTER PAGER STARTS WHERE THE WORDS START ══════════════════════════════════════
Pawan: "this chapter carousel button should be left aligned with left rail".
MEASURED at 390 on ch.html chapter 1: the rail is at x=24, the NEXT CHAPTER pill began at x=188.
Chapter 1 has no previous chapter, so the pair collapsed to one item and the one item kept the
right-hand half it would have had in a pair.
THE RULE, general: a two-item pager that loses one item does not leave the gap where the missing
one was. What remains starts on the rail.
MEASURED AGAIN after the first attempt failed: .chnav is display:grid with two fixed tracks
(165px 165px at 390), so justify-content did nothing - the lone link was simply sitting in the
SECOND track, where "previous" would have been. A grid does not collapse its tracks because one
is empty.
MEASURED A THIRD TIME: the link was not :only-child either. The pager always renders an empty
as its first child to hold the "previous" track, so on chapter 1 the grid had two
children and the anchor sat in track two. An empty placeholder that reserves space is exactly the
gap the rule above says not to leave. The real fix went into the BUILDER (ch.html chCard returns
nothing for an out-of-range chapter); the rule below is the belt to that pair of braces. */
.gitach .chnav > span:empty{ display:none }
@media(max-width:639px){
.gitach .chnav > a{ margin-inline:0 }
}
/* ═══ 7 · THE SHORT NAME ON A PHONE, THE REAL NAME ON A SCREEN ════════════════════════════════
Pawan: "isnt browse sequence Gita - Chapter 1 - Verse 1 shortest or do you really want to give
names in mobile, shouldnt all be same size font and clickable where needed, in desktop/tab give
full name".
MEASURED on all three pages at 390 and 1440: the font size was ALREADY identical everywhere,
12.16px, on every crumb of every page. What differs is the WEIGHT - 600 on a link, 400 on the page
you are already on - and that is the only thing telling you which ones you can press, so it stays.
WHAT WAS ACTUALLY WRONG: on the chapter page the chapter's NAME was a second crumb of its own,
sitting after "Chapter 1" and clickable on neither. One level of the sequence, two boxes.
Now each LEVEL carries both labels and the width picks one. No script decides it, so turning the
phone or dragging the window is always right.
THE RULE, general: a breadcrumb level is one box with two labels, not two boxes. The short label is
what the level IS ("Chapter 2"); the full label is what it is CALLED ("Sankhya Yoga"). A phone gets
the first, a screen with room gets the second. Every level except the last one is a link. */
.gitach .crumb .c-full, .gitav .crumb .c-full, .gitacon .crumb .c-full{ display:none }
.gitach .crumb .c-short, .gitav .crumb .c-short, .gitacon .crumb .c-short{ display:inline }
@media(min-width:640px){
.gitach .crumb .c-full, .gitav .crumb .c-full, .gitacon .crumb .c-full{ display:inline }
.gitach .crumb .c-short, .gitav .crumb .c-short, .gitacon .crumb .c-short{ display:none }
}
/* ═══ 8 · DEVANAGARI LEADING FALLS AS THE TYPE GROWS ══════════════════════════════════════════
Pawan, on a verse card at 1440: "isn line space between hindi/sanskrit lines in higher side in
the card".
MEASURED on ch 5 verse 1, both widths:
.vsans (Sanskrit) 22px / 38.5px = 1.75 at 1440 · 18px / 29.7 = 1.65 at 390
.vtrans (transliteration) 14px / 23.8 = 1.70 at 1440
.vtr (the translation) 17px / 26.35 = 1.55 at 1440
So the two loosest lines on the card were the two he was looking at, and the paragraph UNDER them
was already tighter than either - which is why the block read as airy in the middle and settled at
the bottom.
WHY IT WAS SET HIGH, and why that was still wrong: Devanagari genuinely needs more leading than
Latin, because the matras hang above and below the shirorekha and two stacked lines can collide.
But that need is ABSOLUTE, not proportional - it is a fixed number of pixels of clearance, so the
RATIO has to fall as the type grows. 1.75 is a sensible ratio for 13px Devanagari. At 22px it is
the same rule applied where it no longer belongs, and it buys 8px of empty band per line.
1.5 at 22px still leaves 11px of clearance between lines - more absolute room than 1.75 gave at
13px - so nothing collides and the verse reads as one block instead of three separate lines.
THE RULE, general: for Devanagari, set the leading from the clearance the matras need in PIXELS,
then express it as a ratio for that size. Display type takes a smaller ratio than body type. A
single ratio applied at every size is the mistake, and it always shows up at the largest one.
AND THE FLOOR IS MEASURABLE, so it was measured rather than guessed. The INK box of a Devanagari
line - the real painted height, matras and all - is a fixed 1.28-1.32em in Noto Sans Devanagari,
whatever the leading is. So the absolute floor for line-height is ~1.32; anything less and the
lines touch. Checked two ways and they agreed exactly: a synthetic worst-case string of the
tallest stacks this script can make (कैं द्रौ र्क्ष्णै ङ्क्षौ ञ्ज्ञौं) measured 23px at 18px type
and 29px at 22px - and a sweep of ALL EIGHTEEN chapters with every card open, both widths, found
the same 23 and 29. The real text already contains the worst case.
At 1.5 that leaves 4px of clearance at 1440 and 5.4px at 390. Positive everywhere, nothing
touches, and the ratio is still well above the 1.32 floor.
AND THE SELECTOR HAD TO MATCH THEIRS: the open card sets its own size AND leading at
gita-v2.css:624 (.gitach details.task[open] .vsans), which outranks a plain .task .vsans - so the
first attempt here moved the transliteration and left the Sanskrit exactly where it was. */
.gitach details.task[open] .vsans,
.gitach .task .vsans{ line-height:1.5 }
.gitach .task .vtrans{ line-height:1.55 }
@media(max-width:639px){
/* smaller type, so the ratio comes back up - same clearance in pixels, different size */
.gitach details.task[open] .vsans,
.gitach .task .vsans{ line-height:1.58 }
}
/* ═══ 9 · THE LAUNCH AUDIT — four things a Playwright pass found that nobody had reported ════
Pawan: "can you do a playwright now to feel these record more issues and lets knock them off ...
we are getting ready to launch". Every number below came off the live page at 390.
9a · THE PAGER LABEL WAS CUT ON EVERY CHAPTER. MEASURED: the .k line has a 105px box and
"← Previous chapter" needs 138 - 33px over, on all eighteen, in both directions. The arrow already
says which way it goes, so on a phone the word does the rest of the work and the noun goes. */
@media(max-width:639px){
.gitach .chnav .k{ white-space:nowrap }
.gitach .chnav a:not(.nx) .k{ font-size:var(--fs-micro) }
.gitach .chnav .k .word-chapter{ display:none }
}
/* 9b · THE CHAPTER KICKER WAS CUT BY 118px. MEASURED on chapter 4: the box is 249px and
"Chapter 4 · The Yoga of Knowledge and Renunciation of Action" needs 367. The chapter's name is
already the H1 directly underneath it, so on a phone the kicker says which chapter and stops -
the same short/full split the breadcrumb uses, for the same reason. */
.gitach .ch-kicker .k-full{ display:none }
@media(min-width:640px){
.gitach .ch-kicker .k-full{ display:inline }
}
/* 9c · THE LANGUAGE BUTTONS WERE 39x24 AND 33x24. MEASURED in the crumb row on every chapter page -
a 24px target where the floor is 44. This is the one control on the page a reader presses to change
the entire page, and it was the smallest thing on it.
Same treatment as the card's play button: the PAINT stays small so the row stays quiet, and the
TARGET is restored to 44 with an invisible overlay. Nothing on screen grows. */
.gitach #gpLangPick .lang-btn, .gitav #gpLangPick .lang-btn, .gitacon #gpLangPick .lang-btn,
.gitach #gpLangPick button, .gitav #gpLangPick button, .gitacon #gpLangPick button{
position:relative;
}
.gitach #gpLangPick .lang-btn::after, .gitav #gpLangPick .lang-btn::after, .gitacon #gpLangPick .lang-btn::after,
.gitach #gpLangPick button::after, .gitav #gpLangPick button::after, .gitacon #gpLangPick button::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:44px; min-width:44px; transform:translateY(-50%);
}
/* 9d · A ROW THAT SCROLLS SIDEWAYS SAID NOTHING ABOUT IT. MEASURED: .people holds 54 faces in a
342px window and gives no sign there are more. A reader stops at the fifth face and assumes that
is everyone.
The fade on the trailing edge is the hint - it is what a scrollable row looks like when it has more
to give, and it disappears on its own at the end because the mask is tied to the scroll position.
THE RULE, general: a row that scrolls must show that it scrolls, without a scrollbar and without
telling anyone in words. */
.gitahub .people, .gitach .people{
-webkit-mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
mask-image:linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
}
@media(min-width:1024px){
/* on a wide screen the row usually fits, and a fade over nothing is just a dimmed last face */
.gitahub .people, .gitach .people{ -webkit-mask-image:none; mask-image:none }
}
/* 9e · THE BREADCRUMB LINKS WERE 15px TALL. MEASURED on every verse page at 390: "Gita" is a 24x15
target and the chapter link 58x15. Fifteen pixels fails even the 24px floor, never mind 44 - and
these are the only way back up the page.
The row must stay quiet, so the same treatment again: the type does not move, an invisible overlay
carries the target. The overlay is inset horizontally by a hair so two neighbouring crumbs cannot
overlap each other's tap area - a link that steals its neighbour's edge is worse than a small one. */
.gitach .crumb a, .gitav .crumb a, .gitacon .crumb a{ position:relative }
.gitach .crumb a::after, .gitav .crumb a::after, .gitacon .crumb a::after{
content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%);
}
/* 9f · THE SANSKRIT PREVIEW STOPPED MID-SYLLABLE WITH NOTHING TO SAY SO. MEASURED on a collapsed
card, chapter 7: .vsans-line is white-space:nowrap with overflow:hidden and NO text-overflow, so
the line is cut dead - 238px shown of 417 at 390 (179px gone), and 229 of 447 at 1440 (218 gone).
Cutting a preview is right. Cutting it silently is not: Devanagari has no word-space at the cut,
so it reads as a corrupted verse rather than as a line that continues.
THE RULE, general: if a line is cut, the cut has to be visible. A reader can trust a line ending in
an ellipsis; a line that just stops looks like broken data. */
.gitach .vsans-line{ text-overflow:ellipsis }
/* ═══ 10 · CONTRAST — MEASURED THREE TIMES, BECAUSE THE FIRST TWO MEASUREMENTS WERE WRONG ═════
Pawan: "fix all".
MY FIRST REPORT TO HIM WAS WRONG and is corrected here for the record. I said the footer muted
text was 2.09:1 and the consent bar 1.84:1. Both are FINE: they sit on a DARK footer, and I had
compared them against the cream page background. My second attempt stopped the walk at the first
non-transparent background - often rgba(255,255,255,.06) over a dark parent - so it compared
against a colour nothing ever paints. The third probe composites every translucent layer down to
the canvas, which is what an eye actually receives.
WHAT IS ACTUALLY BELOW THE FLOOR, measured at 390 across all four pages. None of it is the footer:
#ea7a27 (--primary) on white 2.87 and white ON #ea7a27 2.87
#c2611c (--primary-deep) on white 4.18 · on cream 4.08 · on accent-soft 3.72
rgb(138,131,120) crumb on cream 3.66
The floor is 4.5 for body text and 3.0 for large text. Every one of these is 11-14px, so 4.5 is
the number that applies. --primary-deep was BUILT to be the readable amber and it still misses,
because it was checked on white and then used on cream and on accent-soft, which are darker.
THE FIX IS THE SAME HUE, WALKED DOWN UNTIL IT CLEARS - not a different colour, and not a bigger
font. Computed, not chosen:
--primary-deep #c2611c -> #ac5619 4.56 on accent-soft · 5.00 on cream · 5.12 on white
the crumb muted #8a8378 -> #7a746a 4.52 on cream · 4.63 on white
Both are the darkest point on their own hue that clears 4.5 on the WORST ground they ever sit on.
AND IT IS SCOPED TO THESE FOUR PAGES ON PURPOSE. --primary-deep is a token in
assets/shell/tokens.css and moving it there would repaint every page on the site. CLAUDE.md:
count the consumers before changing a shared token. This overrides it inside the Gita bodies only;
the token-level decision is Pawan's, and the numbers above are what he needs to make it. */
.gitahub, .gitach, .gitav, .gitacon{
--primary-deep:#ac5619;
--soft:#7a746a;
/* the crumb LINK reads --muted, not --soft - #8a8378 on cream is 3.66. The link is the only way
back up the page, so it is the last thing that should be hard to read. Same hue, walked down. */
--muted:#7a746a;
}
/* White on the amber fill was 2.87. The fill darkens for the one control we own; the same fault on
the shell's Search, Subscribe and Accept buttons is the shell's to fix.
The button is NOT inside #gpLangPick - gita-v2.css:550 styles it as a plain .gitahub .lang-btn -
which is why the first selector here missed it entirely. And it has to outrank a sheet that does
not exist at load time: gita-player.js mounts the language pair at runtime and injects its own
styles after every linked file, so an equal-weight selector loses on order. body. in front wins. */
body.gitahub .lang-btn.is-on, body.gitach .lang-btn.is-on,
body.gitav .lang-btn.is-on, body.gitacon .lang-btn.is-on{
background:#bc5b12; border-color:#bc5b12; /* white on this = 4.52 */
}
/* 10a · THE LAST TWO ON THE HUB, both using the raw brand amber at 14px.
MEASURED: the search submit is white on #ea7a27 = 2.87, and .s-go ("Read →") is #ea7a27 on white
= 2.87. --primary is the FILL colour of the brand and it is fine as a fill behind large type or an
icon; it is not a text colour at 14px on white, in either direction.
The link takes the readable amber (--primary-deep, now #ac5619 = 5.12 on white) and the button
takes the darker fill (#bc5b12, white on it = 4.52). The brand is not changed - only the two
places where it was being asked to carry small text. */
.gitahub .bigsearch button[type="submit"], .gitahub form button[type="submit"]{
background:#bc5b12; border-color:#bc5b12;
}
.gitahub .s-go, .gitav .s-go, .gitach .s-go, .gitacon .s-go{
color:var(--primary-deep);
}