:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) {
  --background: hsl(44.00 42.86% 93.14%);
  --foreground: hsl(28.57 16.54% 24.90%);
  --card: hsl(42.00 100.00% 98.04%);
  --card-foreground: hsl(28.57 16.54% 24.90%);
  --popover: hsl(42.00 100.00% 98.04%);
  --popover-foreground: hsl(28.57 16.54% 24.90%);
  --primary: hsl(30.00 38.00% 48.63%);  /* +4% saturation */
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(40.65 38.00% 82.55%);  /* +3% saturation */
  --secondary-foreground: hsl(28.97 18.71% 30.39%);
  --muted: hsl(39 34.48% 88.63%);
  --muted-foreground: hsl(32.31 20.00% 36%);
  --accent: hsl(42.86 36.00% 74.90%);  /* +3% saturation */
  --wact: hsl(14 68% 38%);  /* the word being chanted */
  --accent-foreground: hsl(28.57 16.54% 24.90%);
  --destructive: hsl(9.84 58.00% 45.88%);  /* +3% saturation */
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(40.00 34.00% 79.41%);  /* +3% saturation */
  --input: hsl(40.00 34.00% 79.41%);
  --ring: hsl(30.00 38.00% 48.63%);
  --chart-1: hsl(30.00 38.00% 48.63%);
  --chart-2: hsl(31.38 33.00% 42.55%);  /* +3% saturation */
  --chart-3: hsl(33.68 36.00% 33.92%);  /* +3% saturation */
  --chart-4: hsl(29.12 34.00% 56.86%);  /* +3% saturation */
  --chart-5: hsl(30 37.00% 62.75%);  /* +3% saturation */
  --sidebar: hsl(39 34.48% 88.63%);
  --sidebar-foreground: hsl(28.57 16.54% 24.90%);
  --sidebar-primary: hsl(30.00 38.00% 48.63%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(42.86 36.00% 74.90%);
  --sidebar-accent-foreground: hsl(28.57 16.54% 24.90%);
  --sidebar-border: hsl(40.00 34.00% 79.41%);
  --sidebar-ring: hsl(30.00 38.00% 48.63%);
  --shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
  --shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
  --shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
  --shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
  --shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12);
  --shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12);
  --shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12);
  --shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30);
}

html:not(.dark) .text-gray-500.dark\:text-gray-200 {
  color: var(--muted-foreground);
}

/* The browser draws its own controls (date and time pickers, select arrows, checkboxes, scrollbars) for the colour scheme it is told:
   without this they stay dark on the dark theme */
html { color-scheme: light; }
/* same-origin full navigations crossfade instead of flashing (an htmx swap is no navigation, so it is untouched); theme.js sets the mode on <html>
   in <head> before first paint, so a dark page never fades in from white */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
html.dark { color-scheme: dark; }

.dark:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) {
  --background: hsl(25.00 15.38% 15.29%);
  --foreground: hsl(39 34.48% 88.63%);
  --card: hsl(25.71 13.73% 20%);
  --card-foreground: hsl(39 34.48% 88.63%);
  --popover: hsl(25.71 13.73% 20%);
  --popover-foreground: hsl(39 34.48% 88.63%);
  --primary: hsl(30 37.00% 62.75%);  /* +3% saturation */
  --primary-foreground: hsl(25.00 15.38% 15.29%);
  --secondary: hsl(24.71 15.00% 25.69%);  /* +2% saturation */
  --secondary-foreground: hsl(39 34.48% 88.63%);
  --muted: hsl(25.71 13.73% 20%);
  --muted-foreground: hsl(38.40 20.00% 72.35%);  /* +2% saturation */
  --accent: hsl(24.44 20.00% 29.61%);  /* +2% saturation */
  --wact: hsl(30 72% 68%);  /* the word being chanted */
  --accent-foreground: hsl(39 34.48% 88.63%);
  --destructive: hsl(9.84 58.00% 45.88%);  /* +3% saturation */
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(24.71 15.00% 25.69%);
  --input: hsl(24.71 15.00% 25.69%);
  --ring: hsl(30 37.00% 62.75%);
  --chart-1: hsl(30 37.00% 62.75%);
  --chart-2: hsl(29.12 34.00% 56.86%);  /* +3% saturation */
  --chart-3: hsl(30.00 37.00% 48.63%);  /* +3% saturation */
  --chart-4: hsl(31.38 33.00% 42.55%);  /* +3% saturation */
  --chart-5: hsl(33.68 36.00% 33.92%);  /* +3% saturation */
  --sidebar: hsl(25.00 15.38% 15.29%);
  --sidebar-foreground: hsl(39 34.48% 88.63%);
  --sidebar-primary: hsl(30 37.00% 62.75%);
  --sidebar-primary-foreground: hsl(25.00 15.38% 15.29%);
  --sidebar-accent: hsl(24.44 20.00% 29.61%);
  --sidebar-accent-foreground: hsl(39 34.48% 88.63%);
  --sidebar-border: hsl(24.71 15.00% 25.69%);
  --sidebar-ring: hsl(30 37.00% 62.75%);
  --shadow-2xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
  --shadow-xs: 2px 3px 5px 0px hsl(28 13% 20% / 0.06);
  --shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
  --shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12);
  --shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12);
  --shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12);
  --shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12);
  --shadow-2xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.30);
}


