/* BHAKTI - site stylesheet. Loaded AFTER Bootstrap 5 (css/vendor/bootstrap.min.css), so it re-themes Bootstrap's components.
   Sections: 1 tokens (colours, fonts, sizes)  2 fonts  3 base  4 frame (header, page shell, widgets, footer)
   5 navigation (menus, panels, sheets, tabs, cards)  6 components  7 pages  8 master layout page.
   Colours live ONLY in section 1; tools/check-theme.mjs enforces it. See docs/THEME.md. */

/* ################################################################ 1. TOKENS */
/* ==========================================================================
   DESIGN TOKENS - the single place to change colours, type and spacing.
   (Every colour pair that carries text is checked by `npm run check`: scripts/check-theme.mjs.)

   THE PALETTE
   - Bhagwa (saffron) leads: top bar, primary buttons, brand mark, the Devotional Apps section.
   - Kumkum maroon is the "ink": headings, links, footer, text placed on saffron.
   - Eight vivid supporting hues give every menu section its own colour (see "Section colours"),
     so a visitor can tell where they are at a glance.
       apps = Bhagwa   aarti = Rose     mantra = Teal    videos = Sky     audios = Violet
       suvichar = Gold festivals = Fuchsia   tirth = Green   shop = Lime
   - A section's colour is switched on with data-sec="<section>" (tiles, chips, pages, panels).
     Anything without data-sec uses Bhagwa.

   HOW TO CHANGE A SECTION'S COLOUR: edit its one [data-sec="..."] block at the bottom of this file
   (point it at another hue scale, e.g. var(--violet-600) instead of var(--teal-600)). Nothing else needs touching;
   run `npm run check` afterwards and it will tell you if any pair stopped being readable.
   ========================================================================== */

:root {
  /* ---- Bhagwa (saffron) ------------------------------------------------ */
  --bhagwa-50: #FFF8EE;
  --bhagwa-100: #FFEEDA;
  --bhagwa-200: #FFDDB3;
  --bhagwa-300: #FFC67F;
  --bhagwa-400: #FFAA4D;
  --bhagwa-500: #FF8F1F;  /* brand saffron - fills, bars, buttons */
  --bhagwa-600: #F2740A;
  --bhagwa-700: #C95A06;  /* decorative only: 4.2:1 on white */
  --bhagwa-800: #9A4305;  /* saffron text on white: 6.6:1 */
  --bhagwa-900: #6E2F04;

  /* ---- Kumkum maroon: the "ink" colour ---------------------------------- */
  --accent-50: #FCF1EF;
  --accent-100: #F6DBD6;
  --accent-200: #E8B3AA;
  --accent-600: #A12B24;
  --accent-700: #86201B;
  --accent-800: #6B1814;
  --accent-900: #4A0F0C;
  --shadow-rgb: 74, 15, 12;
  --night-900: #1E0F0E;   /* the Jaap counter's dark board */
  --night-800: #2A1512;
  --night-bead: #4A2A22;   /* a bead not yet counted */
  --night-line: #5A3328;
  --brand-rgb: 242, 116, 10;  /* saffron, as numbers: for soft coloured shadows */

  /* ---- Vivid hue scales (50 tint, 100 soft tint, 200 line, 500/600 fill, 700/800 ink) ----- */
  --rose-50: #FFF1F2;    --rose-100: #FFE4E6;    --rose-200: #FECDD3;    --rose-500: #F43F5E;    --rose-600: #E11D48;    --rose-700: #BE123C;    --rose-800: #9F1239;
  --gold-50: #FEFCE8;    --gold-100: #FEF9C3;    --gold-200: #FEF08A;    --gold-500: #FACC15;    --gold-600: #EAB308;    --gold-700: #A16207;    --gold-800: #854D0E;
  --lime-50: #F7FEE7;    --lime-100: #ECFCCB;    --lime-200: #D9F99D;    --lime-500: #84CC16;    --lime-600: #65A30D;    --lime-700: #4D7C0F;    --lime-800: #3F6212;
  --green-50: #F0FDF4;   --green-100: #DCFCE7;   --green-200: #BBF7D0;   --green-500: #22C55E;   --green-600: #16A34A;   --green-700: #15803D;   --green-800: #166534;
  --teal-50: #F0FDFA;    --teal-100: #CCFBF1;    --teal-200: #99F6E4;    --teal-500: #14B8A6;    --teal-600: #0D9488;    --teal-700: #0F766E;    --teal-800: #115E59;
  --sky-50: #F0F9FF;     --sky-100: #E0F2FE;     --sky-200: #BAE6FD;     --sky-500: #0EA5E9;     --sky-600: #0284C7;     --sky-700: #0369A1;     --sky-800: #075985;
  --violet-50: #F5F3FF;  --violet-100: #EDE9FE;  --violet-200: #DDD6FE;  --violet-500: #8B5CF6;  --violet-600: #7C3AED;  --violet-700: #6D28D9;  --violet-800: #5B21B6;
  --fuchsia-50: #FDF4FF; --fuchsia-100: #FAE8FF; --fuchsia-200: #F5D0FE; --fuchsia-500: #D946EF; --fuchsia-600: #C026D3; --fuchsia-700: #A21CAF; --fuchsia-800: #86198F;

  /* ---- Semantic colours (use these in components, not the raw scales) --- */
  --bg: #FFFBF5;               /* page background: a whisper of saffron on white */
  --surface: #FFFFFF;
  --text: #2A1A14;
  --text-muted: #6B5850;
  --heading: var(--accent-800);
  --link: var(--accent-700);
  --link-hover: var(--accent-900);
  --line: #EADBCB;
  --line-strong: #D9C2A8;
  --control-border: #8A7A70;   /* inputs: 4.1:1 against white */
  --focus: var(--accent-700);
  --on-brand: var(--accent-900); /* text placed on saffron: 6.7:1 */

  /* ---- Gradients and backdrop --------------------------------------------- */
  /* Headline accent word. All three stops are >= 3:1 on --bg (large text). */
  --grad-text: linear-gradient(95deg, #D9480F 0%, #D6336C 52%, #7048E8 100%);
  /* The festive strip along the very top (the toran): one colour per section hue. */
  --grad-toran: linear-gradient(90deg, var(--bhagwa-500), var(--rose-600), var(--fuchsia-600), var(--violet-600), var(--sky-600), var(--teal-600), var(--green-600), var(--lime-600), var(--gold-600));
  --dot-color: rgba(242, 116, 10, 0.22);
  --glow-a: var(--bhagwa-100);     /* soft corner glow, top left of every page */
  --glow-b: var(--sec-tint-2);     /* top right: takes the colour of the section you are in */

  /* ---- Type ------------------------------------------------------------- */
  /* Body: Poppins for Latin letters, Noto Sans Devanagari for Devanagari (see section 2). Headings: Poppins for both. */
  --font-body: "Poppins Latin", "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Space, shape, depth --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-sm: 0.6rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 1px 3px rgba(var(--shadow-rgb), 0.08);
  --shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.05), 0 8px 24px rgba(var(--shadow-rgb), 0.09);
  --shadow-lg: 0 14px 44px rgba(var(--shadow-rgb), 0.2);

  /* ---- Layout (all of these can be tuned from pages/master-layout.html) ---------- */
  --container: 80rem;
  --leftnav-w: 15rem;
  --rail-w: 19rem;
  --bar-h: 3.75rem;       /* mobile top bar */
  --nav-h: 4rem;          /* desktop primary nav bar */
  --tabbar-h: 4.6rem;     /* mobile bottom tabs (two-line labels) */

  /* ---- Reading size: changed by the "Language & size" dialog -------------------- */
  --read-scale: 1;

  /* ---- Bootstrap bridge: Bootstrap's own variables read our tokens ---------------------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-heading-color: var(--heading);
  --bs-border-color: var(--line);
  --bs-link-color: var(--link);
  --bs-link-hover-color: var(--link-hover);
  --bs-breadcrumb-divider: "\203A";
  --bs-breadcrumb-divider-color: var(--text-muted);
  --bs-breadcrumb-item-active-color: var(--accent-800);

  /* ---- Current section colour (default = Bhagwa; overridden by [data-sec]) ------------ */
  --sec: var(--bhagwa-500);        /* chip / icon background */
  --sec-on: var(--accent-900);     /* icon colour placed ON --sec (>= 3:1) */
  --sec-tint: var(--bhagwa-50);    /* tinted card background */
  --sec-tint-2: var(--bhagwa-100); /* stronger tint: hover, pills, header bands */
  --sec-line: var(--bhagwa-200);   /* borders on tinted surfaces */
  --sec-ink: var(--bhagwa-800);    /* coloured text on white or tint (>= 4.5:1) */
  --sec-icon: var(--bhagwa-700);   /* coloured icon on white (>= 3:1) */
}

html[data-fs="s"] { --read-scale: 0.92; }
html[data-fs="l"] { --read-scale: 1.15; }
html[data-fs="xl"] { --read-scale: 1.35; }

/* ---- Accent previews (only used by the pages/design.html page) -------------------- */
html[data-accent="gold"] {
  --accent-50: #FFFBEB;
  --accent-100: #FEF1CC;
  --accent-200: #F5D98A;
  --accent-600: #A66A12;
  --accent-700: #8A5A0F;
  --accent-800: #6B4510;
  --accent-900: #45290A;
  --shadow-rgb: 69, 41, 10;
}

html[data-accent="neel"] {
  --accent-50: #EEF0FB;
  --accent-100: #DDE1F7;
  --accent-200: #B7BFEE;
  --accent-600: #3D4BB0;
  --accent-700: #2F3A8F;
  --accent-800: #232C6E;
  --accent-900: #171C4A;
  --shadow-rgb: 23, 28, 74;
}

/* ==========================================================================
   SECTION COLOURS  -  one block per menu section. Used as data-sec="aarti" on a tile, a page's <body>,
   a menu panel, and so on. To give a section a different hue, swap the var(--hue-...) names.
   ========================================================================== */
[data-sec="apps"] {
  --sec: var(--bhagwa-500); --sec-on: var(--accent-900); --sec-tint: var(--bhagwa-50); --sec-tint-2: var(--bhagwa-100);
  --sec-line: var(--bhagwa-200); --sec-ink: var(--bhagwa-800); --sec-icon: var(--bhagwa-700);
}
[data-sec="aarti"] {
  --sec: var(--rose-600); --sec-on: #FFFFFF; --sec-tint: var(--rose-50); --sec-tint-2: var(--rose-100);
  --sec-line: var(--rose-200); --sec-ink: var(--rose-800); --sec-icon: var(--rose-600);
}
[data-sec="mantra"] {
  --sec: var(--teal-600); --sec-on: #FFFFFF; --sec-tint: var(--teal-50); --sec-tint-2: var(--teal-100);
  --sec-line: var(--teal-200); --sec-ink: var(--teal-800); --sec-icon: var(--teal-700);
}
[data-sec="videos"] {
  --sec: var(--sky-600); --sec-on: #FFFFFF; --sec-tint: var(--sky-50); --sec-tint-2: var(--sky-100);
  --sec-line: var(--sky-200); --sec-ink: var(--sky-800); --sec-icon: var(--sky-700);
}
[data-sec="audios"] {
  --sec: var(--violet-600); --sec-on: #FFFFFF; --sec-tint: var(--violet-50); --sec-tint-2: var(--violet-100);
  --sec-line: var(--violet-200); --sec-ink: var(--violet-800); --sec-icon: var(--violet-600);
}
[data-sec="suvichar"] {
  --sec: var(--gold-500); --sec-on: var(--accent-900); --sec-tint: var(--gold-50); --sec-tint-2: var(--gold-100);
  --sec-line: var(--gold-200); --sec-ink: var(--gold-800); --sec-icon: var(--gold-700);
}
[data-sec="tirth"] {
  --sec: var(--green-600); --sec-on: #FFFFFF; --sec-tint: var(--green-50); --sec-tint-2: var(--green-100);
  --sec-line: var(--green-200); --sec-ink: var(--green-800); --sec-icon: var(--green-700);
}
[data-sec="festivals"] {
  --sec: var(--fuchsia-600); --sec-on: #FFFFFF; --sec-tint: var(--fuchsia-50); --sec-tint-2: var(--fuchsia-100);
  --sec-line: var(--fuchsia-200); --sec-ink: var(--fuchsia-800); --sec-icon: var(--fuchsia-700);
}
[data-sec="shop"] {
  --sec: var(--lime-500); --sec-on: var(--accent-900); --sec-tint: var(--lime-50); --sec-tint-2: var(--lime-100);
  --sec-line: var(--lime-200); --sec-ink: var(--lime-800); --sec-icon: var(--lime-700);
}
/* The home page is no section of its own: saffron, with a violet glow in the corner for a livelier first impression. */
[data-sec="home"] {
  --glow-b: var(--violet-100);
}
/* Pages that are not a menu section (About, Privacy, ...) use the information colour: maroon. */
[data-sec="info"] {
  --sec: var(--accent-700); --sec-on: #FFFFFF; --sec-tint: var(--accent-50); --sec-tint-2: var(--accent-100);
  --sec-line: var(--accent-200); --sec-ink: var(--accent-800); --sec-icon: var(--accent-700);
}

/* ################################################################ 2. FONTS */
/* Self-hosted fonts (SIL Open Font License - see ../fonts/LICENSE-OFL.txt).
   Each family is split into a Devanagari file and a Latin file; the browser downloads only the file(s) a page needs.

   Poppins              headings, buttons, labels, the lyrics: a clean geometric sans that has Devanagari too (500, 600, 700;
                        "400" uses the Devanagari 500 file, which is the lightest shipped).
   Poppins Latin        the same Latin letters, as a family of their own, so that body text takes its Latin letters from Poppins
                        and its Devanagari from Noto Sans Devanagari (the order of --font-body does the rest).
   Noto Sans Devanagari body text in Hindi (400, 700).

   To change a font, replace the files and the family name here and in --font-body / --font-display. */

@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-devanagari-400-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Only 400 and 700 are shipped: 500/600 map to the nearest (700) so there is no faux bold. */
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-devanagari-700-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/noto-sans-devanagari-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins: Devanagari */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-devanagari-500-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-devanagari-500-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-devanagari-600-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-devanagari-700-normal.woff2) format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* Poppins: Latin (the headings' family, and - as "Poppins Latin" - the body's Latin letters) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins Latin";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins Latin";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins Latin";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins Latin";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ################################################################ 3. BASE */
/* Reset, typography, accessibility helpers and the bilingual (Hindi / English) switch. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
}

@media (min-width: 62em) {
  html {
    scroll-padding-top: calc(var(--nav-h) + 1rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  /* Devanagari carries marks above and below the line; it needs more leading than Latin. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Two soft glows behind the top of every page (the right-hand one takes the colour of the section you are in).
   It sits behind everything and fades out before the content ends. Plain and quiet on purpose. */
body {
  position: relative;
}

body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(48rem, 100vh);
  pointer-events: none;
  background:
    radial-gradient(36rem 22rem at 4% 12rem, var(--glow-a) 0%, transparent 70%),
    radial-gradient(38rem 24rem at 98% 14rem, var(--glow-b) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(#000 0%, #000 40%, transparent 100%);
}

html.no-scroll,
html.no-scroll body {
  overflow: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

/* ---- Headings ----------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1,
.t-h1 {
  font-weight: 700;
}

.t-h1,
.t-h2,
.t-h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.35;
}

.t-h1 { font-size: clamp(1.7em, 1.3em + 1.9vw, 2.45em); }
.t-h2 { font-size: clamp(1.4em, 1.2em + 0.9vw, 1.8em); }
.t-h3 { font-size: 1.25em; }

h1 { font-size: clamp(1.7em, 1.3em + 1.9vw, 2.45em); }
h2 { font-size: clamp(1.4em, 1.2em + 0.9vw, 1.8em); }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }

p {
  margin: 0 0 1em;
}

/* a soft brand-coloured flash when something is tapped on a phone (instead of the browser's blue box) */
a,
button,
summary,
label {
  -webkit-tap-highlight-color: rgba(var(--shadow-rgb), 0.1);
}

a {
  color: var(--link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--link-hover);
}

ul,
ol {
  margin: 0 0 1em;
  padding-inline-start: 1.25rem;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

strong,
b {
  font-weight: 700;
}

code {
  padding: 0.05em 0.35em;
  border-radius: 0.3rem;
  background: var(--accent-50);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}

::selection {
  background: var(--bhagwa-200);
  color: var(--accent-900);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Helpers ------------------------------------------------------------ */
.nowrap {
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -5rem;
  left: 0.5rem;
  z-index: 200;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent-900);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus {
  top: 0.5rem;
  color: #fff;
}

.wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

/* Things that only work with JavaScript are hidden when it is off. */
.no-js [data-requires-js] {
  display: none !important;
}

/* Browsers without <dialog> support would otherwise print the dialogs at the bottom of the page. */
dialog:not([open]) {
  display: none;
}

/* "Reduce motion": no animations or transitions at all (state changes are instant,
   which also keeps focus handling for the drawer reliable). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Icons -------------------------------------------------------------- */
.icon {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 1.25rem;
  height: auto;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
  fill: currentColor;
  stroke: none;
}


/* ==========================================================================
   Bilingual text.  <span class="bi"><span class="hi">..</span><span class="en">..</span></span>
   The visitor picks Hindi, English or both ("Language & size" dialog); <html data-view> carries the choice.
   ========================================================================== */
html[data-view="hi"] .en { display: none !important; }
html[data-view="en"] .hi { display: none !important; }

/* Inline pair: "आरती / Aarti" */
html[data-view="both"] .bi:not(.bi--stack) > .hi + .en::before {
  content: " / ";
  font-weight: 400;
  opacity: 0.6;
}

/* Stacked pair: English sits under Hindi, smaller */
.bi--stack {
  display: block;
}

.bi--stack > .hi,
.bi--stack > .en {
  display: block;
}

.bi--stack > .en {
  font-family: var(--font-body);
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.85;
}

h1 .bi--stack > .en,
h2 .bi--stack > .en,
.t-h1 .bi--stack > .en,
.t-h2 .bi--stack > .en {
  margin-top: 0.15em;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  opacity: 1;
}

/* Stack only on phones, inline from tablet up (hero buttons) */
@media (max-width: 40em) {
  .bi--stack-sm {
    display: block;
  }

  .bi--stack-sm > .hi,
  .bi--stack-sm > .en {
    display: block;
  }

  .bi--stack-sm > .en {
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.3;
  }

  html[data-view="both"] .bi.bi--stack-sm > .hi + .en::before {
    content: none;
  }
}

/* Section headings inside long text behave like stacked pairs */
.prose h2 > .bi,
.prose h3 > .bi {
  display: block;
}

.prose h2 > .bi > .hi,
.prose h2 > .bi > .en,
.prose h3 > .bi > .hi,
.prose h3 > .bi > .en {
  display: block;
}

.prose h2 > .bi > .en,
.prose h3 > .bi > .en {
  margin-top: 0.1em;
  font-family: var(--font-body);
  font-size: 0.58em;
  font-weight: 500;
  color: var(--text-muted);
}

html[data-view="both"] .prose h2 > .bi > .hi + .en::before,
html[data-view="both"] .prose h3 > .bi > .hi + .en::before {
  content: none;
}

/* Paragraph-level pairs used in long text: a Hindi block followed by its English block */
.pair > ul.en,
.pair > ol.en {
  padding-inline-start: 2.2rem;
}

.pair > .en {
  margin-top: 0.4rem;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--bhagwa-200);
  color: var(--text-muted);
}

/* ################################################################ 4. FRAME */
/* ==========================================================================
   MASTER LAYOUT
   Phone  (< 62em):  sticky top bar + content + rail below + bottom tabs + slide-in drawer
   Tablet (>= 62em): top nav bar + left section nav + content, rail below the content
   Wide   (>= 75em): left nav | content | right rail
   ========================================================================== */

/* ---- Toran: a thin strip in all the section colours along the very top ----------------------------------------- */
.toran {
  height: 4px;
  background: var(--grad-toran);
}

/* ---- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--bar-h);
  padding-block: 0.35rem;
}

.site-header__tagline {
  display: none;
  margin: 0 auto;
  padding-inline: 1.25rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.35;
  text-align: center;
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--accent-800);
  text-decoration: none;
}

.brand:hover {
  color: var(--accent-800);
}

.brand__logo {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}

.brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent-800);
}

.brand__sub {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bhagwa-800);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--accent-800);
  font: inherit;
  cursor: pointer;
}

.icon-btn:hover {
  background: var(--bhagwa-100);
}

.icon-btn .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-800);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.chip-btn:hover {
  border-color: var(--bhagwa-500);
  background: var(--bhagwa-50);
}

.chip-btn .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.chip-btn__text {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phones: menu button on the left, tools shrink to icons */
@media (max-width: 47.99em) {
  .chip-btn {
    padding: 0.3rem;
  }

  /* Icon-only on phones: the label stays in the page for screen readers */
  .chip-btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

@media (max-width: 26.25em) {
  .site-header .brand__sub {
    display: none;
  }
}

/* ---- Page shell: left nav | content | right rail -------------------------- */
.shell {
  flex: 1;
  display: grid;
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-block: 1.5rem 2.5rem;
  gap: 1.5rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main" "rail";
  align-content: start;
}

/* The page body is held back (it keeps its place, nothing is painted) until js/layout.js has built the rest of the frame, the parts
   that come from the menu and the fonts are in. Painted any earlier it would show unfinished and then jump. Whatever goes wrong,
   it is shown after 3 seconds at the latest. */
html.js:not(.is-framed) .shell {
  visibility: hidden;
  animation: shell-reveal 0s 3s forwards;
}

@keyframes shell-reveal {
  to {
    visibility: visible;
  }
}

.content {
  grid-area: main;
  min-width: 0;
  /* The "Language & size" dialog's text size scales the reading area. Children use em units. */
  font-size: calc(1.0625rem * var(--read-scale));
}

.content:focus {
  outline: none;
}

.leftnav {
  display: none;
  grid-area: left;
}

.shell--no-left .leftnav,
.shell--no-rail .rail {
  display: none !important;
}

.rail {
  grid-area: rail;
  display: grid;
  gap: 1rem;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

@media (min-width: 62em) {
  .shell {
    padding-block: 2rem 3rem;
    grid-template-columns: var(--leftnav-w) minmax(0, 1fr);
    grid-template-areas:
      "left main"
      "left rail";
    grid-template-rows: auto 1fr;
  }

  .shell--no-left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "rail";
    grid-template-rows: auto;
  }

  .leftnav {
    display: block;
  }
}

@media (min-width: 75em) {
  .shell {
    grid-template-columns: var(--leftnav-w) minmax(0, 1fr) var(--rail-w);
    grid-template-areas: "left main rail";
    grid-template-rows: auto;
  }

  .shell--no-left {
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    grid-template-areas: "main rail";
  }

  .shell--no-rail {
    grid-template-columns: var(--leftnav-w) minmax(0, 1fr);
    grid-template-areas: "left main";
  }

  .shell--no-left.shell--no-rail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
  }

  .rail {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
    align-self: start;
    grid-template-columns: 1fr;
  }

  /* "Place the right column below the content" (frame.json: right.placement) */
  .shell--rail-below {
    grid-template-columns: var(--leftnav-w) minmax(0, 1fr);
    grid-template-areas:
      "left main"
      "left rail";
    grid-template-rows: auto 1fr;
  }

  .shell--rail-below.shell--no-left {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "rail";
    grid-template-rows: auto;
  }

  .shell--rail-below .rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* left menu width (frame.json: left.width) */
html[data-left-width="narrow"] { --leftnav-w: 12.5rem; }
html[data-left-width="wide"] { --leftnav-w: 18.5rem; }

/* right column widgets and footer columns that are switched off */
[data-widget-off],
[data-col-off] {
  display: none !important;
}

/* ---- Right rail widgets ---------------------------------------------------- */
.widget {
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--sec-tint), var(--surface) 78%);
  box-shadow: var(--shadow-sm);
}

.widget__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--sec-ink);
}

.widget__big {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1.3;
  color: var(--accent-800);
}

.widget__muted {
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.widget__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.widget__text {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ad-slot {
  min-height: 250px; /* reserved so ads never shift the page */
}

/* ---- Footer ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--accent-900);
  color: var(--accent-100);
}

/* the same multicolour strip as the toran, as the footer's top edge */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--grad-toran);
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.site-footer h2 {
  margin: 0 0 0.8rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bhagwa-300);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--bhagwa-300);
  text-decoration: underline;
}

.site-footer :focus-visible {
  outline-color: var(--bhagwa-300);
}

.site-footer ul {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__blurb {
  margin: 0.9rem 0 0;
  color: var(--accent-100);
}

.site-footer__shloka {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--bhagwa-300);
}

.site-footer__care p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.site-footer__social {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.4rem 1rem !important;
  margin-top: 1rem !important;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--accent-200);
  font-size: 0.88rem;
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-block: 1rem;
}

.site-footer__bottom p {
  margin: 0;
}

.brand--light {
  color: #fff;
}

.brand--light:hover {
  color: #fff;
}

.brand--light .brand__name {
  color: #fff;
}

.brand--light .brand__sub {
  color: var(--bhagwa-300);
}

/* ---- Dialogs (Bootstrap modal, re-themed) -------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--surface);
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--radius-lg);
  --bs-modal-width: 27rem;
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-color: var(--text);
}

.modal-backdrop {
  --bs-backdrop-bg: rgb(var(--shadow-rgb));
  --bs-backdrop-opacity: 0.6;
}

.dialog__form {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.dialog__form h2 {
  margin: 0;
  font-size: 1.5rem;
}

.dialog__form p {
  margin: 0;
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}


/* ################################################################ 5. NAVIGATION */
/* ==========================================================================
   NAVIGATION
   - chips            round / rounded-square coloured icon badges (colour = the section's, from data-sec)
   - top menu         saffron bar; clicking an item opens its panel
   - panels           the SAME panel is a dropdown under the top menu (desktop) and a sheet above the tab bar (phones)
   - left menu        the whole sub-menu of the current section (desktop)
   - bottom tabs      phones
   - cards and pills  section cards with numbered pills (also used on the home page), previous / next links
   Content: data/menu-data.js.  Behaviour: js/layout.js.
   ========================================================================== */

/* ---- Chips ---------------------------------------------------------------- */
.chip {
  --cs: 2.5rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--cs);
  height: var(--cs);
  border-radius: calc(var(--cs) * 0.34);
  background: var(--sec);
  color: var(--sec-on);
  font-size: calc(var(--cs) * 0.52);
  line-height: 1;
}

.chip .icon {
  width: 1em;
  height: 1em;
  vertical-align: 0;
}

.chip .icon--glyph {
  width: auto;
  height: auto;
  min-width: 0;
  font-size: 1.12em;
}

.chip--sm { --cs: 1.75rem; border-radius: 50%; }
.chip--md { --cs: 2.5rem; }
.chip--lg { --cs: 3rem; }
.chip--xl { --cs: 3.75rem; }

/* ---- Header on wide screens ---------------------------------------------- */
@media (min-width: 62em) {
  .site-header {
    position: static;
  }

  .site-header__menu {
    display: none;
  }

  .site-header__tagline {
    display: block;
  }

  .brand__logo {
    width: 3.1rem;
    height: 3.1rem;
  }

  .brand__name {
    font-size: 1.8rem;
  }
}

/* ---- Top menu: Bootstrap nav + dropdowns, re-themed ------------------------------------------- */
/* Default: a clean white bar. Each item has a small pastel icon in its section's colour; the current section (or the one whose
   panel is open) gets a tinted pill and a solid icon. The saffron bar is an option (frame-config.js: top.menuStyle). */
.primary-nav {
  z-index: 1020;
  background: var(--surface);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 20px rgba(var(--shadow-rgb), 0.05);
  --bs-nav-link-color: var(--text);
  --bs-nav-link-hover-color: var(--sec-ink);
  --bs-dropdown-spacer: 1.05rem;
  --bs-dropdown-link-active-bg: transparent;
  --bs-dropdown-link-active-color: var(--sec-ink);
  --bs-dropdown-link-hover-bg: var(--sec-tint);
  --bs-dropdown-link-hover-color: var(--sec-ink);
}

.primary-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
  min-height: var(--nav-h);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.65rem 0.3rem 0.4rem;
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.primary-nav .nav-link::after {
  display: none; /* Bootstrap's own caret: we draw ours */
}

.primary-nav .nav-link:hover {
  background: var(--sec-tint);
  color: var(--sec-ink);
}