/* the sheet: fine tooth, a low cloud and a few long fibres, inlined so it versions with this file */
:root { --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cfilter id='tooth'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cfilter id='cloud'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .018' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 1.6 -.7'/%3E%3C/filter%3E%3Cfilter id='fibre'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .18' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .22 0 0 0 2.4 -1.35'/%3E%3C/filter%3E%3Crect width='360' height='360' fill='#8b7355' opacity='.13' filter='url(#tooth)'/%3E%3Crect width='360' height='360' opacity='.10' filter='url(#cloud)'/%3E%3Crect width='360' height='360' opacity='.07' filter='url(#fibre)'/%3E%3C/svg%3E"); }

:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) body {
  background-color: var(--background);
  background-image: var(--paper);
  font-family: 'Literata', 'Tiro Devanagari Sanskrit', 'Noto Serif Tamil', var(--font-serif), serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) :is(.bg-background, .uk-card, .uk-modal-dialog, .uk-dropdown) {
  background-image: var(--paper);
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-card {
  border-radius: 2px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 6%, transparent);
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:not(.uk-btn-icon) {
  font-family: 'Literata', 'Tiro Devanagari Sanskrit', 'Noto Serif Tamil', var(--font-serif), serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .015em;
  border-radius: 2px 5px 3px 4px;
  box-shadow: none;
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:where(:not(.uk-btn-icon):not(.uk-btn-link):not(.uk-btn-ghost)) {
  background: var(--paper) var(--card);
  color: var(--foreground);
  border: 1px solid color-mix(in srgb, var(--foreground) 45%, transparent);
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-primary:not(.uk-btn-icon) {
  color: var(--primary);
  border-color: currentColor;
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:hover { background-color: var(--accent); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) #trans-btn {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) #trans-btn:hover { background-color: var(--accent); color: var(--accent-foreground); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary:hover,
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary.selected { background-color: var(--accent); color: var(--accent-foreground); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:active { transform: translateY(1px); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.selected { background-color: var(--accent); border-color: var(--primary); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-input, .uk-select, .uk-textarea) {
  font-family: 'Literata', var(--font-serif), serif;
  background: var(--paper) var(--card);
  border-radius: 1px;
  box-shadow: none;
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 3px;
}
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism { --neo-border-width: 1px; --neo-thick-border-width: 1px; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-card, .uk-input, .uk-select, .uk-textarea, .uk-btn) { border-width: 1px; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(h1, h2, h3) { font-family: 'Literata', 'Tiro Devanagari Sanskrit', 'Noto Serif Tamil', var(--font-serif), serif; font-weight: 400; letter-spacing: 0; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .devanagari { font-family: 'Literata', 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .lyrics-line > .line { font-weight: 500; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .lyrics-line.active > .line,
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .lyrics-line.active .line .wd.wact { font-weight: 600; }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .tamil { font-family: 'Literata', 'Noto Serif Tamil', 'Noto Sans Tamil', serif; }
/* tailwind v4 knows no `muted` colour, so `border-muted` fell back to the text colour: a near-black rule under the navbar */
.uk-theme-default [class*="border-muted"] { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
:is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .text-gray-500.dark\:text-gray-200 { color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) {
  :is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn { transition: none; }
  :is(.uk-theme-default, .uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:active { transform: none; }
}

/* Ink: lamp-black on laid paper. The page is the sheet — grain, cloud and a soft falloff to the edges, no boxes on it — and the
   text is ink that has sunk in: a warm near-black with a hair of bleed, and cinnabar red, the scribe's rubric, for the line being
   chanted. Dark is the same sheet by lamplight. Controls are small capitals in the text face, like a printed book's running heads. */
:is(.uk-theme-ink, .uk-theme-eink) {
  --background: hsl(40 36% 90%); --foreground: hsl(28 32% 11%);
  --card: hsl(40 38% 92%); --card-foreground: hsl(28 32% 11%);
  --popover: hsl(40 38% 92%); --popover-foreground: hsl(28 32% 11%);
  --primary: hsl(28 32% 13%); --primary-foreground: hsl(40 38% 93%);
  --secondary: hsl(38 26% 84%); --secondary-foreground: hsl(28 32% 11%);
  --muted: hsl(38 24% 86%); --muted-foreground: hsl(28 14% 34%);
  --accent: hsl(38 28% 82%); --accent-foreground: hsl(28 32% 11%);
  --border: hsl(30 16% 60%); --input: hsl(30 16% 56%); --ring: hsl(28 32% 20%);
  --wact: hsl(6 64% 36%); --rule: hsl(28 32% 11% / .14); --bleed: 0 0 .7px hsl(28 32% 11% / .45);
  --edge: hsl(28 45% 28% / .16);
}
.dark:is(.uk-theme-ink, .uk-theme-eink) {
  --background: hsl(224 22% 14%); --foreground: hsl(38 30% 87%);
  --card: hsl(224 20% 16%); --card-foreground: hsl(38 30% 87%);
  --popover: hsl(224 20% 16%); --popover-foreground: hsl(38 30% 87%);
  --primary: hsl(38 30% 84%); --primary-foreground: hsl(224 22% 14%);
  --secondary: hsl(224 16% 21%); --secondary-foreground: hsl(38 30% 87%);
  --muted: hsl(224 16% 19%); --muted-foreground: hsl(222 12% 68%);
  --accent: hsl(224 16% 25%); --accent-foreground: hsl(38 30% 92%);
  --border: hsl(222 12% 38%); --input: hsl(222 12% 38%); --ring: hsl(38 30% 84%);
  --wact: hsl(40 92% 74%); --rule: hsl(38 30% 87% / .12); --bleed: none;
  --edge: hsl(226 40% 6% / .55);
}
:is(.uk-theme-ink, .uk-theme-eink) body {
  color: var(--foreground);
  background-image: radial-gradient(ellipse 110% 85% at 50% 35%, transparent 50%, var(--edge) 100%), var(--paper);
  background-attachment: fixed, scroll;
}
/* by night the sheet is a watercolour dusk — indigo, a teal and a violet laid wet into each other, a trace of saffron where the
   lamp is — and no grain, which on a dark ground reads as wood */
.dark:is(.uk-theme-ink, .uk-theme-eink) body {
  background-image: radial-gradient(ellipse 34% 75% at 50% 50%, color-mix(in srgb, var(--background) 82%, transparent) 30%, transparent 100%),
    radial-gradient(ellipse 110% 85% at 50% 35%, transparent 50%, var(--edge) 100%),
    radial-gradient(38% 28% at 50% 0%, hsl(30 50% 45% / .16), transparent 70%),
    radial-gradient(60% 50% at 12% 12%, hsl(236 38% 32% / .55), transparent 70%),
    radial-gradient(50% 45% at 88% 30%, hsl(188 32% 28% / .38), transparent 70%),
    radial-gradient(70% 55% at 65% 100%, hsl(266 26% 28% / .45), transparent 72%);
  background-attachment: fixed;
}
/* the frosted navbar (its bordered wrapper). Not every <nav>: a backdrop-filter makes a stacking context, which trapped the horoscope
   toolbar's ⋯ menu under the cards below it, and put a tinted box behind every in-page mast */
:is(.uk-theme-ink, .uk-theme-eink) [class*="border-muted"]:has(> nav) { background: color-mix(in srgb, var(--background) 80%, transparent); backdrop-filter: blur(10px); }
:is(.uk-theme-ink, .uk-theme-eink) #trans-btn { background: transparent; }
:is(.uk-theme-ink, .uk-theme-eink) ::selection { background: color-mix(in srgb, var(--wact) 20%, transparent); }
:is(.uk-theme-ink, .uk-theme-eink) { scrollbar-color: color-mix(in srgb, var(--foreground) 25%, transparent) transparent; }
:is(.uk-theme-ink, .uk-theme-eink) :is(.lyrics-line .line, h1, h2, h3, h4, .hero-title) { text-shadow: var(--bleed); }
:is(.uk-theme-ink, .uk-theme-eink) .devanagari { font-synthesis: none; }
:is(.uk-theme-ink, .uk-theme-eink) .tamil { font-family: 'Noto Serif Tamil', 'Noto Sans Tamil', serif; }
:is(.uk-theme-ink, .uk-theme-eink) .devanagari .lyrics-line > .line { font-weight: 400; line-height: 1.75; }
:is(.uk-theme-ink, .uk-theme-eink) .devanagari .lyrics-line.active > .line,
:is(.uk-theme-ink, .uk-theme-eink) .devanagari .lyrics-line.active .line .wd.wact { font-weight: 400; }
:is(.uk-theme-ink, .uk-theme-eink) .lyrics-line.active .line .wd.wact { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--wact) 50%, transparent); }

/* the sheet carries no boxes: the navbar and the player sit on the same paper, a hairline apart */
:is(.uk-theme-ink, .uk-theme-eink) :is([class*="border-muted"], .muted-border) { border-color: var(--rule) !important; }
:is(.uk-theme-ink, .uk-theme-eink) .uk-card-body.shadow-md { background: transparent; box-shadow: none; }
:is(.uk-theme-ink, .uk-theme-eink) .uk-card-body.shadow-md:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
:is(.uk-theme-ink, .uk-theme-eink) :is(.bg-secondary, .bg-muted).rounded-md:not(.uk-card-body, .mc-menu) { background: transparent; padding-left: 0; }
:is(.uk-theme-ink, .uk-theme-eink) .mc-menu { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--rule); }
:is(.uk-theme-ink, .uk-theme-eink) .bg-primary.rounded-md { background: var(--wact); color: var(--background); border-radius: 2px; padding: .1rem .45rem; font-size: .75rem; }
:is(.uk-theme-ink, .uk-theme-eink) :is(.bg-background, .uk-card, .uk-modal-dialog, .uk-dropdown, .pref-drop) { background-image: none; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-card { background: transparent; border: 0; box-shadow: none; border-radius: 0; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-card:hover { background: color-mix(in srgb, var(--foreground) 4%, transparent); }
/* a rite's phase is a leaf laid on the sheet: a hairline edge and a shade lighter than the page, nothing more */
:is(.uk-theme-ink, .uk-theme-eink) .phase-section { background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid color-mix(in srgb, var(--foreground) 16%, transparent); border-radius: 0; padding: 1.25rem 1.5rem; }
:is(.uk-theme-ink, .uk-theme-eink) .phase-section[open] { border-color: color-mix(in srgb, var(--foreground) 24%, transparent); }
.dark:is(.uk-theme-ink, .uk-theme-eink) .phase-section { background: color-mix(in srgb, var(--card) 45%, transparent); border-color: color-mix(in srgb, var(--foreground) 12%, transparent); }
.dark:is(.uk-theme-ink, .uk-theme-eink) .phase-section[open] { border-color: color-mix(in srgb, var(--foreground) 20%, transparent); }
:is(.uk-theme-ink, .uk-theme-eink) :is(.uk-modal-dialog, .uk-dropdown, .pref-drop, .mc-menu) { box-shadow: 0 8px 30px hsl(28 30% 20% / .10); border-radius: 0; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-btn, .uk-input, .uk-select, .uk-textarea, .uk-badge),
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:not(.uk-btn-icon) { border-radius: 0; box-shadow: none; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-btn:not(.uk-btn-icon), .uk-badge) {
  font-family: 'Literata', var(--font-serif), serif; font-size: 1rem; font-weight: 600; letter-spacing: .005em;
}
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:where(:not(.uk-btn-icon):not(.uk-btn-link):not(.uk-btn-ghost)) {
  background: transparent; border: 1px solid color-mix(in srgb, var(--foreground) 28%, transparent);
}
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:where(:not(.uk-btn-icon)):hover { background: color-mix(in srgb, var(--foreground) 5%, transparent); filter: none; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn:where(:not(.uk-btn-icon)).selected { background: transparent; border-color: var(--foreground); }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary { background: transparent; color: var(--foreground); border: 1px solid color-mix(in srgb, var(--foreground) 60%, transparent); }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary:hover,
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-icon.uk-btn-primary.selected { background: var(--foreground); color: var(--background); }
:is(.uk-theme-ink, .uk-theme-eink) .step-block .uk-btn.uk-btn-icon.uk-btn-primary { border: 0; width: 1.6rem; height: 1.6rem; min-width: 0; padding: 0; border-radius: 999px; background: var(--wact); color: var(--background);
  font-family: 'Literata', serif; font-variant-numeric: oldstyle-nums; }
:is(.uk-theme-ink, .uk-theme-eink) .step-block .uk-btn.uk-btn-icon.uk-btn-primary:hover { background: var(--wact); color: var(--background); }
/* Classic's highlights carried into ink: the chosen option outlined and inked in the highlight colour — the rubric, or black on e-paper */
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-primary:not(.uk-btn-icon) { color: var(--wact); border: 1px solid var(--wact); background: color-mix(in srgb, var(--wact) 6%, transparent); }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism .uk-btn.uk-btn-ghost:not(.uk-btn-icon) { border-color: transparent; }
:is(.uk-theme-ink, .uk-theme-eink) .uk-badge { background: transparent; color: var(--muted-foreground); border: 0; padding-left: 0; }
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-input, .uk-select, .uk-textarea) {
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--foreground) 35%, transparent);
}
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-input, .uk-select, .uk-textarea):focus { border-bottom: 1px solid var(--foreground); }
/* a focused field in Ink and E-ink: the underline darkens to 2px; never the page's ring around an underline (every form, the sign-in dialog too) */
:is(.uk-theme-ink, .uk-theme-eink) .neo-brutalism :is(.uk-input, .uk-select, .uk-textarea):focus-visible { outline: none; border-bottom-color: var(--foreground);
  box-shadow: 0 1px 0 var(--foreground); }

/* E-ink: Ink's layout on an e-paper tablet — greys only, no grain, no bleed, no colour. The sheet is a faint white-to-grey fall
   like a lit e-paper panel; the chanted line is marked by weight and a bar in the margin, since there is no red to lend it */
.uk-theme-eink {
  --background: hsl(40 6% 93%); --foreground: hsl(0 0% 14%);
  --card: hsl(0 0% 96%); --card-foreground: hsl(0 0% 14%);
  --popover: hsl(0 0% 96%); --popover-foreground: hsl(0 0% 14%);
  --primary: hsl(0 0% 12%); --primary-foreground: hsl(0 0% 96%);
  --secondary: hsl(0 0% 86%); --secondary-foreground: hsl(0 0% 14%);
  --muted: hsl(0 0% 88%); --muted-foreground: hsl(0 0% 36%);
  --accent: hsl(0 0% 84%); --accent-foreground: hsl(0 0% 14%);
  --border: hsl(0 0% 60%); --input: hsl(0 0% 55%); --ring: hsl(0 0% 15%);
  --wact: hsl(0 0% 4%); --rule: hsl(0 0% 0% / .14); --bleed: none; --edge: transparent;
}
.dark.uk-theme-eink {
  --background: hsl(0 0% 11%); --foreground: hsl(0 0% 83%);
  --card: hsl(0 0% 14%); --card-foreground: hsl(0 0% 83%);
  --popover: hsl(0 0% 14%); --popover-foreground: hsl(0 0% 83%);
  --primary: hsl(0 0% 83%); --primary-foreground: hsl(0 0% 11%);
  --secondary: hsl(0 0% 20%); --secondary-foreground: hsl(0 0% 83%);
  --muted: hsl(0 0% 17%); --muted-foreground: hsl(0 0% 64%);
  --accent: hsl(0 0% 24%); --accent-foreground: hsl(0 0% 94%);
  --border: hsl(0 0% 36%); --input: hsl(0 0% 36%); --ring: hsl(0 0% 88%);
  --wact: hsl(0 0% 96%); --rule: hsl(0 0% 100% / .12);
}
/* the reading surface is one flat colour, by day and by night: no fall, no wash, no grain */
.uk-theme-eink body, .dark.uk-theme-eink body { background-image: none; }
.uk-theme-eink .lyrics-line.active { box-shadow: inset 2px 0 0 var(--foreground); padding-left: .75rem; margin-left: -.75rem; }
.uk-theme-eink .lyrics-line.active > .line, .uk-theme-eink .lyrics-line.active .line .wd.wact { font-weight: 700; }
.uk-theme-eink .devanagari .lyrics-line.active > .line, .uk-theme-eink .devanagari .lyrics-line.active .line .wd.wact { font-weight: 400; }
.uk-theme-eink .lyrics-line.active .line .wd.wact { text-decoration-thickness: 2px; text-decoration-color: var(--foreground); }
.uk-theme-eink * { transition: none !important; }

/* the palette menu beside the mode toggle: a swatch per theme, the one in force ticked */
.th-drop { min-width: 12rem; padding: 6px; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--foreground) 10%, transparent); }
.th-drop[popover] { margin: 6px 0 0; }
.th-opt { display: flex; width: 100%; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; font-size: .8125rem; color: var(--foreground); }
.th-opt:hover, .th-opt:focus-visible { background: color-mix(in srgb, var(--foreground) 6%, transparent); }
.th-sw { flex: none; width: 1.6rem; height: 1rem; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
  background: linear-gradient(90deg, var(--sw-p) 0 55%, var(--sw-i) 55% 78%, var(--sw-a) 78%); }
.th-nm { flex: 1; text-align: left; }
.th-ck { visibility: hidden; color: var(--wact); }
.th-opt[aria-checked="true"] .th-ck { visibility: visible; }
.th-opt[aria-checked="true"] .th-nm { font-weight: 600; }

/* The almanac's and the horoscope's tokens (muhurtha.css, jyotisha.css), here because the side pane and the hover card (pane.css) read them
   on every page that has doors, the library reader and the book view included, where neither of those sheets is linked. */
:root {
  --mh-paper: var(--background);
  --mh-paper-2: var(--secondary);
  --mh-ink: var(--foreground);
  --mh-ink-2: var(--muted-foreground);
  --mh-muted: color-mix(in srgb, var(--muted-foreground) 75%, transparent);
  --mh-rule: var(--border);
  --mh-rule-2: var(--input);
  --mh-accent: var(--primary);
  --mh-accent-soft: var(--accent);
  --mh-gold: var(--primary);
  --mh-shukla: var(--card);
  --mh-krishna: var(--muted);
  --mh-serif: 'Libre Baskerville', ui-serif, Georgia, serif;
  --mh-sans: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mh-r: var(--radius, .375rem);
}

:root {
  --neo-shadow-offset: 1px;
  --neo-border-width: 1px;
  --neo-thick-border-width: 3px;
  --neo-radius: 4px;
  --neo-shadow-color: var(--border);
  --neo-border-color: var(--border);
  --neo-background: var(--background);
  --grid-color: rgba(128, 128, 128, 0.1);
  --grid-size: 32px;
  --muted-border-color: var(--ring);
  --font-sans: 'Literata', 'Tiro Devanagari Sanskrit', 'Noto Serif Tamil', 'Libre Baskerville', serif;   /* Oat's body, dialog and popover font */
  --font-serif: Libre Baskerville, Noto Sans Tamil, Noto Serif Telugu, Noto Serif Kannada, Noto Serif Malayalam, Noto Serif Devanagari, serif;
  --font-mono: Fira Code, monospace;
}

.dark{
    --neo-shadow-color: var(--border);
    --grid-color: rgba(255, 255, 255, 0.1);
  }

body {
    font-family: var(--font-serif), serif;
    letter-spacing: var(--tracking-normal);
}

/* Neo-brutalism Theme */
.neo-brutalism {
  /* Buttons: a hairline border in the theme's own tone, no offset shadow — the hard black shadow read as a stray outline
     beside the almanac's hairlines */
  .uk-btn:not(.uk-btn-link):not(.uk-btn-ghost) {
    border: var(--neo-border-width) solid var(--neo-border-color);
    box-shadow: none;
    transition: all 0.2s ease;
    position: relative;
    &:hover { filter: brightness(0.97); }
    &.selected {border-width: var(--neo-border-width);}
  }
  .uk-btn-icon {
    &.selected {border: var(--neo-border-width) solid var(--neo-border-color);}
    border-radius: 100px;
    box-shadow: none !important;
  }
  /* Form inputs */
  .uk-input,.uk-select, .uk-textarea {
    border: var(--neo-border-width) solid var(--neo-border-color);
    background: var(--neo-background);
    -webkit-appearance: none;
    &:focus {border-bottom-width: var(--neo-thick-border-width);}
  }

  /* Headers: plain serif, no box — the dotted outline and shadow fought the almanac's hairline look and the paper background */
  h1, h2 { font-family: 'Libre Baskerville', ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
  /* Links */
  .uk-link,a {text-decoration: none;transition: all 0.2s ease;}
}

#auto-mode-btn,#dark-mode-btn,#light-mode-btn{display: none;}
.auto #auto-mode-btn {display: block !important;}
.dark:not(.auto) #dark-mode-btn {display: block !important;}
.light:not(.auto) #light-mode-btn {display: block !important;}

#sm-font-btn,#lg-font-btn,#xl-font-btn {display: none;}
.uk-font-base #sm-font-btn {display: block !important;}   /* the button shows the size in force; a click steps to the next */
.uk-font-lg #lg-font-btn {display: block !important;}
.uk-font-xl #xl-font-btn {display: block !important;}

.text-danger {color: var(--destructive);}
.muted-border {border-color: var(--muted-border-color) !important;}
@keyframes blink {50% { border-color: transparent; }}
.blink {animation: blink 1.5s step-end infinite;}
@keyframes slide-up {from {opacity:0;transform: translateY(100%);} to {opacity:1;transform: translateY(0);}}
.slide-up {animation: slide-up 0.3s ease-in-out;}
.figma-board {
  position: relative;
  min-height: calc(100vh - 300px);
  background-image: radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-position: 0px 0px;
}
.figma-board::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
  background-size: calc(var(--grid-size) / 4) calc(var(--grid-size) / 4);
  pointer-events: none;
}
.uk-nav > li.uk-active > a {
  --uk-nav-item-bg: var(--accent);
  --uk-nav-item-color: var(--accent-foreground);
}

/* Command: alternate background for even items */
.uk-nav-secondary > li:nth-child(even) > a {background: color-mix(in srgb, var(--muted) 70%, transparent);}
/* Script picker: a native <dialog> laid out like a command palette */
dialog.script-picker { width: min(30rem, calc(100vw - 24px)); max-height: min(82dvh, 36rem); padding: 0; border: 1px solid var(--border); border-radius: 12px;
  background: var(--background); color: var(--foreground); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; }
dialog.script-picker[open] { display: flex; flex-direction: column; }
.script-picker::backdrop { background: rgba(20, 16, 12, .5); backdrop-filter: blur(2px); }
.script-picker > div, .script-picker #trans { padding: 0; margin: 0; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.script-picker-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 0 18px; }
.script-picker-heading h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.script-picker .script-picker-close { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; font-size: 1.3rem; line-height: 1; background: transparent; color: var(--muted-foreground); }
.script-picker .script-picker-close:hover { background: var(--muted); color: var(--foreground); }
.script-picker > header, .script-picker > div:first-child { flex: none; }
.script-picker p.text-sm { margin: 4px 0 0; padding: 0 18px 12px; line-height: 1.45; }
.script-picker input[type=search] { margin: 0; width: 100%; border: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0;
  padding: 12px 18px; background: transparent; font-size: 1rem; box-shadow: none; outline: none; }
.script-picker .script-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.script-picker [data-script-row] { display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.script-picker [data-script-row]:hover { background: var(--muted); }
.script-picker [data-script] { flex: 1; min-width: 0; justify-content: flex-start; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 1rem; }
.script-picker [data-sub] { flex: none; width: 36px; height: 36px; padding: 0; border-radius: 8px; border: 1px solid transparent; color: var(--muted-foreground); }
.script-picker [data-sub]:hover { background: var(--accent); color: var(--foreground); }
.script-picker [data-sub][aria-pressed=true], .script-picker [data-sub].secondary { background: var(--accent); border-color: var(--border); color: var(--foreground); }
/* Sign-in dialog (signin.js): an opaque card in the middle, a sheet from the bottom edge on a phone; its corners are the theme's popovers' (6px in Classic,
   square in Ink and E-ink), its buttons the site's (the submit primary, the providers the outline button), its fields the theme's own */
dialog.signin-dlg { width: min(25rem, calc(100vw - 24px)); max-height: min(92dvh, 46rem); padding: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--background); color: var(--foreground); overflow-y: auto; overscroll-behavior: contain; }
:is(.uk-theme-ink, .uk-theme-eink) dialog.signin-dlg { border-radius: 0; }
.signin-dlg::backdrop { background: rgba(0, 0, 0, .45); }
.signin-dlg .sd-body { padding: 24px; }
.signin-dlg .sd-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 6px; font-size: 1.4rem; line-height: 1;
  background: transparent; color: var(--muted-foreground); cursor: pointer; }
.signin-dlg .sd-x:hover { background: var(--muted); color: var(--foreground); }
#auth-container #signin-ttl { margin: 0 0 1.25rem; padding-right: 2.5rem; outline: none; }
#auth-container .sd-or { margin: 1rem 0 0; color: var(--muted-foreground); }
#auth-container label:has(> .uk-input) { display: flex; flex-direction: column; gap: .375rem; }
/* focus on a field in Classic: the box takes the ring (Ink and E-ink: the theme-wide underline rule) */
#auth-container .uk-input:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }
@media (max-width: 640px) {
  dialog.signin-dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-width: 1px 0 0; border-radius: 6px 6px 0 0; max-height: 92dvh;
    padding-bottom: env(safe-area-inset-bottom); }
  :is(.uk-theme-ink, .uk-theme-eink) dialog.signin-dlg { border-radius: 0; }
}
/* The phone navbar (core/ui.py navbar, nav_sheet, nav.js): the logo, the Script control, Sign in and Menu, each a 44px target; the sheet holds the rest with
   labels, on the page's own paper, whitespace between its groups and no rules; a plain dim backdrop */
.nav-phone { display: none; }
.nav-sheet[popover] { position: fixed; inset: var(--nav-b, 52px) 0 auto 0; width: auto; max-width: none; max-height: calc(100dvh - var(--nav-b, 52px)); margin: 0; overflow-y: auto;
  overscroll-behavior: contain; padding: 4px 8px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: var(--background); color: var(--foreground); }
.nav-sheet:focus { outline: none; }
.nav-sheet::backdrop { background: rgba(0, 0, 0, .3); }
.nav-grp + .nav-grp { margin-top: 10px; }
.nav-grp.nav-end { margin-top: 22px; }
.nav-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 1rem; color: var(--foreground); text-align: left; justify-content: flex-start; cursor: pointer; }
.nav-item svg { flex: none; color: var(--muted-foreground); }
.nav-item:hover, .nav-item:focus-visible, .nav-opt:hover, .nav-opt:focus-visible { background: color-mix(in srgb, var(--foreground) 6%, transparent); }
.nav-out { color: var(--muted-foreground); }
.nav-seg { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; }
.nav-seg-lbl { font-size: 1rem; }
.nav-seg-opts { display: flex; gap: 2px; }
.nav-opt { min-width: 44px; min-height: 44px; padding: 0 9px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: .875rem;
  color: var(--muted-foreground); cursor: pointer; }
.nav-opt[aria-pressed="true"] { color: var(--foreground); font-weight: 600; text-decoration: underline 2px; text-underline-offset: 6px; }
@media (max-width: 640px) {
  .nav-wide { display: none !important; }
  .nav-phone { display: block; }
  .nav-rgt { gap: 0; }
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  nav .pref-btn, .nav-tap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none;
    color: var(--foreground); cursor: pointer; }
  body nav .nav-rgt a.lgn-btn.uk-btn.uk-btn-primary.small, body nav .nav-rgt a.lgn-btn.uk-btn.uk-btn-primary.small:hover { min-height: 44px; height: auto; padding: 0 10px; border: 0; background: none; box-shadow: none; color: var(--foreground); font-size: .9375rem;
    font-weight: 500; display: inline-flex; align-items: center; }
}
/* Small tools on a touch screen: each keeps its look and place, and an invisible box centred on it (40 px, 44 for a label) takes the tap.
   Tools that sat closer than that are spaced apart, so no box covers its neighbour. */
@media (max-width: 640px), (pointer: coarse) {
  :is(.vr-rm, .sec-bkm, .sec-coll, .jhl-pen-b, .jhl-cnt, button.jhl-dot, .mh .btn.mh-step) { position: relative; }
  :is(.vr-rm, .sec-bkm, .sec-coll, .jhl-pen-b, .jhl-cnt, button.jhl-dot, .mh .btn.mh-step)::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 40px); height: max(100%, 40px); transform: translate(-50%, -50%); }
  .mh .btn.mh-step::after { width: max(100%, 44px); height: max(100%, 44px); }
  .mh .btn.mh-step { padding-inline: 16px; }
  :is(.sec-bkm, .sec-coll, .jhl-pen-b, button.jhl-dot.jhl-cur) { margin-inline: 10px; }
  .flex-wrap:has(> .jhl-bar) { row-gap: 20px; }   /* the tools sat 21–24 px apart: spaced so each box is its own */
  input:is([type="radio"], [type="checkbox"]):not([role="switch"]) { width: 1.125rem; height: 1.125rem; }
  label:has(> input:is([type="radio"], [type="checkbox"])) { position: relative; }
  label:has(> input:is([type="radio"], [type="checkbox"]))::after { content: ""; position: absolute; inset: -11px -4px; min-height: 44px; }
}
/* search hits: a long unspaced chapter name breaks inside the column instead of widening it */
#search-results, .search-page { overflow-wrap: anywhere; }
:is(#search-results, .search-page) .search-item > span:first-child { flex: none; white-space: nowrap; overflow-wrap: normal; }   /* the shelf badge stays one word */
/* Command: improve list item copy and flow */
.uk-nav-secondary > li > a {
  font-size: 1rem;
  line-height: 0.85rem;
  margin: 0;
  padding: 0.85rem 1rem;
  letter-spacing: 0.01em;
  border-radius: 0;
  transition: background 0.15s;
}
.uk-cmd-header-esc {display: none !important;}
.uk-nav-secondary > li > a:hover {background: color-mix(in srgb, var(--accent) 18%, transparent);}
.uk-cmd-item-text {padding-left: 0.25em;font-weight: 400;}

.tamil {font-family: Noto Sans Tamil, serif}
.malayalam {font-family: Noto Serif Malayalam, serif}
.telugu {font-family: Noto Serif Telugu, serif}
.kannada {font-family: Noto Serif Kannada, serif}
.devanagari {font-family: Noto Serif Devanagari, serif}
.devanagari .lyrics-line > .line,
[data-lang="Devanagari"] .ritual-page .lyrics-line > .line {font-size: 1.2em; line-height: 1.6;}
.bengali {font-family: Noto Serif Bengali, serif}
.gurmukhi {font-family: Noto Serif Gurmukhi, serif}
.grantha {font-family: Noto Serif Grantha, serif;}

/* The navbar's text size: every size is in rem, so the root carries the step */
html.uk-font-lg {font-size: 112.5%;}
html.uk-font-xl {font-size: 125%;}

.htmx-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: var(--muted-border-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 10;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

/* Custom classes for lyrics lines */
.lyrics-line {
  @apply w-full transition-all;
  font-weight: 400;
}

/* The active line is bold in the chant ink, never a filled box: a box fights Devanagari, whose matras and headline sit inside it.
   The same on every title, with or without word timings, while the reader scrolls or the audio is paused. */
.lyrics-line.active .line{
  font-weight: 800;
  color: var(--wact);
}

/* Word-level sync: colour, not a box — a filled highlight fights Devanagari */
.lyrics-line .wd {
  @apply transition-colors duration-150;
}

.lyrics-line.active .line .wd.wact {
  color: var(--wact);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, var(--wact) 45%, transparent);
}

.lyrics-line.active .line .wd.wsung {
  @apply opacity-45;
}

/* While the audio plays, a word-timed line goes back to body ink and only the chanted word takes the colour */
.lyrics-line.audio-mode.active .line:has(.wd[data-start]) {
  color: inherit;
}

.lyrics-line.audio-mode {
  @apply opacity-50;
}

.lyrics-line.audio-mode.active {
  @apply opacity-100;
}

.lyrics-line.audio-mode.viewed {
  @apply opacity-95;
}

/* Reading mode: per-line play icons appear, and playing one line does not dim the rest */
.reading-play { display: none; }
.reading-mode .reading-play { display: inline-flex; }
.reading-mode .lyrics-line.audio-mode { opacity: 1; }

#reading-btn.on {
  background-color: var(--muted);
  color: var(--foreground);
}