/* current section, or the one whose panel is open */
.primary-nav .nav-link[aria-current],
.primary-nav .nav-link[aria-expanded="true"] {
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.primary-nav .nav-link:focus-visible {
  outline-color: var(--accent-800);
}

.primary-nav .nav-link .chip {
  --cs: 1.9rem;
  border-radius: 0.6rem;
  background: var(--sec-tint-2);
  color: var(--sec-icon);
  transition: background-color 0.15s, color 0.15s;
}

.primary-nav .nav-link:hover .chip,
.primary-nav .nav-link[aria-current] .chip,
.primary-nav .nav-link[aria-expanded="true"] .chip {
  background: var(--sec);
  color: var(--sec-on);
}

.nav-link__caret {
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.55;
  transition: transform 0.15s;
}

.primary-nav .nav-link[aria-expanded="true"] .nav-link__caret {
  transform: rotate(180deg);
}

.primary-nav .nav-link .bi--stack > .en {
  font-size: 0.74em;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 1;
}

/* Narrower desktops: the coloured chips step aside so all nine items fit on one row */
@media (min-width: 62em) and (max-width: 79.99em) {
  .primary-nav .nav-link .chip {
    display: none;
  }

  .primary-nav .nav-link {
    padding-inline: 0.55rem 0.45rem;
    font-size: 0.94rem;
  }
}

/* ---- Sub-menu panel on desktop: a Bootstrap dropdown ---------------------------------------------- */
.dropdown-menu.mpanel {
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--sec-line);
  width: max-content;
  min-width: 22rem;
  max-width: calc(100vw - 2rem);
  overflow: auto;
  border-top: 5px solid var(--sec);
  box-shadow: var(--shadow-lg);
}

/* Fade only. The panel is placed by Bootstrap / Popper with an inline transform, and an animation that also sets
   `transform` overrides it: the panel then starts at the wrong place and jumps when the animation ends (the flicker). */
.dropdown-menu.mpanel.show {
  animation: panel-in 0.12s ease-out;
}

@keyframes panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mpanel__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--sec-line);
  background: var(--sec-tint);
}

.mpanel__titles {
  flex: 1;
  min-width: 0;
}

.mpanel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--sec-ink);
}

.mpanel__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.95rem;
  border: 1.5px solid var(--sec);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--sec-ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}

.mpanel__all:hover {
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.mpanel__all .icon {
  width: 1rem;
  height: 1rem;
}

.mpanel__body {
  padding: 1rem 1.1rem 1.15rem;
}

.mpanel__label {
  margin: 1.1rem 0.3rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--sec-ink);
}

/* inside a dropdown the links are Bootstrap dropdown items, kept as our menu rows */
.mpanel .dropdown-item {
  white-space: normal;
}

/* ---- Sub-menu panel on phones: a Bootstrap offcanvas sheet above the tab bar ------------------------- */
.offcanvas-backdrop {
  --bs-backdrop-bg: rgb(var(--shadow-rgb));
  --bs-backdrop-opacity: 0.55;
}

.offcanvas.msheet {
  --bs-offcanvas-height: auto;
  --bs-offcanvas-bg: var(--surface);
  --bs-offcanvas-border-width: 0;
  --bs-offcanvas-padding-x: 0.9rem;
  --bs-offcanvas-padding-y: 0.75rem;
  bottom: calc(var(--tabbar-h) + 1px + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--tabbar-h) - env(safe-area-inset-bottom) - 3.5rem);
  max-height: calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom) - 3.5rem);
  border-top: 5px solid var(--sec);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -10px 40px rgba(var(--shadow-rgb), 0.25);
}

/* the little handle at the top of a sheet */
.offcanvas.msheet::before {
  content: "";
  flex: none;
  align-self: center;
  width: 2.75rem;
  height: 4px;
  margin: 0.55rem 0 0;
  border-radius: 2px;
  background: var(--sec-line);
}

.msheet .mpanel__head {
  flex: none;
  padding: 0.55rem 0.9rem 0.7rem;
}

.msheet .mpanel__title {
  font-size: 1.2rem;
}

.msheet .btn-close {
  flex: none;
  margin-inline-start: 0.25rem;
}

/* ---- Menu tree: the lists inside a panel and in the left menu ---------------------- */
.mtree {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtree__quick,
.mgroup__list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
}

.tlink:hover {
  background: var(--sec-tint);
  color: var(--sec-ink);
}

.tlink[aria-current="page"] {
  background: var(--sec-tint-2);
  box-shadow: inset 3px 0 0 var(--sec);
  color: var(--sec-ink);
  font-weight: 700;
}

.tlink--all {
  justify-content: flex-start;
  gap: 0.4rem;
  color: var(--sec-ink);
  font-weight: 700;
}

.tlink--all .icon {
  width: 1rem;
  height: 1rem;
}

/* "Soon" marks stay small and quiet: while a section is being filled in, most items carry one */
.tlink .badge {
  flex: none;
  padding: 0 0.45rem;
  border-color: var(--sec-line);
  background: transparent;
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.6;
}

html[data-view="both"] .tlink .badge .en {
  display: none;
}

.mgroup__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--sec-tint);
  color: var(--sec-ink);
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.mgroup__sum::-webkit-details-marker {
  display: none;
}

.mgroup__sum:hover {
  background: var(--sec-tint-2);
}

.mgroup__caret {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.15s;
}

.mgroup[open] > .mgroup__sum .mgroup__caret {
  transform: rotate(180deg);
}

.mgroup__list {
  margin-top: 0.25rem;
}

/* Inside a dropdown on wide screens the sub-menus sit side by side */
@media (min-width: 62em) {
  .mpanel .mtree {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.75rem;
  }

  /* Columns are as wide as their content (so the panel is as wide as its content) and shrink only when the
     screen is tight. */
  .mpanel .mtree__col {
    flex: 0 1 auto;
    min-width: 12.5rem;
    max-width: 24rem;
  }

  .mpanel .mtree__col--wide {
    min-width: 22rem;
    max-width: 32rem;
  }

  .mpanel .mgroup--wide .mgroup__list {
    display: block;
    columns: 2 12rem;
    column-gap: 1rem;
  }

  .mpanel .mgroup--wide .mgroup__list > li {
    break-inside: avoid;
  }

  .mpanel .mgroup__all {
    column-span: all;
  }
}

/* "More" panel on phones */
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.more-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0.75rem 0.3rem 0.6rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius);
  background: var(--sec-tint);
  color: var(--sec-ink);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.more-grid__item:hover,
.more-grid__item[aria-current] {
  border-color: var(--sec);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.more-grid__label .bi--stack > .en {
  font-weight: 500;
}

.info-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mpanel__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

/* ---- Left menu (desktop) ---------------------------------------------------------- */
.sidenav {
  padding: 1rem 0.7rem 1.1rem;
  border: 1px solid var(--sec-line);
  border-top: 5px solid var(--sec);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 62em) {
  .sidenav {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
    max-height: calc(100vh - var(--nav-h) - 2rem);
    overflow-y: auto;
  }
}

.sidenav__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0.4rem 0.8rem;
  font-size: 1.2rem;
}

.sidenav__title a {
  color: var(--sec-ink);
  text-decoration: none;
}

.sidenav__title a:hover {
  text-decoration: underline;
}

.sidenav .mtree {
  gap: 0.3rem;
}

/* ---- Bottom tabs (phones) ------------------------------------------------------------ */
.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1050;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: 0 -4px 18px rgba(var(--shadow-rgb), 0.1);
}

.tabbar__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  min-height: var(--tabbar-h);
  padding: 0.3rem 0.2rem;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tab:hover {
  color: var(--sec-ink);
}

.tab__icon {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 1.95rem;
  border-radius: var(--radius-pill);
  transition: background-color 0.15s;
}

.tab .icon {
  width: 1.45rem;
  height: 1.45rem;
}

.tab .icon--glyph {
  width: auto;
  height: auto;
  font-size: 1.45rem;
}

.tab .bi--stack > .en {
  font-size: 0.84em;
}

.tab[aria-current],
.tab[aria-expanded="true"] {
  color: var(--sec-ink);
  font-weight: 700;
}

.tab[aria-current] .tab__icon,
.tab[aria-expanded="true"] .tab__icon {
  background: var(--sec);
  color: var(--sec-on);
}

body {
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}

@media (min-width: 62em) {
  .tabbar {
    display: none;
  }

  body {
    padding-bottom: 0;
  }
}

/* ---- Section cards and numbered pills (home page, section pages) --------------------------- */
.scard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.05rem 1.1rem 1.1rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: var(--sec-tint);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.scard:hover,
.scard:focus-within {
  transform: translateY(-3px);
  border-color: var(--sec);
  box-shadow: var(--shadow);
}

.scard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scard__title {
  margin: 0.2rem 0 0;
  font-size: 1.3em;
  line-height: 1.3;
  color: var(--sec-ink);
}

.scard__link {
  color: inherit;
  text-decoration: none;
}

/* the whole card is clickable through its title; the pills sit above it */
.scard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* keyboard focus: the ring goes round the whole card */
.scard__link:focus-visible {
  outline: none;
}

.scard__link:focus-visible::after {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.scard__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.55;
}

.pills {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.pills > li {
  min-width: 0;
  max-width: 100%;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.15rem 0.7rem 0.15rem 0.2rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--sec-ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}

.pill:hover {
  border-color: var(--sec);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.pill__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--sec);
  color: var(--sec-on);
  font-size: 0.74rem;
  line-height: 1;
}

.pill__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pill--more {
  padding-inline: 0.7rem;
}

/* ---- Previous / next ------------------------------------------------------------------------ */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 2rem 0;
}

.pager__link {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.15rem;
  max-width: 26rem;
  padding: 0.95rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.pager__link:hover {
  border-color: var(--sec);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(-2px);
}

.pager__link--next {
  margin-inline-start: auto;
  text-align: end;
}

.pager__dir {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sec-ink);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pager__link--next .pager__dir {
  justify-content: flex-end;
}

.pager__arrow {
  width: 1rem;
  height: 1rem;
}

.pager__link--prev .pager__arrow {
  transform: scaleX(-1);
}

.pager__name {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.35;
}

/* ==========================================================================
   FRAME OPTIONS (data/frame-config.js, tried out on pages/master-layout.html)
   They are plain attributes on <html>, so a change shows instantly and ships exactly as previewed.
   ========================================================================== */

/* tagline in the header */
html[data-top-tagline="off"] .site-header__tagline {
  display: none;
}

/* the top menu does not stay at the top while scrolling */
@media (min-width: 62em) {
  html[data-nav-sticky="off"] .primary-nav {
    position: relative !important;
  }

  /* icons in the top menu */
  html[data-nav-chips="off"] .primary-nav .nav-link .chip {
    display: none;
  }

  html[data-nav-chips="off"] .primary-nav .nav-link {
    padding-inline: 0.8rem 0.65rem;
  }

  /* the saffron top bar instead of the white one */
  html[data-nav-style="saffron"] .primary-nav {
    background: linear-gradient(180deg, var(--bhagwa-400), var(--bhagwa-500));
    color: var(--on-brand);
    border-bottom: 0;
    box-shadow: 0 2px 0 rgba(var(--shadow-rgb), 0.18), 0 6px 16px rgba(var(--shadow-rgb), 0.12);
    --bs-nav-link-color: var(--on-brand);
    --bs-nav-link-hover-color: var(--on-brand);
  }

  html[data-nav-style="saffron"] .primary-nav .nav-link {
    color: var(--on-brand);
  }

  html[data-nav-style="saffron"] .primary-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--on-brand);
  }

  html[data-nav-style="saffron"] .primary-nav .nav-link[aria-current],
  html[data-nav-style="saffron"] .primary-nav .nav-link[aria-expanded="true"] {
    background: #fff;
    color: var(--accent-800);
    box-shadow: var(--shadow-sm);
  }

  html[data-nav-style="saffron"] .primary-nav .nav-link .chip,
  html[data-nav-style="saffron"] .primary-nav .nav-link:hover .chip,
  html[data-nav-style="saffron"] .primary-nav .nav-link[aria-current] .chip,
  html[data-nav-style="saffron"] .primary-nav .nav-link[aria-expanded="true"] .chip {
    background: var(--sec);
    color: var(--sec-on);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
  }

  html[data-nav-style="saffron"] .primary-nav .nav-link .bi--stack > .en {
    color: inherit;
    opacity: 0.85;
  }
}

/* one colour for the whole site instead of a colour per section */
html[data-colors="saffron"] [data-sec] {
  --sec: var(--bhagwa-500);
  --sec-on: var(--accent-900);
  --sec-tint: var(--bhagwa-50);
  --sec-tint-2: var(--bhagwa-100);
  --sec-line: var(--bhagwa-200);
  --sec-ink: var(--bhagwa-800);
  --sec-icon: var(--bhagwa-700);
}

/* ################################################################ 6. COMPONENTS */
/* Reusable components. Sizes inside the reading area use em so the "Language & size" text size scales them. */

/* ---- Buttons: Bootstrap .btn, with the brand's own variants -------------------------------------- */
.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--radius-pill);
  --bs-btn-padding-x: 1.3rem;
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-focus-box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  line-height: 1.25;
  text-align: center;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, border-color 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* main button: saffron with maroon text */
.btn-brand {
  --bs-btn-color: var(--on-brand);
  --bs-btn-hover-color: var(--on-brand);
  --bs-btn-active-color: var(--on-brand);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-bg: var(--bhagwa-500);
  --bs-btn-hover-bg: var(--bhagwa-400);
  --bs-btn-active-bg: var(--bhagwa-400);
  background: linear-gradient(135deg, var(--bhagwa-400), var(--bhagwa-500));
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), 0.3);
}

.btn-brand:hover {
  box-shadow: 0 10px 24px rgba(var(--brand-rgb), 0.4);
}

/* dark maroon button */
.btn-maroon {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-bg: var(--accent-800);
  --bs-btn-hover-bg: var(--accent-900);
  --bs-btn-active-bg: var(--accent-900);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
}

/* outline button */
.btn-outline-brand {
  --bs-btn-color: var(--accent-800);
  --bs-btn-hover-color: var(--accent-900);
  --bs-btn-active-color: var(--accent-900);
  --bs-btn-bg: var(--surface);
  --bs-btn-hover-bg: var(--accent-50);
  --bs-btn-active-bg: var(--accent-50);
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-color: var(--accent-700);
  --bs-btn-hover-border-color: var(--accent-700);
  --bs-btn-active-border-color: var(--accent-700);
}

.btn-link {
  --bs-btn-color: var(--accent-800);
  --bs-btn-hover-color: var(--accent-900);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn-sm {
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-font-size: 0.92rem;
  min-height: 2.5rem;
}

.btn-lg {
  --bs-btn-padding-x: 1.7rem;
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-font-size: 1.08rem;
  min-height: 3.25rem;
}

.btn[disabled],
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---- Badges ------------------------------------------------------------------- */
.badge {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.12rem 0.6rem;
  white-space: nowrap;
}

.badge--soon {
  border: 1px solid var(--sec-line);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.badge--live {
  background: var(--accent-800);
  color: #fff;
}

/* ---- Text helpers ------------------------------------------------------------- */
.eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--sec-ink);
}

.eyebrow .en {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.lead {
  max-width: 44rem;
  font-size: 1.14em;
}

.muted {
  color: var(--text-muted);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2.25rem 0 1rem;
  font-size: 1.5em;
}

.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* ---- Breadcrumbs -------------------------------------------------------------- */
.breadcrumbs {
  margin: 0 0 1.1rem;
  font-size: 0.82em;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs li + li::before {
  content: "\203A";
  color: var(--text-muted);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a {
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--sec-ink);
  text-decoration: underline;
}

.breadcrumbs [aria-current] {
  color: var(--heading);
  font-weight: 600;
}

/* ---- Page header (inner pages) ------------------------------------------------- */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.page-head > .chip {
  margin-top: 0.15rem;
}

.page-head__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 1.1rem;
  background: linear-gradient(180deg, var(--bhagwa-300), var(--bhagwa-500));
  box-shadow: var(--shadow-sm);
  color: var(--accent-900);
}

.page-head__icon .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.page-head__icon .icon--glyph {
  font-size: 2rem;
}

.page-head h1 {
  margin-bottom: 0.4rem;
}

.page-head .lead {
  margin: 0;
}

/* ---- Cards & tiles --------------------------------------------------------------- */
.tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.tile:hover {
  transform: translateY(-3px);
  border-color: var(--bhagwa-400);
  box-shadow: var(--shadow);
  color: var(--text);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.95rem;
  background: var(--bhagwa-100);
  color: var(--bhagwa-800);
}

.tile__icon .icon {
  width: 1.55rem;
  height: 1.55rem;
}

.tile__icon .icon--glyph {
  font-size: 1.7rem;
}

.tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3em;
  line-height: 1.3;
  color: var(--accent-800);
}

.tile__desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.55;
}

.tile .badge {
  align-self: flex-start;
  margin-top: auto;
}

/* On phones the home page shows the nine sections like an app launcher: icon + name, 3 per row. */
@media (max-width: 40em) {
  .tiles--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .tiles--compact .tile {
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.35rem 0.7rem;
    text-align: center;
  }

  .tiles--compact .tile__desc {
    display: none;
  }

  .tiles--compact .tile__title {
    font-size: 1.02em;
  }

  .tiles--compact .tile .badge {
    align-self: center;
  }
}

/* Planned (not yet published) items */
.planned {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planned li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  line-height: 1.45;
}

/* ---- Callouts ---------------------------------------------------------------------- */
.callout {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sec-line);
  border-inline-start: 5px solid var(--sec);
  border-radius: var(--radius-sm);
  background: var(--sec-tint);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout h2,
.callout h3 {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: 1.05em;
  font-weight: 700;
  color: var(--accent-800);
}

.callout--note {
  border-color: var(--accent-200);
  border-inline-start-color: var(--accent-700);
  background: var(--accent-50);
}

/* ---- Long text (policies, about, articles) -------------------------------------------- */
.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.5em;
}

.prose h3 {
  margin-top: 1.6rem;
}

.prose li {
  margin-bottom: 0.4rem;
}

.prose .pair {
  margin-bottom: 1rem;
}

.prose .pair > p:last-child,
.prose .pair > ul:last-child {
  margin-bottom: 0;
}

.prose .updated {
  color: var(--text-muted);
  font-size: 0.9em;
}

/* ---- Forms ---------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 1.1rem;
  max-width: 40rem;
}

.form-label {
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 0.95em;
}

.form-control,
.form-select {
  --bs-border-color: var(--control-border);
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
}

textarea.form-control {
  min-height: 9rem;
  resize: vertical;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent-700);
  box-shadow: none;
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.req {
  color: var(--accent-700);
}

.field__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.field__hint .icon {
  margin-top: 0.15rem;
  width: 1rem;
  height: 1rem;
}

.form [role="status"] {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

.form [role="status"]:empty {
  display: none;
}

.form [role="status"][data-kind="ok"] {
  background: var(--bhagwa-100);
  color: var(--accent-900);
}

.form [role="status"][data-kind="error"] {
  background: var(--accent-100);
  color: var(--accent-900);
}

/* Spam trap: real visitors never see or fill this field. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Segmented radio groups (Language & size dialog) */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.seg legend {
  width: 100%;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 700;
}

.seg label {
  position: relative;
  flex: 1 1 auto;
}

.seg input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.seg label > span:not(.visually-hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.4rem 0.9rem;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-weight: 700;
  line-height: 1.2;
}

.seg input:checked + span {
  border-color: var(--accent-800);
  background: var(--accent-800);
  color: #fff;
}

.seg input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.seg__a--s { font-size: 0.9rem; }
.seg__a--m { font-size: 1.1rem; }
.seg__a--l { font-size: 1.35rem; }
.seg__a--xl { font-size: 1.65rem; }

/* ################################################################ 7. PAGES */
/* Page-specific styles: home, section pages, Shri Ram Shalaka. */

/* ---- Home ------------------------------------------------------------------------------ */
/* The hero is ONE card: the welcome (greeting and headline), today's day with the deity it belongs to, the deity's picture
   and the buttons. js/today.js fills in the day; the picture comes from images/today/ (see data/today-data.js).
   Wide screens: text on the left, picture on the right.  Phones: headline, then day and a small picture side by side, then the
   buttons. Without JavaScript only the welcome and the buttons are shown. */
.hero {
  --hero-pad: clamp(1.15rem, 3.4vw, 2.75rem);
  --hero-photo: clamp(13rem, 30vw, 22rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  padding: var(--hero-pad);
  border: 1px solid var(--bhagwa-200);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(46rem 26rem at 100% 0%, rgba(var(--brand-rgb), 0.18), transparent 65%),
    linear-gradient(135deg, var(--bhagwa-50), var(--surface) 64%);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* the day, the note and the picture appear once js/today.js has filled them in (.is-today); without it, or if it fails,
   the hero is the welcome and its two buttons */
.hero__day,
.hero__note,
.hero__photo {
  display: none;
}

.hero.is-today {
  grid-template-columns: minmax(0, 42rem) var(--hero-photo);
  justify-content: center;
  align-items: center;
  column-gap: clamp(1.25rem, 4vw, 3.5rem);
}

.hero.is-today .hero__day,
.hero.is-today .hero__photo {
  display: grid;
}

.hero.is-today .hero__note {
  display: block;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.4rem;
  min-width: 0;
}

.hero__intro {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
}

/* the little pill above the headline (also carries the "good morning, <name>" greeting) */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.35rem 1.05rem;
  border: 1px solid var(--bhagwa-200);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--bhagwa-800);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.hero__badge::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bhagwa-500);
  box-shadow: 0 0 0 4px var(--bhagwa-100);
}

.hero h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.55rem, 0.95rem + 2.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.28;
  color: var(--accent-900);
  text-wrap: balance;
}

/* the one word in the headline that carries the colour */
.grad {
  color: var(--accent-700); /* fallback where gradient text is not supported */
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* today: a saffron bar, then "Today", the weekday, the date */
.hero__day {
  gap: 0.2rem;
  padding-inline-start: 1.1rem;
  border-inline-start: 4px solid var(--bhagwa-500);
}

.hero__eyebrow {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bhagwa-800);
}

.hero__weekday {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3vw, 3.3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent-800);
}

.hero__weekday .bi--stack > .en {
  margin-top: 0.1em;
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  opacity: 1;
}

/* English only: the English line IS the heading, so it takes the heading's size and colour
   (it is the small second line only when the Hindi line sits above it) */
html[data-view="en"] .hero h1 .bi--stack > .en,
html[data-view="en"] .hero__weekday .bi--stack > .en {
  margin-top: 0;
  font-size: 1em;
  font-weight: inherit;
  letter-spacing: normal;
  color: inherit;
}

.hero__date {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.98rem;
  font-weight: 500;
}

.hero__note {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* the picture: a tall arch (like a temple niche) with a saffron rim and a soft glow. It never moves or changes by itself. */
.hero__photo {
  position: relative;
  gap: 0;
  justify-items: center;
  margin: 0;
}

.hero__photo::before {
  content: "";
  position: absolute;
  inset: 4% -12% 8%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), 0.3), transparent);
}

.hero__frame {
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 6px;
  border-radius: 50% 50% 1.25rem 1.25rem / 40% 40% 1.25rem 1.25rem;
  background: linear-gradient(160deg, var(--bhagwa-300), var(--bhagwa-600) 55%, var(--gold-600));
  box-shadow: 0 24px 40px -22px rgba(var(--shadow-rgb), 0.5), 0 0 0 7px rgba(var(--brand-rgb), 0.12);
}

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--bhagwa-50);
  object-fit: cover;
  object-position: 50% 28%;
}

/* the deity's name, resting on the lower edge of the picture */
.hero__caption {
  position: relative;
  width: max-content;
  max-width: calc(100% + 3rem);
  margin-top: -1.3rem;
  padding: 0.3rem 1.1rem;
  border: 1px solid var(--bhagwa-200);
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--bhagwa-800);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 47.99em) {
  .hero {
    --hero-photo: clamp(6.75rem, 34vw, 8.75rem);
  }

  .hero__day {
    padding-inline-start: 0.75rem;
    border-inline-start-width: 3px;
  }

  .hero__weekday {
    font-size: clamp(1.55rem, 8vw, 2.2rem);
  }

  .hero.is-today {
    grid-template-columns: minmax(0, 1fr) var(--hero-photo);
    grid-template-areas:
      "intro intro"
      "day photo"
      "note note"
      "actions actions";
    justify-content: stretch;
    align-items: center;
    gap: 1.1rem 1rem;
  }

  .hero.is-today .hero__text {
    display: contents;
  }

  .hero.is-today .hero__intro { grid-area: intro; }
  .hero.is-today .hero__day { grid-area: day; }
  .hero.is-today .hero__note { grid-area: note; }
  .hero.is-today .hero__actions { grid-area: actions; }
  .hero.is-today .hero__photo { grid-area: photo; }

  .hero__frame {
    padding: 4px;
  }

  .hero__caption {
    display: none;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* The big rounded card holding the nine section cards */
.sitemap {
  margin: clamp(1rem, 3vw, 1.75rem) 0 1.75rem;
  padding: clamp(0.9rem, 2.5vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.sitemap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin: 0 0.3rem 1rem;
}

.sitemap__head h2 {
  margin: 0;
}

.sitemap__hint {
  max-width: 28rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
}

/* On phones the cards become an app launcher: coloured icon + name, three to a row. The pills are in the bottom sheets. */
@media (max-width: 40em) {
  .sitemap {
    margin-inline: -0.25rem;
    padding: 0.85rem 0.65rem;
    border-radius: var(--radius-lg);
  }

  .sitemap__hint {
    display: none;
  }

  .scards--home .scard {
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 0.3rem 0.7rem;
    text-align: center;
  }

  .scards--home .scard__top {
    flex-direction: column;
    gap: 0.35rem;
  }

  .scards--home .scard__desc,
  .scards--home .pills {
    display: none;
  }

  .scards--home .scard__title {
    margin: 0;
    font-size: 1.02em;
  }

  .scards--home .scard .chip {
    --cs: 2.6rem;
  }
}

.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1.25rem;
  align-items: center;
  margin: 0 0 1.5rem;
  padding: 1.25rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sec-tint-2), var(--surface) 70%);
  box-shadow: var(--shadow-sm);
}

.feature__logo {
  width: 5.2rem;
  height: 5.2rem;
}

.feature h2 {
  margin: 0 0 0.3rem;
  font-size: 1.45em;
}

.feature p {
  margin: 0 0 0.8rem;
}

.feature__body {
  min-width: 0;
}

@media (max-width: 30em) {
  .feature {
    grid-template-columns: 1fr;
  }

  .feature__logo {
    width: 4rem;
    height: 4rem;
  }
}

.points {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.points li {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border-inline-start: 5px solid var(--sec);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--sec-tint);
  box-shadow: var(--shadow-sm);
}

.points strong {
  color: var(--sec-ink);
  font-size: 1.02em;
}

.points span {
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.55;
}

/* ---- Section pages ("coming soon" and listings) --------------------------------------------- */
.soon-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius);
  background: var(--sec-tint);
}

.soon-banner .icon {
  margin-top: 0.2rem;
  color: var(--sec-icon);
}

.soon-banner p {
  margin: 0;
}

.group-title {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--font-body);
  font-size: 1.02em;
  font-weight: 700;
  color: var(--accent-800);
}

/* ---- Shri Ram Shalaka ----------------------------------------------------------------------- */
.app-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

.app-head__logo {
  width: min(7.5rem, 40vw);
  margin: 0 auto 0.5rem;
  filter: drop-shadow(0 8px 18px rgba(var(--shadow-rgb), 0.18));
}

.app-head h1 {
  margin-bottom: 0.25rem;
}

.matrix-section {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.matrix-info {
  margin: 0 0 1.25rem;
  padding: 1rem 1.15rem;
  border-inline-start: 5px solid var(--bhagwa-500);
  border-radius: var(--radius-sm);
  background: var(--bhagwa-50);
  text-align: center;
}

.matrix-info p {
  margin: 0 0 0.3rem;
}

.matrix-info > :last-child {
  margin-bottom: 0;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 3px;
  max-width: 54rem;
  margin: 0 auto;
  padding: 6px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--bhagwa-500), var(--bhagwa-400));
}

.matrix-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: var(--accent-900);
  font: inherit;
  font-size: clamp(0.56rem, 2.5vw, 0.95rem);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s, background-color 0.12s;
}

.matrix-cell:hover,
.matrix-cell:focus-visible {
  position: relative;
  z-index: 2;
  background: var(--bhagwa-200);
  box-shadow: var(--shadow);
  transform: scale(1.14);
}

.matrix-cell:focus-visible {
  outline: 3px solid var(--accent-900);
  outline-offset: 1px;
}

/* After a square is chosen: the chart is locked and the 25 squares of the 9th-letter walk light up,
   numbered in the order they are counted. The first letter of the chaupai is ringed. */
.matrix-grid.is-locked .matrix-cell {
  cursor: default;
}

.matrix-grid.is-locked .matrix-cell:not(.is-walk) {
  opacity: 0.4;
}

.matrix-grid.is-locked .matrix-cell:hover:not(.is-walk) {
  transform: none;
  box-shadow: none;
  background: #fff;
}

.matrix-cell.is-walk {
  background: var(--bhagwa-200);
  box-shadow: inset 0 0 0 2px var(--bhagwa-600);
  animation: pop 0.25s ease-out;
}

.matrix-cell.is-start {
  background: var(--bhagwa-500);
  box-shadow: inset 0 0 0 2px var(--accent-900);
}

.matrix-cell.is-chosen {
  background: var(--accent-700);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent-900);
  z-index: 1;
}

.matrix-cell[data-step]::after {
  content: attr(data-step);
  position: absolute;
  top: 0;
  inset-inline-start: 1px;
  font-size: 0.4rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.85;
}