.rd-tgl.selected {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
}

/* Pronunciation transliteration lines under a verse — shown only in reading mode */
.sub-line { display: none; }
.reading-mode .sub-line {
  display: block;
  margin-top: 2px;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--muted-foreground);
}

/* Control bar reading toggle + mode-swapped icons (Meaning/Word-by-word reuse the audio slots) */
.mode-btn.on {
  background-color: var(--muted);
  color: var(--foreground);
}
.reading-only { display: none; }
.audio-controls.reading .audio-only { display: none; }
.audio-controls.reading .reading-only, .rd-tools.reading .reading-only { display: inline-flex; }
/* The reader's and the rite's bar, docked at the foot: the dock spans the window (its margins reach out to the viewport's edges, its padding
   brings the controls back to the column), opaque on the page's plain paper (never the
   body's washes), a hairline above. Not in the side pane, which lays its tools out itself. */
.bar-dock:not(.rp-tools > *) { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--background); background-image: var(--paper); border-top: 1px solid var(--rule, var(--border)); }
.bar-dock:not(.rp-tools > *) :is(#audio-controls, .rd-tools) { background: transparent; backdrop-filter: none; box-shadow: none; border: 0; border-radius: 0; }
/* every control in the bar one height, one weight, one look: no box, a muted fill when on, play and pause in the accent ink */
:is(#audio-controls .bar-row, #rd-tools) > div > :is(button, a) { height: 2rem; min-width: 2rem; border: 1px solid transparent; border-radius: 4px; box-shadow: none;
  background: transparent; color: var(--foreground); font: 500 .875rem/1 'Literata', var(--font-serif), serif; letter-spacing: normal; }
:is(#audio-controls .bar-row, #rd-tools) > div > :is(#trans-btn, .ask-btn) { padding: 0 .625rem; }
:is(#audio-controls .bar-row, #rd-tools) > div > a.ask-btn { display: inline-flex; align-items: center; }
:is(#audio-controls .bar-row, #rd-tools) > div > :is(button, a):hover { background: color-mix(in srgb, var(--foreground) 8%, transparent); }
:is(#audio-controls .bar-row, #rd-tools) > div > :is(.selected, .on) { background: var(--muted); }
#audio-controls .bar-row > div > :is(#play-btn, #pause-btn) { color: var(--primary); }
/* Narrow screens: the audio controls (stop/play, then the right-hand tools) take the bar's first row and the script, Ask and japa controls the second,
   so the bar never outgrows the screen; with no audio controls showing (reading mode, a text without audio) the script, Ask and the toggles share
   one row, wrapping the toggles under them only when they do not fit. Every control is at least 2.5rem to touch. */
@media (max-width: 40rem) {
  .bar-row { flex-wrap: wrap; row-gap: .25rem; }
  .bar-m { order: 1; }
  .bar-r { order: 2; }
  .bar-l { order: 3; flex: 1 0 100%; }
  .audio-controls.reading .bar-l, .bar-row:has(> .bar-m:empty) .bar-l { order: 0; flex: 0 1 auto; }
  .bar-row > div > :is(button, a), #rd-tools > div > :is(button, a) { min-height: 2.5rem; min-width: 2.5rem; }
  /* the bar is chrome: on a phone its controls keep their size whatever the text size, so the reading row stays one row at 360 px */
  #audio-controls .bar-row > div > :is(button, a) { min-height: 40px; min-width: 40px; height: 40px; font-size: 14px; }
  #audio-controls .bar-row > div > :is(#trans-btn, .ask-btn) { padding: 0 10px; }
  #audio-controls .bar-row > div > :is(button, a) svg { width: 16px; height: 16px; }
  .ctls button { white-space: normal; max-width: 100%; height: auto; min-height: 2rem; text-align: left; }   /* a long śākhā name wraps instead of widening the rite page */
}
#reading-meanings.selected, #reading-words.selected { color: var(--foreground); background-color: var(--muted); }

.hide {
  display: none !important;
}

html.dark{
.inout {
  filter: invert(1) hue-rotate(180deg);
}}
.sec-bkm.bkm-on svg { fill: currentColor; }
/* the add-to-collection panel opens inside a section's links row, which rests at 70% opacity; an opacity below 1 would fade the panel and
   trap its z-index under the verses that follow, so the row is opaque while it holds the panel */
div:has(> .sec-tools > .mc-menu) { opacity: 1; }
.mc-menu { width: 14rem; max-width: calc(100vw - 2rem); background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
.mc-menu input { border: 1px solid var(--border); background: var(--background); color: inherit; }
.mc-menu input:focus-visible { outline: 2px solid var(--ring); outline-offset: -1px; }

/* a rite's controls: quiet labels in a column, the choices beside them */
.ctl-lbl { font-size: .625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; flex: none; padding-top: 0.45rem; }
@media (min-width: 640px) { .ctl-lbl { flex: 0 0 7rem; } }   /* the 7rem is a column width beside the choices; stacked on a phone it became a 7rem-tall gap */
details.plain { border: 0; box-shadow: none; background: transparent; padding: 0; margin-left: 0; margin-right: 0; }
details.plain > summary { border: 0; box-shadow: none; background: transparent; padding: 0.25rem 0; }

/* A step's pictures: the figure on a paper-toned frame behind a hairline, the caption beneath. Line drawings are scans on white: multiplied into the paper they lose the white box, and in the dark they invert
   the way `.inout` does. Photographs keep their own tones in both. */
.plate-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin: 0.9rem 0 0.4rem; }
.plate-row .rite-plate { flex: 0 1 13.5rem; }
.rite-plate { margin: 0; min-width: 0; }
.plate-frame { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 0.6rem; overflow: hidden; cursor: zoom-in;
  background: color-mix(in srgb, var(--muted) 35%, transparent); border: 1px solid var(--border); transition: border-color .2s ease, background-color .2s ease; }
.plate-frame:hover, .plate-frame:focus-visible { border-color: color-mix(in srgb, var(--foreground) 35%, transparent); background: color-mix(in srgb, var(--muted) 55%, transparent); }
.plate-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .35s ease; }
.plate-frame:hover .plate-img { transform: scale(1.03); }
.plate-img.line { mix-blend-mode: multiply; }
html.dark .plate-img.line { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.rite-plate figcaption { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.5rem; }
.plate-title { font-size: 0.875rem; font-weight: 600; line-height: 1.3; }
.plate-cap { font-size: 0.8rem; line-height: 1.45; color: var(--muted-foreground); }
.plate-src { font-size: .6875rem; font-style: italic; color: var(--muted-foreground); }
@media (prefers-reduced-motion: reduce) { .plate-img, .plate-frame { transition: none; } .plate-frame:hover .plate-img { transform: none; } }

/* The navbar's Script control and the preference rows it shares with the personal page: paper and hairlines, a rule between rows, no boxes */
.pref-btn .pref-cur { font-size: .75rem; color: var(--muted-foreground); letter-spacing: .02em; font-weight: 400; }
.pref-drop { min-width: 21rem; max-width: 92vw; padding: 12px 14px 10px; background: var(--background); border: 1px solid var(--border);
  border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .08); }
.pref-hd { margin: 0 0 4px; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; }
.pref-rows { display: flex; flex-direction: column; }
.pref-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.pref-row:first-child { border-top: 0; }
.pref-lbl { font-size: .8125rem; }
.pref-why { font-size: .6875rem; color: var(--muted-foreground); }
.pref-sel.uk-select { width: auto; min-width: 9.5rem; }
.pref-subs { flex-direction: column; align-items: stretch; gap: 4px; }
.pref-chips { display: flex; flex-wrap: wrap; gap: 0 12px; }
.pref-chip { background: none; border: 0; padding: 3px 0 1px; font: inherit; font-size: .75rem; color: var(--muted-foreground); border-bottom: 2px solid transparent; cursor: pointer; }
.pref-chip.on { color: var(--foreground); border-bottom-color: var(--primary); }
.pref-chip:hover { color: var(--foreground); }
.pref-more { display: block; margin-top: 8px; font-size: .75rem; color: var(--muted-foreground); }
.mh .names a { cursor: pointer; }

/* concept chips under a jyotiṣa verse: a quiet hairline row, each a link to the concept's primer page */
.jy-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 6px 0 2px; }
.jy-chip { font-size: .7188rem; padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted-foreground); }
.jy-chip:hover { color: var(--primary); border-color: var(--primary); }
.jy-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 2px; }   /* a verse's link to its translation on the shelf */
.jy-pair .jy-row-md { flex: 1 1 100%; font-size: .85rem; }
.jy-pair .jy-tsum { font-size: .7188rem; color: var(--muted-foreground); cursor: pointer; }
.bk-sas { display: flex; gap: 4px 10px; margin: -.6em 0 1em; }   /* on a translation paragraph: the verse it translates */
.bk-sa { font-size: .8rem; color: var(--muted-foreground); }
.bk-sa:hover { color: var(--primary); }
.mh.jy .jy-eng { margin: 4px 0 6px; }
.mh.jy .jy-eng > .jy-tw + .jy-vr { border-top: 0; }
.mh.jy .jy-er .jy-cite { font-size: .75rem; white-space: nowrap; }

/* The English books (vr/books): one serif column about 65 characters wide, hairlines only; page marks sit in the left margin, inline below 900px */
.bk { max-width: 65ch; margin: 0 auto; padding: 1.25rem 1.1rem 5rem; font-family: 'Literata', var(--font-serif), serif; color: var(--foreground); }
.bk a { color: inherit; text-decoration: none; }
.bk-crumb { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted-foreground); }
.bk-crumb:hover, .bk-src a:hover, .bk .pg:hover { color: var(--primary); }
.bk-title { font-size: 1.75rem; line-height: 1.25; margin: 1.1rem 0 .3rem; font-weight: 400; }
.bk-head { font-size: 1.45rem; line-height: 1.3; margin: .25rem 0 .2rem; font-weight: 400; }
.bk-by { font-size: .85rem; color: var(--muted-foreground); margin: 0; font-variant-numeric: oldstyle-nums; }
.bk-desc { margin: .8rem 0 .4rem; line-height: 1.6; }
.bk-src { font-size: .8rem; margin: 0; }
.bk-src a { border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.bk header { padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.bk-num { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
.bk-toc { list-style: none; margin: 0; padding: 0; }
.bk-toc li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--border); }
.bk-toc li:first-child { border-top: 0; }
.bk-toc a:hover .bk-ch { color: var(--primary); }
.bk-toc .bk-num { margin-bottom: .1rem; }
.bk-pp { flex: none; font-size: .78rem; color: var(--muted-foreground); font-variant-numeric: oldstyle-nums; }
.bk-text { position: relative; font-size: 1.05rem; line-height: 1.72; hyphens: auto; }
.bk-text p { margin: 0 0 1em; }
.bk-text .bk-h { font-size: 1.05rem; font-weight: 600; margin: 1.6em 0 .6em; line-height: 1.4; }
.bk-text :target { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.bk-text [id] { scroll-margin-top: 4.5rem; }
.bk .pg { position: absolute; left: -6.5rem; width: 5.5rem; text-align: right; font-size: .72rem; line-height: 2.4; font-style: normal; font-weight: 400;
  color: var(--muted-foreground); font-variant-numeric: oldstyle-nums; white-space: nowrap; }
.bk-text h3.bk-h { font-size: 1.12rem; font-weight: 600; }
.bk-text h4.bk-h, .bk-text h5.bk-h, .bk-text h6.bk-h { font-size: 1rem; font-style: italic; font-weight: 400; margin: 1.3em 0 .5em; }
.bk-text ol, .bk-text ul { margin: 0 0 1em; padding-left: 1.6em; }
.bk-text ol { list-style: decimal; }
.bk-text ul { list-style: disc; }
.bk-text li { margin: .15em 0; padding-left: .2em; }
.bk-text li > p { margin: 0; }
.bk-text blockquote { margin: 0 0 1em; padding-left: 1em; border-left: 1px solid var(--border); color: var(--muted-foreground); }
.bk-tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .4em 0 1.3em; }
.bk-tbl table { border-collapse: collapse; font-size: .88rem; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
.bk-tbl th, .bk-tbl td { padding: .3em .8em .3em 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); hyphens: none; }
.bk-tbl th { font-weight: 600; border-bottom-color: color-mix(in srgb, var(--foreground) 35%, transparent); white-space: nowrap; }
.bk-tbl tr:last-child td { border-bottom: 0; }
.bk-tbl thead:not(:has(th:not(:empty))) { display: none; }
/* A figure cut from the scan: black ink on white paper, multiplied into the page; in dark mode inverted, as the rites' line plates are */
.bk-fig { margin: .5em 0 1.4em; padding: .7rem .7rem .5rem; border: 1px solid var(--border); border-radius: 4px; text-align: center; }
.bk-fig img { display: inline-block; max-width: 100%; max-height: 22rem; width: auto; height: auto; mix-blend-mode: multiply; }
.bk-b:has(> .bk-fig + .bk-fig) { display: flex; flex-wrap: wrap; gap: 0 .8rem; align-items: flex-start; }   /* a rāśi chart and its navāṃśa side by side */
/* the items' flex needs no :has(): it applies only inside the flex row above. `.bk-b:has(…) > *` made every element any htmx swap inserted, on
   every page, restyle the whole document (150–600 ms on the board) */
.bk-b > * { flex: 1 1 100%; }
.bk-b > .bk-fig { flex: 1 1 14rem; min-width: 0; }
html.dark .bk-fig img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
.bk-fig figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .6rem; margin-top: .45rem; font-size: .8rem; line-height: 1.4;
  color: var(--muted-foreground); font-style: normal; }