@keyframes pop {
  from {
    transform: scale(0.7);
  }
  to {
    transform: none;
  }
}

@media (max-width: 30em) {
  /* the numbers would be unreadably small on the narrowest phones: the strip below lists them */
  .matrix-cell[data-step]::after {
    display: none;
  }
}

@media (max-width: 40em) {
  /* Give the 15-column chart the full phone width */
  .matrix-section {
    margin-inline: -1rem;
    padding-inline: 0.5rem;
    border-inline: 0;
    border-radius: 0;
  }

  .matrix-grid {
    gap: 2px;
    padding: 4px;
  }
}

.result-section {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.result-section[hidden] {
  display: none;
}

.result-section.show {
  animation: rise 0.4s ease-out;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.walk-box {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bhagwa-50);
}

.walk-intro {
  margin: 0 0 0.75rem;
}

.walk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.walk__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.15rem 0.1rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.walk__no {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-muted);
}

.walk__ch {
  font-family: var(--font-display);
  font-size: calc(1.3rem * var(--read-scale));
  line-height: 1.4;
  color: var(--accent-800);
}

.walk__item.is-first {
  border-color: var(--accent-700);
}

.walk__item.is-start {
  border-color: var(--bhagwa-600);
  background: var(--bhagwa-200);
  box-shadow: 0 0 0 2px var(--bhagwa-600);
}

.walk__item.is-start::before {
  content: "▾";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--bhagwa-800);
}

.walk-note {
  margin: 0;
  color: var(--text-muted);
}

.chaupai-box {
  margin: 1rem 0;
  padding: 1.25rem 1.35rem;
  border-inline-start: 6px solid var(--bhagwa-500);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--bhagwa-50), var(--bhagwa-100));
}

.chaupai-box h3 {
  margin-bottom: 0.6rem;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 700;
  color: var(--bhagwa-800);
}

.chaupai-text {
  white-space: pre-line; /* the two lines of the chaupai, as in print */
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.45em;
  line-height: 1.8;
  color: var(--accent-800);
}

.chaupai-translation {
  margin: 0;
  color: var(--text-muted);
  font-style: italic;
}

.result-block {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--accent-50);
}

.result-block h3 {
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  font-size: 1em;
  font-weight: 700;
}

.result-block p {
  margin: 0 0 0.4rem;
}

.result-block > :last-child {
  margin-bottom: 0;
}

.result-actions {
  margin-top: 1.25rem;
  text-align: center;
}

.steps {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 1.1rem 1.2rem;
  border-inline-start: 4px solid var(--bhagwa-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.step__no {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.9em;
  line-height: 1.2;
  color: var(--bhagwa-700);
}

.step h3 {
  margin: 0.1rem 0 0.35rem;
  font-size: 1.12em;
}

.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95em;
  line-height: 1.6;
}

.step p + p {
  margin-top: 0.3rem;
}

/* ---- Plain page header (text pages, design preview) -------------------------------------------- */
.page-head--plain {
  display: block;
}

/* ---- Tables ---------------------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.table th,
.table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.table th {
  background: var(--accent-50);
  color: var(--accent-800);
}

/* ---- Reading pages (an aarti, later a mantra or a thought): ONE centred column --------------------------------------------
   poster (picture, title, share) -> strip of neighbouring pages -> facts -> mantra -> lyrics -> previous / next.
   Everything takes its colour from the section (data-sec), so another section's page is recoloured by its <body>. */
.content--read {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.poster {
  padding: 0.25rem 0 0.5rem;
  text-align: center;
}

.poster__art {
  position: relative;
  width: min(15rem, 54vw);
  aspect-ratio: 1;
  margin: 0.75rem auto 1.75rem;
}

/* a soft glow behind the picture, and a thin ring around it */
.poster__art::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--sec-tint-2) 0%, var(--sec-tint) 58%, transparent 74%);
}

.poster__art::after {
  content: "";
  position: absolute;
  inset: -7%;
  border: 1.5px dashed var(--sec-line);
  border-radius: 50%;
  animation: ring-turn 90s linear infinite;
}

/* short laptop screens: a smaller picture, so the title and the buttons are in the first view */
@media (min-width: 62em) and (max-height: 820px) {
  .poster__art {
    width: 11.5rem;
    margin-bottom: 1.4rem;
  }
}

.poster__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* a photograph that is not square is cropped to the circle, not squashed */
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.18);
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  50% {
    transform: translateY(-6px);
  }
}

@keyframes ring-turn {
  to {
    transform: rotate(360deg);
  }
}

.poster--compact {
  padding-top: 0.5rem;
}

.poster--compact .poster__title {
  margin-top: 0.75rem;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.kicker::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sec);
}

.poster__title {
  margin: 0.9rem 0 0.4rem;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem);
  line-height: 1.25;
}

.poster__lead {
  max-width: 34rem;
  margin: 0.75rem auto 1.25rem;
  font-size: 1.05em;
}

.poster__lead .bi--stack > .en {
  margin-top: 0.2rem;
  font-size: 0.86em;
  color: var(--text-muted);
}

.poster__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 0;
}

/* cards with a round picture: the nine days of Navratri, the two aartis on the Aarti page */
.deck {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.deck > li {
  display: flex;
}

.deck__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.1rem 0.8rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.deck__card:hover {
  border-color: var(--sec);
  box-shadow: var(--shadow);
  color: var(--text);
  transform: translateY(-3px);
}

.deck__img {
  width: min(100%, 8.5rem);
  aspect-ratio: 1;
  margin-bottom: 0.45rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 22px rgba(var(--shadow-rgb), 0.16);
}

.deck__day {
  padding: 0.15rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  font-size: 0.78em;
  font-weight: 600;
}

.deck__name {
  text-wrap: balance;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.35;
}

.deck__name .bi--stack > .en {
  font-size: 0.74em;
  font-weight: 500;
}

.deck__blurb {
  color: var(--text-muted);
  font-size: 0.85em;
  line-height: 1.45;
}

.deck__blurb .bi--stack > .en {
  font-size: 0.92em;
}

/* two big cards (the Aarti page) */
.deck--feature {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deck--feature .deck__img,
.deck--feature .mosaic {
  width: min(100%, 13rem);
}

.deck--feature .deck__name {
  font-size: 1.2em;
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
  aspect-ratio: 1;
  margin-bottom: 0.45rem;
}

.mosaic img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 47.99em) {
  .deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .deck--feature {
    grid-template-columns: minmax(0, 1fr);
  }

  /* nine cards in two columns: the last one sits in the middle */
  .deck--nine > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.375rem);
  }
}

/* the neighbours of this page (filled in by pages.js from the menu) */
.daystrip {
  margin: 1.5rem 0 0;
}

.daystrip__label {
  margin: 0 0 0.45rem;
  color: var(--text-muted);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}

.daystrip__list {
  position: relative;
  display: flex;
  gap: 0.45rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.3rem 0.3rem 0.7rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.daystrip__item {
  display: grid;
  place-items: center;
  min-width: 3.9rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  scroll-snap-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.daystrip__item:hover {
  border-color: var(--sec);
  color: var(--sec-ink);
  box-shadow: var(--shadow-sm);
}

.daystrip__item[aria-current] {
  border-color: var(--sec);
  background: var(--sec);
  color: var(--sec-on);
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.16);
}

.daystrip__name {
  display: block;
  white-space: nowrap;
}

.daystrip__name .bi--stack > .en {
  font-size: 0.74em;
  font-weight: 400;
  opacity: 0.85;
}

/* four facts in one white card */
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1.5rem 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  list-style: none;
  overflow: hidden;
}

.facts li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 0.6rem 1.05rem;
  text-align: center;
}

.facts li + li::before {
  content: "";
  position: absolute;
  inset-block: 0.9rem;
  inset-inline-start: 0;
  width: 1px;
  background: var(--line);
}

.facts__icon {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 0.2rem;
  border-radius: 0.75rem;
  background: var(--sec-tint-2);
  color: var(--sec-icon);
}

.facts__label {
  color: var(--text-muted);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.facts__value {
  color: var(--heading);
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.facts .bi--stack > .en {
  font-size: 0.82em;
  font-weight: 400;
  color: var(--text-muted);
  opacity: 1;
}

@media (max-width: 29.99em) {
  .reader__btn {
    padding-inline: 0.55rem;
    font-size: 0.8em;
  }

  .reader__size .reader__btn {
    width: 2.25rem;
  }
}

@media (max-width: 47.99em) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts li:nth-child(odd)::before {
    display: none;
  }

  .facts li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .facts li:nth-child(n + 3)::before {
    inset-block: 0.9rem;
  }
}

.mantra {
  margin: 1.5rem 0;
  padding: 1.5rem 1.25rem 1.4rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sec-tint) 0%, var(--surface) 70%);
  text-align: center;
}

.mantra__label {
  margin: 0 0 0.5rem;
  color: var(--sec-ink);
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.mantra__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--heading);
}

.mantra__roman {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* the lyrics */
.lyrics {
  margin: 1.5rem 0;
  padding: 1.1rem 1.25rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}

.lyrics__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: start;
}

.lyrics__title {
  margin: 0;
  font-size: 1.3em;
}

.lyrics__title .bi--stack > .en {
  font-size: 0.6em;
}

/* reading controls: language and text size (the same choice as the "Language & size" dialog) */
.reader {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.reader__seg {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-pill);
  background: var(--sec-tint);
}

.reader__btn {
  min-height: 2.25rem;
  padding: 0.2rem 0.75rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
}

.reader__btn:hover {
  color: var(--sec-ink);
}

.reader__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--sec-ink);
  box-shadow: var(--shadow-sm);
}

.reader__size {
  display: inline-flex;
  gap: 0.25rem;
}

.reader__size .reader__btn {
  display: grid;
  place-items: center;
  width: 2.5rem;
  padding: 0;
  border: 1px solid var(--sec-line);
  background: var(--sec-tint);
}

.reader__size .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.stanza {
  position: relative;
  padding: 1.5rem 0 1.4rem;
}

/* a small dot between stanzas */
.stanza + .stanza::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  width: 0.4rem;
  height: 0.4rem;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--sec-line);
}

.stanza__hi {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 500;
  line-height: 1.95;
}

@media (min-width: 48em) {
  .stanza__hi {
    font-size: 1.6em;
  }
}

.stanza__rom {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.75;
}

.lyrics__end {
  margin: 0.5rem 0 1.5rem;
  color: var(--sec-ink);
  font-family: var(--font-display);
  font-size: 1.15em;
  font-weight: 600;
}

/* ---- Share dialog (js/share.js): preview, colour choice, sender name, share buttons -------------------------------------- */
.share {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 47.99em) {
  .share {
    grid-template-columns: minmax(0, 1fr);
  }

  .share__preview {
    max-width: 17rem;
    margin-inline: auto;
  }
}

.share__preview canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 1350;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.share__options {
  display: grid;
  gap: 1rem;
}

.share__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.share__themes legend {
  float: none;
  width: 100%;
  margin-bottom: 0.4rem;
  font-size: 1em;
  font-weight: 700;
  color: var(--heading);
}

.share__theme {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  cursor: pointer;
}

.share__theme input {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.share__swatch {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}

.share__theme input:checked + .share__swatch {
  border-color: var(--accent-800);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent-800);
}

.share__theme input:focus-visible + .share__swatch {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.share__theme-name {
  font-size: 0.78em;
  color: var(--text-muted);
}

.share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.share__label {
  margin: 0;
  font-weight: 700;
  color: var(--heading);
}

.share__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share__icon {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  min-width: 4.5rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent-800);
  font: inherit;
  font-size: 0.8em;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.share__icon:hover {
  border-color: var(--bhagwa-500);
  background: var(--bhagwa-50);
  color: var(--accent-900);
}

.share__icon .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.share__status {
  min-height: 1.4em;
  margin: 0;
  color: var(--accent-800);
  font-weight: 700;
}

/* ---- Mantra pages (pages/mantra/...) and the poster studio (js/mantra.js) --------------------------------------------------
   A mantra page is a reading page: the deity's picture, four facts, a strip that jumps to a mantra, then one card per mantra
   (Sanskrit, Roman letters, meaning in Hindi and English, when it is chanted, "Make a poster" and "Copy").
   Everything takes its colour from the section (data-sec="mantra": teal). The Hindi / English / Both choice hides the Sanskrit and Hindi
   meaning (.hi) or the Roman letters and English meaning (.en). */
.content--mantra {
  max-width: 48rem;
}

.mlist {
  margin: 1.75rem 0 1.25rem;
}

.mlist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.9rem;
}

.mlist__title {
  margin: 0;
  font-size: 1.3em;
}

.mlist__title .bi--stack > .en {
  font-size: 0.6em;
}

/* the strip that jumps to a mantra: numbered pills, scrolls sideways when there are many */
.mjump {
  margin: 0 -0.25rem 1.1rem;
}

.mjump__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0.2rem 0.25rem 0.6rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.mjump__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-pill);
  background: var(--sec-tint);
  color: var(--sec-ink);
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.mjump__link:hover {
  border-color: var(--sec);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  box-shadow: var(--shadow-sm);
}

.mjump__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--sec);
  color: var(--sec-on);
  font-size: 0.82em;
  font-weight: 700;
}

.mcards {
  display: grid;
  gap: 1.25rem;
}

.mcard {
  position: relative;
  padding: 1.5rem 1.15rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* a coloured edge along the top of every card */
.mcard::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 0.35rem;
  background: linear-gradient(90deg, var(--sec), var(--sec-tint-2));
}

/* a mantra opened from a link (pages/mantra/bhagwan/ganesh.html#vakratunda-mahakaya) is outlined */
.mcard:target {
  border-color: var(--sec);
  box-shadow: 0 0 0 3px var(--sec-line), var(--shadow);
}

.mcard__head {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.mcard__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  font-weight: 700;
}

.mcard__titles {
  min-width: 0;
}

.mcard__name {
  margin: 0;
  font-size: 1.1em;
  line-height: 1.3;
}

.mcard__name .bi--stack > .en {
  margin-top: 0.1em;
  font-size: 0.72em;
}

.mcard__tag {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
  font-size: 0.78em;
  font-weight: 600;
}

/* the mantra itself: large, centred, on a softly tinted panel. With "English" chosen the Roman letters take its place. */
.mcard__sa,
html[data-view="en"] .mcard__rom {
  margin: 0;
  padding: 1.15rem 0.75rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sec-tint) 0%, var(--surface) 80%);
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.75;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 48em) {
  .mcard__sa,
  html[data-view="en"] .mcard__rom {
    font-size: 1.6em;
  }
}

html[data-view="en"] .mcard__rom {
  font-size: 1.15em;
}

.mline {
  display: block;
}

.mcard__rom {
  margin: 0.65rem 0 0;
  color: var(--text-muted);
  font-size: 0.95em;
  line-height: 1.7;
  text-align: center;
}

html[data-view="en"] .mcard__rom {
  color: var(--heading);
}

.mcard__meaning {
  margin-top: 1rem;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}

.mcard__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  color: var(--sec-ink);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mcard__label .icon {
  width: 1rem;
  height: 1rem;
}

.mcard__mean {
  margin: 0;
  line-height: 1.75;
}

.mcard__mean.en {
  color: var(--text-muted);
  font-size: 0.93em;
}

/* both languages: a faint line between the Hindi and the English meaning */
html[data-view="both"] .mcard__mean.hi + .mcard__mean.en {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line-strong);
}

.mcard__when {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.88em;
}

.mcard__when .icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: var(--sec-icon);
}

.mcard__when .bi--stack > .en {
  font-size: 0.9em;
}

.mcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.mcard__actions .btn {
  flex: 1 1 9rem;
}

@media (min-width: 40em) {
  .mcard {
    padding-inline: 1.5rem;
  }

  .mcard__actions .btn {
    flex: 0 0 auto;
  }
}

.mnote {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.86em;
}

.mnote .icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--sec-icon);
}

/* a short message after "Copy" */
.mtoast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 1090;
  display: flex;
  justify-content: center;
  padding-inline: 1rem;
  pointer-events: none;
}

@media (min-width: 62em) {
  .mtoast {
    inset-block-end: 1.5rem;
  }
}

.mtoast > span {
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-900);
  box-shadow: var(--shadow-lg);
  color: var(--bhagwa-50);
  font-size: 0.92em;
  font-weight: 600;
}

.mtoast:empty {
  display: none;
}

/* ---- The poster studio: live picture on the left, five short steps on the right, the share buttons always in view ---------- */
.pst .modal-body {
  padding: 1rem 1.25rem;
}

.pst__grid {
  display: grid;
  grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
  gap: 1.25rem 2rem;
  align-items: start;
}

.pst__preview {
  position: sticky;
  inset-block-start: 0;
}

.pst__frame {
  padding: 0.7rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-lg);
  background: var(--sec-tint);
}

.pst__frame canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 17rem);
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.pst__hint {
  min-height: 1.3em;
  margin: 0.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.8em;
  line-height: 1.45;
  text-align: center;
}

.pst__tip {
  display: none;
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 62em) {
  .pst__tip {
    display: block;
  }
}

.pst__sec {
  min-width: 0;
  min-inline-size: 0;   /* a <fieldset> would otherwise be as wide as its widest content */
  margin: 0 0 1rem;
  padding: 0 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.pst__sec:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.pst__h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  float: none;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0;
  color: var(--heading);
  font-family: var(--font-body);
  font-size: 0.95em;
  font-weight: 700;
}

.pst__step {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--sec);
  color: var(--sec-on);
  font-size: 0.82em;
  font-weight: 700;
}

/* the mantras, as pills in a row that scrolls sideways */
.pst__picker {
  display: flex;
  gap: 0.45rem;
  margin: 0 -0.1rem;
  padding: 0.2rem 0.1rem 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.pst__pick,
.pst__chip,
.pst__seg label,
.pst__size {
  position: relative;
  cursor: pointer;
}

.pst__pick {
  flex: none;
  scroll-snap-align: start;
}

.pst__pick input,
.pst__chip input,
.pst__seg input,
.pst__size input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pst__pick > span,
.pst__chip > span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.85rem 0.3rem 0.4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 0.86em;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.pst__pick .bi {
  display: inline-block;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.pst__pick .n {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  font-size: 0.85em;
}

.pst__pick input:checked + span {
  border-color: var(--sec);
  background: var(--sec);
  color: var(--sec-on);
}

.pst__pick input:checked + span .n {
  background: var(--surface);
}

.pst__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pst__chip > span {
  padding-inline: 0.9rem;
}

.pst__chip input:checked + span {
  border-color: var(--sec);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.pst__chip input:checked + span::before {
  content: "\2713";
  font-weight: 700;
}

.pst__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.pst__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
}

/* a small two-way switch (short / full meaning) */
.pst__seg {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-pill);
  background: var(--sec-tint);
}

.pst__seg > label > span {
  display: block;
  min-height: 2.1rem;
  padding: 0.25rem 0.85rem;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: 0.84em;
  font-weight: 600;
  line-height: 1.6;
}

.pst__seg input:checked + span {
  background: var(--surface);
  color: var(--sec-ink);
  box-shadow: var(--shadow-sm);
}

.pst__seg input:disabled + span,
.pst__seg:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.pst__seg input:focus-visible + span,
.pst__pick input:focus-visible + span,
.pst__chip input:focus-visible + span,
.pst__size input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* the size: a little picture of each shape */
.pst__sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.pst__size > span {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  height: 100%;
  padding: 0.55rem 0.4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.pst__size input:checked + span {
  border-color: var(--sec);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.pst__shape {
  display: block;
  margin-bottom: 0.1rem;
  border: 2px solid currentColor;
  border-radius: 0.3rem;
}

.pst__shape--post {
  width: 1.3rem;
  height: 1.65rem;
}

.pst__shape--story {
  width: 1.05rem;
  height: 1.85rem;
}

.pst__shape--square {
  width: 1.55rem;
  height: 1.55rem;
}

.pst__size small {
  font-size: 0.9em;
  font-weight: 400;
  opacity: 0.85;
}

/* the share buttons: always at the bottom of the dialog */
.pst__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
}

.pst__status {
  flex: 1 0 100%;
  min-height: 1.3em;
  margin: 0;
  color: var(--accent-800);
  font-size: 0.86em;
  font-weight: 700;
}

.pst__bar .btn {
  flex: 0 0 auto;
}

.pst__bar .btn-brand {
  flex: 1 1 auto;
}

@media (min-width: 62em) {
  .pst__bar {
    flex-wrap: nowrap;
  }

  .pst__status {
    flex: 1 1 auto;
    order: -1;
  }

  .pst__bar .btn-brand {
    flex: 0 0 auto;
  }
}

/* phones: the dialog is the whole screen; the picture stays at the top while the steps scroll underneath it */
@media (max-width: 61.99em) {
  .pst .modal-body {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.9rem 0;
    overflow: hidden;
  }

  .pst__grid {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    min-height: 0;
  }

  .pst__preview {
    position: static;
    flex: none;
  }

  .pst__frame {
    padding: 0.45rem;
  }

  .pst__frame canvas {
    max-height: 33vh;
  }

  .pst__hint:empty {
    display: none;
  }

  .pst__controls {
    flex: 1;
    min-height: 0;
    padding: 0.4rem 0.1rem 1rem;
    overflow-y: auto;
  }

  .pst__bar {
    padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  }

  .pst__bar .btn {
    padding-inline: 0.9rem;
  }

  .pst__bar .btn:not(.btn-brand) .pst__lbl {
    display: none;
  }
}

/* ---- Thought pages (pages/suvichar/...: Wisdom of the Gita) ------------------------------------------------------------------
   A title with the collection's emblem, "Thought of the day" (one dark card), a toolbar (search, theme chips, language and text size) and a grid
   of cards, one for every thought. A card takes its colour from a section palette (data-sec="apps|mantra|aarti|audios|festivals|tirth" - set by
   tools/thought-pages.mjs from the thought's theme), so every text / background pair on it is one that tools/check-theme.mjs already checks.
   The dark card uses the night tokens of the Jaap counter. The language choice hides the Sanskrit and the Hindi thought (.hi) or the Roman
   letters and the English thought (.en). */
.content--thoughts {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
}

.thead {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  margin: 0.5rem 0 1.4rem;
}

.thead__img {
  flex: none;
  width: clamp(4.5rem, 14vw, 6.5rem);
  aspect-ratio: 1;
  border: 3px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sec-line), 0 14px 30px rgba(var(--shadow-rgb), 0.22);
  object-fit: cover;
}

.thead__title {
  margin: 0.55rem 0 0.2rem;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.2;
}

.thead__lead {
  max-width: 42rem;
  margin: 0.5rem 0 0;
  color: var(--text-muted);
}

.thead__lead .bi--stack > .en {
  margin-top: 0.2rem;
  font-size: 0.88em;
}

@media (max-width: 47.99em) {
  /* phones: the emblem beside the kicker and the title, the lead under both */
  .thead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.9rem;
  }

  .thead__text {
    display: contents;
  }

  .thead__img {
    grid-row: 1 / span 2;
    width: 4.25rem;
  }

  .thead .kicker {
    grid-column: 2;
    justify-self: start;
  }

  .thead__title {
    grid-column: 2;
    margin: 0;
    font-size: 1.6rem;
  }

  .thead__lead {
    grid-column: 1 / -1;
    margin-top: 0.25rem;
  }
}

/* ---- Thought of the day ---------------------------------------------------------------------------------------------------- */
.thero {
  position: relative;
  isolation: isolate;
  margin: 0 0 1.75rem;
  padding: clamp(1.15rem, 2.6vw + 0.5rem, 2.25rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(80% 110% at 100% 0%, rgba(var(--brand-rgb), 0.34) 0%, transparent 62%),
    radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--violet-600) 30%, transparent) 0%, transparent 70%),
    linear-gradient(155deg, var(--night-900) 0%, var(--night-800) 60%, var(--accent-800) 140%);
  box-shadow: var(--shadow-lg);
  color: var(--bhagwa-50);
  overflow: hidden;
}

/* the emblem, large and faint behind the words */
.thero__art {
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline-end: clamp(-3rem, -4vw, -1rem);
  z-index: -1;
  width: clamp(11rem, 30vw, 19rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.3;
  mask-image: radial-gradient(circle, black 55%, transparent 72%);
  pointer-events: none;
  animation: ring-turn 200s linear infinite;
}

.thero :focus-visible {
  outline: 3px solid var(--bhagwa-300);
  outline-offset: 3px;
}

.thero__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.thero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.35rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--bhagwa-300) 40%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bhagwa-400) 16%, transparent);
  color: var(--gold-200);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.thero__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bhagwa-400);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bhagwa-400) 28%, transparent);
}

.thero__next {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.3rem 0.95rem;
  border: 1.5px solid color-mix(in srgb, var(--bhagwa-50) 38%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--bhagwa-50);
  font: inherit;
  font-size: 0.86em;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s;
}

.thero__next:hover {
  background: color-mix(in srgb, var(--bhagwa-50) 14%, transparent);
}

.thero__next .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.4s;
}

.thero__next:active .icon {
  transform: rotate(180deg);
}

.thero__body.is-in {
  animation: tfade 0.45s ease both;
}

@media (max-width: 47.99em) {
  /* phones: "Another thought" is a round button with just its icon, so the date has room; WhatsApp is an icon too */
  .thero__next {
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }

  .thero__next .bi {
    display: none;
  }

  .thero__actions [data-wa] .tbtn__lbl {
    display: none;
  }
}

@keyframes tfade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.thero__quote {
  margin: 0;
}

/* the opening quotation mark */
.thero__quote::before {
  content: "\201C";
  display: block;
  height: 2.1rem;
  margin-bottom: -0.1rem;
  color: color-mix(in srgb, var(--bhagwa-400) 70%, transparent);
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.thero__thought {
  margin: 0;
}

.thero__thought.hi {
  color: var(--bhagwa-50);
  font-family: var(--font-display);
  font-size: calc(clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem) * var(--read-scale));
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.thero__thought.en {
  margin-top: 0.7rem;
  color: var(--bhagwa-200);
  font-size: calc(clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem) * var(--read-scale));
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

/* English only: the English line is the thought */
html[data-view="en"] .thero__thought.en {
  margin-top: 0;
  color: var(--bhagwa-50);
  font-family: var(--font-display);
  font-size: calc(clamp(1.25rem, 1.05rem + 1vw, 1.75rem) * var(--read-scale));
  font-weight: 700;
  line-height: 1.4;
}

.thero__shloka {
  margin: 1.4rem 0 1.1rem;
  padding: 0.9rem 1.1rem;
  border-inline-start: 3px solid var(--bhagwa-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: color-mix(in srgb, var(--bhagwa-50) 7%, transparent);
}

.thero__sa {
  margin: 0;
  color: var(--bhagwa-100);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.85;
}

.thero__rom {
  margin: 0.35rem 0 0;
  color: var(--bhagwa-300);
  font-size: 0.88em;
  line-height: 1.7;
}

html[data-view="en"] .thero__rom {
  margin: 0;
  color: var(--bhagwa-100);
  font-size: 1rem;
}

.thero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
}

.thero__ref,
.thero__theme {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.8em;
  font-weight: 700;
}

.thero__ref {
  border: 1px solid color-mix(in srgb, var(--bhagwa-300) 45%, transparent);
  color: var(--bhagwa-100);
}

.thero__theme {
  background: var(--bhagwa-500);
  color: var(--on-brand);
}

.thero__ref .icon,
.thero__theme .icon {
  width: 1rem;
  height: 1rem;
}

.thero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.thero__share {
  flex: 1 1 100%;
}

/* phones and tablets: the big button on its own row, the other three share the next row */
.thero__actions .tbtn {
  flex: 1 1 0;
  min-width: 0;
}

@media (min-width: 62em) {
  .thero__share {
    flex: 0 0 auto;
  }

  .thero__actions .tbtn {
    flex: 0 0 auto;
  }
}

/* ---- the buttons of a thought: Save (a heart), WhatsApp, Copy, Share ------------------------------------------------------------- */
.tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.3rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--sec-ink, var(--accent-800));
  font: inherit;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.tbtn:hover {
  border-color: var(--sec, var(--accent-700));
  background: var(--sec-tint, var(--accent-50));
  color: var(--sec-ink, var(--accent-900));
  transform: translateY(-1px);
}

.tbtn:focus-visible,
.tchip:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tbtn .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

/* the label: Hindi with the English under it (the "both" view), or one of them */
.tbtn__lbl .bi {
  display: inline-flex;
  flex-direction: column;
  text-align: start;
}

.tbtn__lbl .bi > .en {
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.85;
}

html[data-view="both"] .tbtn__lbl .bi > .hi + .en::before {
  content: none;
}

/* Share on a card: filled with the card's dark ink */
.tbtn--main {
  border-color: var(--sec-ink);
  background: var(--sec-ink);
  color: var(--surface);
}

.tbtn--main:hover {
  border-color: var(--sec-ink);
  background: var(--sec-ink);
  color: var(--surface);
  box-shadow: 0 8px 18px rgba(var(--shadow-rgb), 0.25);
}