.bk-fig-cap { font-style: italic; }
.bk-fig .bk-fig-src .pg { position: static; display: inline; width: auto; margin: 0; padding: 0; border: 0; line-height: inherit; font-size: inherit; }
.bk-fig .bk-fig-src .pg:hover { color: var(--primary); }
.bk-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .85rem; }
.bk-foot a:hover .bk-ch, .bk-up:hover { color: var(--primary); }
.bk-next { text-align: right; }
.bk-up { color: var(--muted-foreground); padding-top: .05rem; }
.bk-lbl { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }
@media (max-width: 900px) {
  .bk .pg { position: static; display: inline; width: auto; margin: 0 .3em; padding: 0 .3em; line-height: 1; border-left: 1px solid var(--border); font-size: .7rem; }
  .bk-b > .pg { display: block; margin: 0 0 .3em; padding: 0; border: 0; }
}
@media (max-width: 480px) {
  .bk { padding: 1rem .9rem 4rem; }
  .bk-title { font-size: 1.45rem; }
  .bk-text { font-size: 1rem; line-height: 1.65; }
  .bk-foot { grid-template-columns: 1fr 1fr; }
  .bk-up { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}
.bk > nav { margin-bottom: .8rem; }

/* A work's contents (vr/shlokas/works_ui): a column of numbers and the chapters' one lines, no rules between rows; the whole row is the link.
   --wk-n is the widest number the work prints, so every part's list lines up alike. */
.bk header.wk-head { padding-bottom: .8rem; margin-bottom: 1rem; }
.wk-head .bk-title { margin-top: .8rem; }
.wk-head .bk-desc { margin: .5rem 0 .25rem; }
.wk-toc { --wk-nw: calc(var(--wk-n, 2) * .6em + .15em); list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.wk-row { display: grid; grid-template-columns: var(--wk-nw) minmax(0, 1fr); column-gap: .85rem; align-items: baseline; line-height: 1.45; cursor: pointer; }
.wk-row:hover .wk-d, .wk-row:focus-visible .wk-d { color: var(--primary); }
.wk-row:focus-visible { outline: 1px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
.wk-n { text-align: right; font-size: .82rem; color: var(--muted-foreground); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.wk-u { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* the unit word, for a screen reader */
.wk-d { min-width: 0; }
.wk-nm { font-weight: 500; }   /* upright: the italic cuts set the IAST dots off their letters */
.wk-sep { color: var(--muted-foreground); }
.wk-x { margin-left: .55em; font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; font-style: normal; }
.wk-rd:hover { color: var(--primary); }
.wk-more::after { content: ' ▾'; }
details[open] > summary .wk-more::after { content: ' ▴'; }
.wk-hl { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .7rem; margin: .3rem 0 .4rem calc(var(--wk-nw) + .85rem); font-size: .88rem;
  font-variant-numeric: lining-nums tabular-nums; }
.wk-hl > .wk-x { margin-left: 0; }
.wk-hl a:hover { color: var(--primary); }
details.wk-part { margin-top: .5rem; }
details.wk-part > summary { font-variant: all-small-caps; letter-spacing: .04em; font-size: 1.08rem; padding: .2rem 0; cursor: pointer; }
details.wk-part > summary::marker { color: var(--muted-foreground); font-size: .8em; }
details.wk-part[open] > summary { margin-bottom: .45rem; }
details.wk-part > .wk-toc { padding-left: 1rem; margin-bottom: 1.1rem; }
.wk-pc { color: var(--muted-foreground); }
@media (max-width: 480px) { details.wk-part > .wk-toc { padding-left: .5rem; } }

/* a search box's clear button: the browser's own (blue in Chrome) becomes a small × in the secondary ink */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-left: 6px; cursor: pointer;
  background: var(--muted-foreground); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type=search]::-webkit-search-cancel-button:hover { background: var(--foreground); }

/* the one tooltip (static/js/tip.js): a fixed box on <body> in the top layer, so no card's overflow clips it; wraps, kept on screen by the script */
#vr-tip { position: fixed; inset: auto; margin: 0; z-index: 100; display: none; max-width: min(22rem, calc(100vw - 1rem)); width: max-content;
  padding: .5rem .75rem; border: 0; border-radius: .375rem; background: var(--foreground); color: var(--background); overflow: visible;
  font: .8125rem/1.4 var(--font-sans); white-space: pre-line; overflow-wrap: anywhere; text-align: start; pointer-events: none;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--foreground) 18%, transparent); }
#vr-tip.on { display: block; }
/* tl.js: a reader page waiting to change script stays hidden until it has (never longer than 3 s, should the script not run) */
html.tl-wait #shloka-card { visibility: hidden; animation: tl-show 0s 3s forwards; }
@keyframes tl-show { to { visibility: visible; } }