.tbtn--save[aria-pressed="true"] {
  border-color: var(--rose-500);
  background: var(--rose-50);
  color: var(--rose-700);
}

.tbtn--save[aria-pressed="true"] .icon {
  fill: currentColor;
  animation: tpop 0.35s ease;
}

@keyframes tpop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.35);
  }

  100% {
    transform: scale(1);
  }
}

/* on the dark card */
.tbtn--dark {
  border-color: color-mix(in srgb, var(--bhagwa-50) 38%, transparent);
  background: transparent;
  color: var(--bhagwa-50);
}

.tbtn--dark:hover {
  border-color: var(--bhagwa-300);
  background: color-mix(in srgb, var(--bhagwa-50) 14%, transparent);
  color: var(--bhagwa-50);
}

.tbtn--dark.tbtn--save[aria-pressed="true"] {
  border-color: var(--rose-500);
  background: color-mix(in srgb, var(--rose-500) 22%, transparent);
  color: var(--rose-200);
}

/* ---- the toolbar: search, language and size, the theme chips ------------------------------------------------------------------- */
.tlist {
  margin: 0 0 1rem;
}

.tbar {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}

.tbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.tbar__search {
  position: relative;
  flex: 1 1 15rem;
  max-width: 28rem;
  margin: 0;
}

.tbar__search .icon {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.95rem;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.tbar__search input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.55rem 1rem 0.55rem 2.75rem;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
}

.tbar__search input:focus {
  border-color: var(--accent-700);
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.tbar__chips {
  display: flex;
  gap: 0.5rem;
  margin: 0 -0.25rem;
  padding: 0.2rem 0.25rem 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, black 0, black calc(100% - 1.5rem), transparent 100%);
}

.tbar__chips::-webkit-scrollbar {
  display: none;
}

@media (min-width: 62em) {
  .tbar__chips {
    flex-wrap: wrap;
    overflow: visible;
    mask-image: none;
  }
}

.tchip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.3rem 0.8rem 0.3rem 0.9rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--sec-ink);
  font: inherit;
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.tchip .icon {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--sec-icon);
}

.tchip:hover {
  border-color: var(--sec);
  background: var(--sec-tint);
}

.tchip__n {
  min-width: 1.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--sec-tint-2);
  color: var(--sec-ink);
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
}

/* the chosen chip is filled with its dark ink */
.tchip[aria-pressed="true"] {
  border-color: var(--sec-ink);
  background: var(--sec-ink);
  color: var(--surface);
}

.tchip[aria-pressed="true"] .icon {
  color: inherit;
}

.tchip[aria-pressed="true"] .tchip__n {
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  color: var(--surface);
}

.tcount {
  margin: 0 0 0.85rem;
  color: var(--text-muted);
  font-size: 0.86em;
  font-weight: 600;
}

/* ---- the cards -------------------------------------------------------------------------------------------------------------------- */
.tcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.5rem), 1fr));
  gap: 1.1rem;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.15rem 1rem;
  border: 1px solid var(--sec-line);
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--sec-tint) 0%, var(--surface) 70%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  animation: tfade 0.4s ease both;
}

.tcard[hidden],
.tempty[hidden] {
  display: none;
}

.tcard:hover {
  border-color: var(--sec);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* a thought opened from a link (gita.html#gita-2-47) is outlined */
.tcard:target {
  border-color: var(--sec);
  box-shadow: 0 0 0 3px var(--sec-line), var(--shadow);
}

.tcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
}

.tcard__theme,
.tcard__ref {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.76em;
  font-weight: 700;
}

.tcard__theme {
  background: var(--sec-tint-2);
  color: var(--sec-ink);
}

.tcard__ref {
  margin-inline-start: auto;
  border: 1px solid var(--sec-line);
  background: var(--surface);
  color: var(--sec-ink);
  text-decoration: none;
}

.tcard__ref:hover {
  border-color: var(--sec);
  color: var(--sec-ink);
}

.tcard__theme .icon,
.tcard__ref .icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--sec-icon);
}

.tcard__quote {
  margin: 0 0 1rem;
  padding-inline-start: 0.95rem;
  border-inline-start: 4px solid var(--sec);
  border-radius: 2px;
}

.tcard__thought {
  margin: 0;
}

.tcard__thought.hi {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.28em;
  font-weight: 600;
  line-height: 1.55;
  text-wrap: balance;
}

.tcard__thought.en {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

html[data-view="en"] .tcard__thought.en {
  margin-top: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: 1.2em;
  font-weight: 600;
}

.tcard__shloka {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--sec-line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.tcard__sa {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.8;
}

.tcard__rom {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.84em;
  line-height: 1.65;
}

html[data-view="en"] .tcard__rom {
  margin: 0;
  color: var(--text);
  font-size: 0.95em;
}

.tcard__more {
  margin: 0 0 0.9rem;
}

.tcard__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0;
  color: var(--sec-ink);
  font-size: 0.88em;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.tcard__more summary::-webkit-details-marker {
  display: none;
}

.tcard__more summary:focus-visible {
  border-radius: 0.4rem;
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.tcard__more summary .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.2s;
}

.tcard__more[open] summary .icon {
  transform: rotate(180deg);
}

.tcard__mean {
  margin: 0.5rem 0 0;
  line-height: 1.75;
}

.tcard__mean.en {
  color: var(--text-muted);
  font-size: 0.93em;
}

.tcard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--sec-line);
}

/* Save on the left; WhatsApp, Copy and Share together on the right */
.tcard__actions .tbtn--save {
  order: 1;
}

.tcard__actions [data-wa] {
  order: 2;
  margin-inline-start: auto;
}

.tcard__actions [data-thought-copy] {
  order: 3;
}

.tcard__actions .tbtn--main {
  order: 4;
}

@media (max-width: 47.99em) {
  /* phones: WhatsApp and Copy are icons, Save and Share keep their words */
  .tcard__actions [data-wa] .tbtn__lbl,
  .tcard__actions [data-thought-copy] .tbtn__lbl {
    display: none;
  }

  .tcard__actions .tbtn {
    padding-inline: 0.8rem;
  }
}

.tempty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 2.5rem 1rem;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--text-muted);
  text-align: center;
}

.tempty .icon {
  width: 2rem;
  height: 2rem;
  color: var(--sec-icon);
}

.tempty__text {
  margin: 0;
}

/* ---- Today's thought (pages/suvichar/aaj-ka-suvichar.html) ------------------------------------------------------------------------
   ONE dark card and nothing else, so that the thought is the first thing on the screen of a phone and of a laptop: the date and, in the top right
   corner, Save (a heart) and Share (a menu: WhatsApp, a poster, copy); then the thought, where it is from, and the verse with its meaning behind one tap.
   js/thoughts.js writes it; tools/thought-pages.mjs writes the first thought of the round for visitors without JavaScript. */
.content--today {
  max-width: 46rem;
}

.thero--today {
  margin-bottom: 1.25rem;
  padding: 0.95rem 1.05rem 0.8rem;
  overflow: visible;                 /* the Share menu may reach out of the card; the picture is clipped by its own wrapper */
}

@media (min-width: 48em) {
  .thero--today {
    padding: 1.3rem 1.75rem 1rem;
  }
}

/* the faint picture behind the card: clipped to the card by a wrapper, so that nothing else in the card is */
.thero__artwrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.thero__artwrap .thero__art {
  inset-block-start: -2rem;
  inset-inline-end: -2.5rem;
  z-index: auto;
  width: clamp(9rem, 26vw, 13rem);
  opacity: 0.2;
}

/* the top row: the date, and in the corner Save and Share */
.tday__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.tday__date {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  color: var(--gold-200);
  font-size: 0.84em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.tday__date .icon {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  color: var(--bhagwa-400);
}

.tday__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
}

/* a round icon button (Save, Share, WhatsApp) */
.tbtn--round {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
}

.tshare__lbl {
  display: none;
}

@media (min-width: 48em) {
  /* wide screens: Share is a pill that says its name */
  .tshare__btn {
    width: auto;
    padding-inline: 1rem;
    border-radius: var(--radius-pill);
  }

  .tshare__lbl {
    display: inline;
  }
}

.tshare__menu {
  min-width: 16rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.tshare__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 0.7rem;
  color: var(--text);
  font-weight: 600;
  text-align: start;
  white-space: normal;
}

.tshare__item .icon {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--sec-icon);
}

.tshare__item .bi > .en {
  color: var(--text-muted);
  font-weight: 500;
  opacity: 1;
}

.tshare__item:hover,
.tshare__item:focus {
  background: var(--sec-tint);
  color: var(--text);
}

.tshare__menu :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

/* the thought: a smaller opening quotation mark, closer to the words */
.thero--today .thero__quote::before {
  height: 1.7rem;
  font-size: 3.4rem;
}

.thero--today .thero__thought.en {
  margin-top: 0.5rem;
}

/* where it is from */
.tday__src {
  margin: 0.85rem 0 0;
}

/* the verse and its meaning, behind one tap */
.tday__more {
  margin-top: 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--bhagwa-300) 22%, transparent);
}

.tday__more > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  color: var(--bhagwa-100);
  font-size: 0.9em;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.tday__more > summary::-webkit-details-marker {
  display: none;
}

.tday__more > summary .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  transition: transform 0.2s;
}

.tday__more[open] > summary .icon {
  transform: rotate(180deg);
}

.tday__more .thero__shloka {
  margin-top: 0.2rem;
}

/* the meaning of the verse */
.thero__mean {
  margin: 0 0 0.4rem;
}

.thero__mean-label {
  margin: 0 0 0.4rem;
  color: var(--gold-200);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.thero__mean-text {
  margin: 0;
  color: var(--bhagwa-100);
  line-height: 1.7;
}

.thero__mean-text.en {
  margin-top: 0.4rem;
  color: var(--bhagwa-200);
  font-size: 0.92em;
}

html[data-view="en"] .thero__mean-text.en {
  margin-top: 0;
  color: var(--bhagwa-100);
  font-size: 1em;
}

/* the chapter-and-verse chip as a link */
.thero__ref--link {
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.thero__ref--link:hover {
  border-color: var(--bhagwa-300);
  background: color-mix(in srgb, var(--bhagwa-50) 12%, transparent);
  color: var(--bhagwa-50);
}

.thero__ref--link .icon:last-child {
  transition: transform 0.15s;
}

.thero__ref--link:hover .icon:last-child {
  transform: translateX(2px);
}

/* without JavaScript: the note above the first thought (it says that this is the first thought of the round, not today's) */
.js .thero__nojs {
  display: none;
}

.thero__nojs {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--bhagwa-300) 40%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bhagwa-400) 14%, transparent);
  color: var(--gold-200);
  font-size: 0.88em;
}

.thero__nojs .icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
}

/* ---- Design preview (pages/design.html) ------------------------------------------------------------------------ */
.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.toggle-row .btn[aria-pressed="true"] {
  border-color: var(--accent-800);
  background: var(--accent-800);
  color: #fff;
}

.swatches {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

.swatch {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.8rem;
  line-height: 1.35;
}

.swatch__chip {
  height: 3.4rem;
}

.swatch__meta {
  padding: 0.4rem 0.55rem;
}

.swatch__name {
  font-weight: 700;
}

.swatch__hex {
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.specimen {
  margin: 1rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.demo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  align-items: start;
}

/* Section colour cards on the design preview */
.hues {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.hue {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--sec-line);
  border-radius: var(--radius);
  background: var(--sec-tint);
}

.hue__body {
  min-width: 0;
}

.hue__name {
  margin: 0 0 0.35rem;
  color: var(--sec-ink);
  font-weight: 700;
  line-height: 1.3;
}

.hue__sw {
  display: flex;
  gap: 0.3rem;
}

.hue__s {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--sec-line);
  border-radius: 0.4rem;
}

.hue__meta {
  margin: 0.45rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.rowcolours {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
}

.rowcolours .dot {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  vertical-align: -0.1em;
}

.chips-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.pills--demo {
  margin: 0.75rem 0 1.25rem;
}

.toran-demo {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

/* Font pairings for the preview. A (Poppins, the default) needs no rule. */
html[data-fonts="noto"] {
  --font-display: "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif;
  --font-body: "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif;
}

html[data-fonts="noto"] h1,
html[data-fonts="noto"] h2,
html[data-fonts="noto"] h3,
html[data-fonts="noto"] .t-h1,
html[data-fonts="noto"] .t-h2,
html[data-fonts="noto"] .t-h3,
html[data-fonts="noto"] .brand__name,
html[data-fonts="noto"] .tile__title {
  font-weight: 700;
}

html[data-fonts="tiro"] {
  --font-display: "Tiro Devanagari Hindi", "Noto Serif Devanagari", "Nirmala UI", Georgia, serif;
}

html[data-fonts="tiro"] h1,
html[data-fonts="tiro"] h2,
html[data-fonts="tiro"] h3,
html[data-fonts="tiro"] .t-h1,
html[data-fonts="tiro"] .t-h2,
html[data-fonts="tiro"] .t-h3,
html[data-fonts="tiro"] .brand__name,
html[data-fonts="tiro"] .tile__title {
  font-weight: 400;
}

html[data-fonts="yatra"] {
  --font-display: "Yatra One", "Noto Sans Devanagari", serif;
}

html[data-fonts="yatra"] h1,
html[data-fonts="yatra"] h2,
html[data-fonts="yatra"] h3,
html[data-fonts="yatra"] .t-h1,
html[data-fonts="yatra"] .t-h2,
html[data-fonts="yatra"] .t-h3,
html[data-fonts="yatra"] .brand__name,
html[data-fonts="yatra"] .tile__title {
  font-weight: 400;
}

/* ################################################################ 8. MASTER LAYOUT PAGE */
/* The master layout page (pages/master-layout.html): the anatomy diagram and the layout lab. Internal tool, tokens only. */

/* ---- The five parts ------------------------------------------------------------------------ */
.anatomy-wrap {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: start;
  margin-bottom: 1rem;
}

@media (max-width: 62em) {
  .anatomy-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.anatomy {
  display: grid;
  gap: 6px;
  grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem;
  grid-template-areas:
    "top top top"
    "left main right"
    "bottom bottom bottom"
    "tabs tabs tabs";
  padding: 10px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.85rem;
}

.anatomy > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  border-radius: 0.6rem;
  color: var(--accent-900);
  font-weight: 700;
}

.anatomy b {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent-800);
  color: #fff;
  font-size: 0.8rem;
}

.anatomy__top { grid-area: top; background: var(--bhagwa-300); }
.anatomy__left { grid-area: left; min-height: 8rem; background: var(--teal-100); }
.anatomy__main { grid-area: main; border: 1px dashed var(--line-strong); background: var(--bhagwa-50); color: var(--text-muted) !important; font-weight: 400 !important; }
.anatomy__right { grid-area: right; background: var(--fuchsia-100); }
.anatomy__bottom { grid-area: bottom; background: var(--accent-100); }
.anatomy__tabs { grid-area: tabs; background: var(--violet-100); }

.parts {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.parts__item {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--accent-800);
  border-radius: var(--radius);
  background: var(--surface);
}

.parts__item[data-part="1"] { border-inline-start-color: var(--bhagwa-500); }
.parts__item[data-part="2"] { border-inline-start-color: var(--teal-600); }
.parts__item[data-part="3"] { border-inline-start-color: var(--fuchsia-600); }
.parts__item[data-part="4"] { border-inline-start-color: var(--accent-800); }
.parts__item[data-part="5"] { border-inline-start-color: var(--violet-600); }

.parts__item h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 1.05em;
  font-weight: 700;
}

.parts__no {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent-800);
  color: #fff;
  font-size: 0.85rem;
}

.parts__item p {
  margin: 0 0 0.4rem;
}

.parts__item p:last-child {
  margin-bottom: 0;
}

.parts__where {
  color: var(--text-muted);
  font-size: 0.88em;
}

/* ---- The lab ------------------------------------------------------------------------------------- */
.lab {
  display: grid;
  gap: 1.25rem 1.5rem;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  grid-template-areas:
    "controls preview"
    "controls output";
  align-items: start;
}

@media (max-width: 62em) {
  .lab {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "preview"
      "controls"
      "output";
  }
}

.lab__controls {
  grid-area: controls;
  padding: 1rem 1.1rem 0.4rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 62em) {
  .lab__controls {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
    max-height: calc(100vh - var(--nav-h) - 2rem);
    overflow-y: auto;
  }
}

.lab__group {
  min-width: 0;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
}

.lab__group > legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--accent-800);
  font-size: 1.02em;
  font-weight: 700;
}

.lab__tag {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--accent-800);
  color: #fff;
  font-size: 0.8rem;
}

.lab__check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.3rem 0;
  line-height: 1.4;
  cursor: pointer;
}

.lab__check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--accent-700);
}

.lab__label {
  margin: 0.8rem 0 0.2rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.lab .seg {
  margin: 0.7rem 0;
}

.lab .seg legend {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.lab .field {
  margin-bottom: 0.6rem;
}

.lab__preview {
  grid-area: preview;
  min-width: 0;
}

.lab__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.lab__page {
  flex: 1 1 14rem;
  min-width: 14rem;
  margin: 0;
}

.lab__devices {
  display: flex;
  gap: 0.4rem;
}

.lab__devices .btn[aria-pressed="true"] {
  border-color: var(--accent-800);
  background: var(--accent-800);
  color: #fff;
}

.lab__stage {
  position: relative;
  height: min(46rem, 78vh);
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--accent-50);
}

.lab__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform-origin: 0 0;
}

.lab__hint {
  margin: 0.5rem 0 0;
  font-size: 0.88em;
}

.lab__output {
  grid-area: output;
  min-width: 0;
}

.lab__output h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.lab__json {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--accent-50);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  resize: vertical;
}

.lab__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.lab__copied {
  color: var(--accent-800);
  font-weight: 700;
  font-size: 0.9em;
}

.steps--plain .step h3 {
  font-family: var(--font-body);
  font-size: 1.05em;
}

/* ---- Jaap counter (pages/apps/jaap-counter.html) ------------------------------------------------------------------------ */
html.jaap-on { touch-action: manipulation; }

.jaap { max-width: 46rem; margin-inline: auto; }
.jaap__ios { text-align: center; font-size: 0.9em; }

.jaap-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
  margin: 0 0 1rem; padding: 0.8rem 1.1rem;
  border: 1.5px solid var(--bhagwa-500); border-radius: var(--radius-lg); background: var(--bhagwa-100);
}
.jaap-banner p { margin: 0; }



.jaap-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0; }

.jaap-stats { display: flex; justify-content: center; gap: 0.75rem; margin: 0; padding: 0; list-style: none; width: 100%; }
.jaap-stats li { display: grid; flex: 1 1 0; justify-items: center; max-width: 12rem; padding: 0.6rem 0.5rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--bhagwa-200); }
.jaap-stats strong { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; color: var(--accent-800); }
.jaap-stats span { color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.jaap-stats--week { flex-wrap: wrap; }
.jaap-stats--week li { flex: 1 1 6.5rem; }

.jaap-card { margin: 0 0 1.25rem; padding: 1.1rem 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); user-select: none; -webkit-user-select: none; }
.jaap-card__title { margin: 0 0 0.8rem; font-family: var(--font-body); font-size: 1.15em; font-weight: 700; color: var(--accent-800); }
.jaap-row { display: flex; align-items: center; gap: 0.9rem; margin: 0.7rem 0; }
.jaap-row__label { flex: none; min-width: 7rem; font-weight: 600; }
.jaap-row .form-range { flex: 1; }
.jaap-size, .jaap-time { max-width: 9rem; }
.jaap-switch { margin: 0.6rem 0; }
.jaap-switch .form-check-label { margin-inline-start: 0.2rem; }
.jaap-next { margin: 0 0 0.6rem; font-weight: 600; color: var(--bhagwa-800); }
.jaap-quick-label { margin: 0.8rem 0 0; font-weight: 600; }
.jaap-note { margin: 0.8rem 0 0; font-size: 0.88em; }
.seg--sounds { flex-wrap: wrap; }

.jaap-week { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.jaap-week__label { margin: 0; font-weight: 600; text-align: center; }
.jaap-chart { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0.4rem auto 0.8rem; }
.jc__bar { fill: var(--bhagwa-500); }
.jc__bar.is-today { fill: var(--accent-700); }
.jc__bar.is-empty { fill: var(--bhagwa-100); }
.jc__val { fill: var(--accent-800); font-size: 12px; font-weight: 700; }
.jc__day { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.jc__day.en { font-size: 9.5px; font-weight: 400; }

/* the board: a dark card with a ring of beads (one per jaap of the mala), a big tap circle in the middle and a light strip of numbers */
.jaap-board { margin: 0 0 1.25rem; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-lg); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
/* the dark part fills the first screen (on a phone: all of it between the top bar and the tab bar) so a tap anywhere is easy */
.jaap-board__top { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1rem 1.1rem; color: #fff; background: radial-gradient(30rem 20rem at 50% 45%, var(--night-800), var(--night-900) 70%); min-height: clamp(27rem, calc(100vh - 14rem), 42rem); min-height: clamp(27rem, calc(100svh - 14rem), 42rem); }
@media (max-width: 47.99em) { .jaap-board__top { min-height: calc(100vh - var(--bar-h) - var(--tabbar-h) - 1.6rem); min-height: calc(100svh - var(--bar-h) - var(--tabbar-h) - 1.6rem); } body[data-jaap] .shell { padding-top: 0.5rem; } .jaap__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.jaap__head { display: flex; justify-content: center; margin: 0 0 0.5rem; }
.jaap__title { margin: 0; font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--text-muted); }
.jaap__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 0 1rem; }
.jaap__badges:empty { display: none; }
.jaap-board__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; margin: 0; font-weight: 600; }
.jaap-board__chants { color: var(--bhagwa-400); font-weight: 700; }
.jaap-board__hint { margin: 0; text-align: center; color: var(--bhagwa-300); font-weight: 600; }
.jaap-board__sound { margin: 0; padding: 0.5rem 0.8rem; border-radius: var(--radius); background: var(--night-800); border: 1px solid var(--bhagwa-500); color: #fff; font-size: 0.9em; text-align: center; }
.jaap-board__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; background: var(--bhagwa-50); border-top: 1px solid var(--bhagwa-200); }
.jaap-board__stats li { display: grid; justify-items: center; align-content: center; gap: 0.15rem; padding: 0.8rem 0.3rem; text-align: center; }
.jaap-board__stats li + li { border-inline-start: 1px solid var(--bhagwa-200); }
.jaap-board__stats span { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
.jaap-board__stats strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; color: var(--accent-800); }
.jaap-board__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0.7rem 1rem 1rem; background: var(--bhagwa-50); }
@media (max-width: 30em) { .jaap-board__bar { font-size: 0.85rem; } .jaap-board__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jaap-board__stats li:nth-child(3) { border-inline-start: 0; } .jaap-board__stats li:nth-child(n+3) { border-top: 1px solid var(--bhagwa-200); } }

.jaap-dial { position: relative; display: block; flex: none; margin-block: auto; width: max(15rem, min(86vw, 23rem, calc(100vh - 24rem))); width: max(15rem, min(86vw, 23rem, calc(100svh - 24rem))); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.jaap-dial:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.jaap-dial__beads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jaap-dial__orbit { fill: none; stroke: var(--night-line); stroke-width: 1; stroke-dasharray: 2 7; }
.bead { fill: var(--night-bead); transform-box: fill-box; transform-origin: center; transition: fill 0.25s, transform 0.25s; }
.bead.is-done { fill: var(--bhagwa-400); }
.bead.is-now { fill: var(--sky-500); transform: scale(2); filter: drop-shadow(0 0 5px var(--sky-500)); }
.bead.is-pop { animation: bead-pop 0.45s ease-out; }
.bead.is-mark { fill: var(--night-line); transform: scale(1.7); }
.jaap-dial__core { position: absolute; inset: 23%; display: grid; place-content: center; justify-items: center; gap: 0.2rem; border-radius: 50%; background: var(--night-800); border: 2px solid var(--bhagwa-500); box-shadow: 0 0 30px rgba(var(--brand-rgb), 0.35), inset 0 0 22px rgba(var(--brand-rgb), 0.18); }
.jaap-dial__core::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed var(--night-line); }
.jaap-dial__count { position: relative; font-family: var(--font-display); font-size: clamp(2.8rem, 15vw, 4.6rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.jaap-dial__tap { position: relative; color: var(--bhagwa-300); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; }
.jaap-dial.is-tap .jaap-dial__core { animation: core-tap 0.22s ease-out; }
.jaap-dial__count.is-bump { animation: count-bump 0.25s ease-out; }
.jaap-ripple { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--bhagwa-400); pointer-events: none; animation: ripple 0.7s ease-out forwards; }
.jaap-dial.is-complete .jaap-dial__core { animation: mala-glow 1.4s ease-out; }
.jaap-dial.is-complete .bead { animation: bead-wave 0.8s calc(var(--i) * 7ms) ease-out backwards; }
@keyframes bead-pop { from { transform: scale(3.6); } to { transform: scale(2); } }
@keyframes core-tap { 0% { transform: scale(1); } 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes count-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ripple { from { transform: scale(0.95); opacity: 0.8; } to { transform: scale(1.55); opacity: 0; } }
@keyframes mala-glow { 0% { box-shadow: 0 0 30px rgba(var(--brand-rgb), 0.35); } 30% { box-shadow: 0 0 70px 14px rgba(var(--brand-rgb), 0.85); } 100% { box-shadow: 0 0 30px rgba(var(--brand-rgb), 0.35); } }
@keyframes bead-wave { 0% { fill: var(--gold-500); transform: scale(2.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .jaap-dial *, .jaap-dial, .bead, .jaap-ripple { animation: none !important; transition: none !important; } }

/* the two round buttons at the top-left of the board (sound / volume, reminders) and their small panels */
.jaap-tools { display: flex; gap: 0.5rem; }
.jaap-tool { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--night-line); border-radius: 50%; background: var(--night-800); color: #fff; cursor: pointer; }
.jaap-tool:hover, .jaap-tool[aria-expanded="true"] { border-color: var(--bhagwa-500); }
.jaap-tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.jaap-tool .icon { width: 1.3rem; height: 1.3rem; }
.jaap-tool__off { display: none; }
.jaap-tool.is-muted .jaap-tool__on { display: none; }
.jaap-tool.is-muted .jaap-tool__off { display: inline-block; color: var(--bhagwa-300); }
.jaap-tool__dot { position: absolute; top: 0.3rem; right: 0.3rem; display: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--bhagwa-400); box-shadow: 0 0 0 2px var(--night-800); }
.jaap-tool.is-on .jaap-tool__dot { display: block; }
.jaap-pop { max-height: calc(100% - 4.8rem); overflow-y: auto; position: absolute; z-index: 5; top: 4rem; inset-inline-start: 0.8rem; width: min(21rem, calc(100% - 1.6rem)); padding: 0.9rem 1rem 1rem; border: 1px solid var(--bhagwa-200); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); color: var(--text); }
.jaap-pop .jaap-next { margin: 0 0 0.4rem; }
.jaap-pop__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.jaap-pop__vol .form-range { flex: 1; min-width: 5rem; }
.jaap-pop__step { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; }
.seg--pop { flex-wrap: wrap; margin: 0; }

/* the two apps, right after the hero of the home page */
.app-tiles { margin: 0 0 1.5rem; }
.app-tiles__title { margin: 0 0 0.7rem; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--accent-800); }
.app-tiles__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.app-tile { display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1rem 1.1rem; border: 1.5px solid var(--bhagwa-200); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--bhagwa-50), var(--surface)); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.app-tile:hover, .app-tile:focus-visible { transform: translateY(-2px); border-color: var(--bhagwa-400); box-shadow: var(--shadow); color: inherit; }
.app-tile__icon { flex: none; width: 4.75rem; height: 4.75rem; border-radius: 1.15rem; object-fit: contain; background: var(--surface); box-shadow: var(--shadow-sm); }
.app-tile__body { display: grid; gap: 0.15rem; min-width: 0; }
.app-tile__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.3; color: var(--accent-800); }
.app-tile__desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; }
.app-tile__go { flex: none; margin-inline-start: auto; width: 1.4rem; height: 1.4rem; color: var(--bhagwa-700); }
@media (max-width: 40em) { .app-tile { flex-direction: column; justify-content: center; gap: 0.6rem; padding: 0.9rem 0.5rem; text-align: center; } .app-tile__icon { width: 4.25rem; height: 4.25rem; } .app-tile__go, .app-tile__desc { display: none; } .app-tile__name { font-size: 1.05rem; } }
@media (prefers-reduced-motion: reduce) { .app-tile { transition: none; } .app-tile:hover { transform: none; } }
.jaap-board__chants { flex: 1; text-align: center; }
.jaap-pop--end { inset-inline-start: auto; inset-inline-end: 0.8rem; width: min(17rem, calc(100% - 1.6rem)); }
.jaap-pop__col { display: grid; gap: 0.5rem; }
.jaap-pop__label { margin: 0.2rem 0 0.4rem; padding: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--bhagwa-800); }
.jaap-pop .seg { margin: 0 0 0.7rem; }
.jaap-pop fieldset.seg > legend.jaap-pop__label { float: none; width: auto; }