/* Chrome (ds- prefix): the one header, phone bar, Me sheet and footer of every surface. Tokens only (tokens.css), no hex values; it sits on
   top of components.css and shell.css (which still own the wordmark, icon buttons, account menu, buttons and the dialogs).
   Breakpoints are rem because media queries cannot read custom properties: md 48rem (768px), lg 64rem (1024px), xl 80rem (1280px), 100rem (1600px).
   Markup: includes/shell/chrome.php. Behaviour: assets/js/shell/chrome.js (nav panels) with shell.js and primitives.js (theme, account menu,
   search, dialogs). The header is quiet on purpose: the dial is the one element that is meant to draw the eye. */

:root {
  --ds-chrome-bar: 0px;            /* the height the phone bar takes at the foot of the page: the footer pads itself by it */
  --ds-chrome-dial-lift: 12px;     /* how far the phone bar's dial rises above the bar (the cradle behind it follows) */
}
@media (max-width: 63.99rem) {
  :root { --ds-chrome-bar: calc(var(--ds-tabbar-h) + 1px + env(safe-area-inset-bottom, 0px)); }  /* the list, the bar's hairline and the safe area */
}

/* The chrome sizes its own boxes, so a page without the site's reset (desks, apps) gets the same 44px controls */
.ds-header--shell, .ds-header--shell *, .ds-tabbar--shell, .ds-tabbar--shell *, .ds-footer--chrome .ds-footer__base, .ds-footer--chrome .ds-footer__base *, .ds-mesheet, .ds-mesheet * { box-sizing: border-box; }

/* ------------------------------------------------------------ Header */
.ds-header--shell.ds-header--compact { --ds-header-h: 52px; }
.ds-header--shell .ds-header__bar { gap: var(--ds-space-2); }
.ds-header--shell[data-ds-surface="public"] .ds-header__bar { max-inline-size: var(--ds-width-marketing); }
.ds-header--shell:not([data-ds-surface="public"]) .ds-header__bar { max-inline-size: none; }
.ds-header--shell .ds-header__actions { gap: var(--ds-space-1); }

/* The emblem and the short name (DJJS) always; the full name once the bar has room for it */
.ds-header--shell .ds-wordmark__full { display: none; }
.ds-header--shell .ds-wordmark__short { display: inline; font-size: var(--ds-text-xl); }
@media (min-width: 100rem) {
  .ds-header--shell[data-ds-surface="public"] .ds-header__bar { max-inline-size: 85rem; }
  .ds-header--shell .ds-wordmark__full { display: inline; }
  .ds-header--shell .ds-wordmark__short { display: none; }
}

/* Phones (below 768px): wordmark, search and theme; the bottom bar carries navigation. */
.ds-header--shell .ds-header__nav, .ds-header--shell .ds-account, .ds-header--shell .ds-header__dial { display: none; }
@media (min-width: 48rem) {
  .ds-header--shell .ds-header__nav { display: flex; align-self: stretch; flex: 1; min-inline-size: 0; margin-inline-start: var(--ds-space-3); }
  .ds-header--shell .ds-account { display: block; }
}
@media (min-width: 64rem) {
  .ds-header--shell .ds-header__dial { display: flex; align-items: center; margin-inline: var(--ds-space-1); }
  .ds-header--shell .ds-header__signin, .ds-header--shell .ds-header__cta { display: inline-flex; }
  .ds-header--shell .ds-header__signin { margin-inline-start: var(--ds-space-1); }
}

/* The account menu may be taller than a short window: it scrolls inside itself */
.ds-header--shell .ds-menu { max-block-size: calc(100dvh - var(--ds-header-h) - var(--ds-space-4)); overflow: auto; overscroll-behavior: contain; }
.ds-menu__scope { padding: var(--ds-space-2) var(--ds-space-3); border-block-start: 1px solid var(--ds-border); }

/* ------------------------------------------------------------ Primary navigation and its panels */
.ds-nav, .ds-nav__list { margin: 0; padding: 0; list-style: none; }
.ds-nav { display: flex; align-self: stretch; min-inline-size: 0; }
.ds-nav__list { display: flex; align-items: stretch; gap: var(--ds-space-1); }
.ds-nav__item { display: flex; align-items: center; }   /* the item spans the bar, so the pointer never leaves it on the way to its panel */
.ds-nav__trigger, .ds-nav__toplink {
  position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-1); min-block-size: var(--ds-touch); padding: 0 var(--ds-space-2);
  background: transparent; color: var(--ds-text); border: 0; border-radius: var(--ds-radius-md); font: inherit; font-size: var(--ds-text-md); font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease-snappy), color var(--ds-dur-fast) var(--ds-ease-snappy);
}
.ds-nav__trigger:hover, .ds-nav__toplink:hover, .ds-nav__trigger[aria-expanded="true"] { background: var(--ds-surface-sunken); color: var(--ds-accent); }
.ds-nav__trigger .ds-icon { display: none; inline-size: 1rem; block-size: 1rem; transition: transform var(--ds-dur-base) var(--ds-ease-snappy); }
.ds-nav__trigger[aria-expanded="true"] .ds-icon { transform: rotate(180deg); }
.ds-nav__trigger[data-current] .ds-nav__label, .ds-nav__toplink[aria-current="page"] .ds-nav__label {
  text-decoration: underline; text-decoration-color: var(--ds-accent); text-decoration-thickness: 2px; text-underline-offset: .4em;
}
@media (min-width: 80rem) {
  .ds-nav__trigger, .ds-nav__toplink { padding-inline: var(--ds-space-3); }
  .ds-nav__trigger .ds-icon { display: inline-block; }
}

.ds-nav__panel {
  position: absolute; inset-block-start: 100%; inset-inline: 0; margin-inline: auto; z-index: var(--ds-z-header);
  inline-size: min(calc(100% - 2 * var(--ds-gutter)), 60rem); max-block-size: calc(100dvh - var(--ds-header-h) - var(--ds-space-4));
  overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-5);
  background: var(--ds-surface-raised); color: var(--ds-text); border: 1px solid var(--ds-border); border-block-start: 0;
  border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg); box-shadow: var(--ds-shadow-3);
  animation: ds-nav-in var(--ds-dur-fast) var(--ds-ease-gentle);
}
.ds-nav__panel[hidden] { display: none; }
.ds-nav__lead { margin: 0 0 var(--ds-space-2); padding-inline: var(--ds-space-3); font-size: var(--ds-text-sm); }
.ds-nav__leadlink { display: inline-flex; align-items: center; min-block-size: var(--ds-touch); color: var(--ds-accent); text-underline-offset: .2em; }
.ds-nav__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--ds-space-5) var(--ds-space-6); }
.ds-nav__section { min-inline-size: 0; }
.ds-nav__heading {
  margin: 0 0 var(--ds-space-1); padding-inline: var(--ds-space-3); font-family: var(--ds-font-display); font-size: var(--ds-text-lg); font-weight: 600;
  line-height: var(--ds-leading-tight); color: var(--ds-accent);
}
.ds-nav__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-1); }
.ds-nav__section:only-child .ds-nav__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ds-space-5); }
.ds-nav__link {
  display: flex; align-items: flex-start; gap: var(--ds-space-3); min-block-size: var(--ds-touch); padding: var(--ds-space-2) var(--ds-space-3); box-sizing: border-box;
  color: inherit; text-decoration: none; border-radius: var(--ds-radius-md);
}
.ds-nav__link:hover { background: var(--ds-surface-sunken); }
.ds-nav__link:focus-visible { outline-offset: -2px; }
.ds-nav__icon { flex: none; display: inline-grid; place-items: center; color: var(--ds-accent); padding-block-start: var(--ds-space-1); }
.ds-nav__text { display: flex; flex-direction: column; min-inline-size: 0; }
.ds-nav__name { font-weight: 600; }
.ds-nav__desc {
  color: var(--ds-text-muted); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ds-nav__link[aria-current="page"] .ds-nav__name { color: var(--ds-accent); }
@keyframes ds-nav-in { from { opacity: 0; transform: translateY(calc(-1 * var(--ds-space-1))); } }

/* ------------------------------------------------------------ Phone bar */
.ds-tabbar--shell {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--ds-z-header); box-sizing: border-box;
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
}
.ds-tabbar--shell .ds-tabbar__item { display: flex; min-inline-size: 0; }
.ds-tabbar--shell .ds-tabbar__link { flex: 1; min-inline-size: var(--ds-touch); }
.ds-tabbar--shell button.ds-tabbar__link {
  position: relative; inline-size: 100%; background: transparent; border: 0; font: inherit; font-size: var(--ds-text-xs); cursor: pointer;
}
.ds-tabbar--shell .ds-tabbar__link .ds-icon { inline-size: 1.5rem; block-size: 1.5rem; }
.ds-tabbar--shell .ds-tabbar__link:focus-visible, .ds-tabbar--shell .ds-tabbar__dialfb:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }

/* The dial rises out of a shallow cradle: a ring of the bar's own surface, cut to the part above the bar. The dial (assets/css/sadhna-dial.css) is 64px
   and sits --ds-chrome-dial-lift above the bar's top edge, so its centre is 2rem below the lift line; the ring is 5rem wide around that centre. */
.ds-tabbar__item--dial { position: relative; align-items: flex-start; justify-content: center; overflow: visible; }
.ds-tabbar__item--dial::before {
  --ds-cap: calc(var(--ds-chrome-dial-lift) + .5rem + 1px);
  content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: calc(-1 * var(--ds-chrome-dial-lift) - .5rem);
  inline-size: 5rem; block-size: 5rem; margin-inline-start: -2.5rem; box-sizing: border-box; border-radius: var(--ds-radius-pill);
  background: var(--ds-surface); border: 1px solid var(--ds-border); clip-path: inset(0 0 calc(100% - var(--ds-cap)) 0); pointer-events: none;
}
.ds-tabbar__item--dial > * { position: relative; z-index: 1; }
/* Used only while the dial's own markup is not on the page: a plain link to the same place */
.ds-tabbar__dialfb {
  display: grid; place-items: center; box-sizing: border-box; inline-size: 4rem; block-size: 4rem; border-radius: var(--ds-radius-pill); text-decoration: none;
  color: var(--ds-accent); background: var(--ds-surface-raised); border: 1px solid var(--ds-accent);
  box-shadow: 0 0 1.25rem color-mix(in srgb, var(--ds-accent) 35%, transparent);
  top: calc(-1 * var(--ds-chrome-dial-lift));
}
.ds-tabbar__dialfb .ds-icon { inline-size: 1.75rem; block-size: 1.75rem; }

/* ------------------------------------------------------------ Me and Menu sheet (a native dialog; .ds-sheet--bottom from components.css) */
html:has(dialog.ds-mesheet[open]) { overflow: hidden; }
.ds-mesheet { box-sizing: border-box; font-family: var(--ds-font-ui); }
.ds-mesheet .ds-sheet__body { display: flex; flex-direction: column; gap: var(--ds-space-5); padding-block-end: calc(var(--ds-space-6) + env(safe-area-inset-bottom, 0px)); }
.ds-mesheet__hello { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 600; line-height: var(--ds-leading-tight); color: var(--ds-accent); }
.ds-mesheet__heading { margin: 0 0 var(--ds-space-1); font-family: var(--ds-font-display); font-size: var(--ds-text-lg); font-weight: 600; color: var(--ds-accent); line-height: var(--ds-leading-tight); }
.ds-mesheet__list { list-style: none; margin: 0; padding: 0; }
.ds-mesheet__link {
  display: flex; align-items: center; min-block-size: var(--ds-touch); padding: var(--ds-space-2) var(--ds-space-1); color: var(--ds-text); text-decoration: none; font-size: var(--ds-text-lg);
  border-block-end: 1px solid var(--ds-border);
}
.ds-mesheet__list li:last-child .ds-mesheet__link { border-block-end: 0; }
.ds-mesheet__link[aria-current="page"] { color: var(--ds-accent); font-weight: 600; }
.ds-mesheet__foot { display: flex; flex-direction: column; gap: var(--ds-space-3); }
.ds-mesheet__cta { inline-size: 100%; box-sizing: border-box; }
.ds-mesheet__lang { display: flex; justify-content: center; }
.ds-mesheet a:focus-visible, .ds-mesheet button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* ------------------------------------------------------------ Footer: one markup; the public variant adds the columns and identity block above the base row */
.ds-footer--chrome { padding-block-end: var(--ds-chrome-bar); }   /* the phone bar never covers the last line */
.ds-footer--chrome .ds-footer__inner { flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; gap: var(--ds-space-6); max-inline-size: var(--ds-width-marketing); padding: var(--ds-space-6) var(--ds-gutter) var(--ds-space-5); }
.ds-footer--chrome[data-ds-surface]:not([data-ds-surface="public"]) .ds-footer__inner { max-inline-size: none; }
.ds-footer--public .ds-footer__inner { padding-block-start: var(--ds-space-9); }
.ds-footer--chrome .ds-footer__link, .ds-footer--chrome .ds-footer-nav__links a { min-inline-size: var(--ds-touch); }
.ds-footer__base .ds-footer__link { justify-content: center; }
.ds-footer__top { display: flex; flex-direction: column; gap: var(--ds-space-7); }
.ds-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ds-space-6); }
.ds-footer__top + .ds-footer__base { padding-block-start: var(--ds-space-4); border-block-start: 1px solid var(--ds-border); }
.ds-footer__nav { flex: 1 1 auto; min-inline-size: 0; }
.ds-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-5); }
.ds-footer__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--ds-space-5); }
.ds-footer__release, .ds-footer--chrome .ds-footer__note { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-text-muted); font-variant-numeric: lining-nums tabular-nums; }
.ds-footer__lang, .ds-mesheet__lang { min-inline-size: 0; }
.ds-footer__lang:not(:has(djjs-lang-switch:defined:not([hidden]))), .ds-mesheet__lang:not(:has(djjs-lang-switch:defined:not([hidden]))) { display: none; }   /* the switch stays hidden while the site is English only */
djjs-lang-switch:not(:defined) { display: none; }
.ds-footer--chrome a:focus-visible, .ds-footer--chrome button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

@media (max-width: 47.99rem) { .ds-nav__section:only-child .ds-nav__links { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Motion: only what answers a tap, and none when asked */
@media (prefers-reduced-motion: reduce) {
  .ds-nav__panel { animation: none; }
  .ds-nav__trigger, .ds-nav__toplink, .ds-nav__trigger .ds-icon { transition: none; }
}

/* Maharaj Ji's swaroop medallion (<djjs-darshan-medallion>), portal header only: a 44 px button holding the small authentic photograph whole (object-fit: contain) */
.ds-header__darshan { display: inline-block; flex: none; }
.ds-header__darshan, .ds-header__darshan * { max-inline-size: 44px; max-block-size: 44px; }
.ds-header__darshan img { object-fit: contain; }


/* links that sit inside a sentence of the footer (who is behind this) are underlined, so colour is never the only cue */
.ds-footer-who__line a, .ds-footer__meta a { text-decoration: underline; text-underline-offset: .15em; }
.ds-footer-who__list a { text-decoration: underline; text-underline-offset: .15em; }

/* ------------------------------------------------------------ Help: the "?" and its drawer (includes/shell/chrome.php, assets/js/shell/help.js)
   Not shown below 768px: the phone's Me sheet lists Help. The drawer is a panel under the header, so the header, and the dial in it, stay
   visible beside it; on tablets the bottom bar (and the dial in it) stays free as well. */
.ds-header--shell .ds-header__help { display: none; }
@media (min-width: 48rem) {
  .ds-header--shell .ds-header__help { display: inline-grid; }
}
.ds-helpdrawer { display: none; }
@media (min-width: 48rem) {
  .ds-helpdrawer[open] { display: flex; inset-block: var(--hlp-top, var(--ds-header-h, 64px)) 0; block-size: calc(100dvh - var(--hlp-top, var(--ds-header-h, 64px))); max-block-size: none; inline-size: min(100%, 26rem);
    border-block-start: 1px solid var(--ds-border); }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .ds-helpdrawer[open] { block-size: calc(100dvh - var(--hlp-top, var(--ds-header-h, 64px)) - var(--ds-chrome-bar)); }
}
.ds-helpdrawer, .ds-helpdrawer * { box-sizing: border-box; }
.ds-helpdrawer .ds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); border-block-end: 1px solid var(--ds-border); }
.ds-helpdrawer .ds-sheet__title { margin: 0; font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: 500; }
.ds-helpdrawer .ds-sheet__body { display: grid; gap: var(--ds-space-3); align-content: start; padding: var(--ds-space-4); overflow-y: auto; overscroll-behavior: contain; min-block-size: 0; flex: 1; }
.ds-helpdrawer__label { display: block; margin-block-end: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.ds-helpdrawer__row { display: flex; gap: var(--ds-space-2); }
.ds-helpdrawer__input { flex: 1 1 auto; min-inline-size: 0; min-block-size: 44px; padding: 0 var(--ds-space-3); background: var(--ds-surface); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); font: inherit; font-size: var(--ds-text-md); }
.ds-helpdrawer__input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
.ds-helpdrawer__go { flex: none; min-block-size: 44px; }
.ds-helpdrawer__status { margin: 0; min-block-size: 1.25rem; font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.ds-helpdrawer__gtitle { margin: 0 0 var(--ds-space-1); font-family: var(--ds-font-display); font-size: var(--ds-text-xl); font-weight: 500; line-height: var(--ds-leading-tight); }
.ds-helpdrawer__gtitle a { color: var(--ds-text); text-underline-offset: .2em; }
.ds-helpdrawer__for, .ds-helpdrawer__intro { margin: 0 0 var(--ds-space-2); font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.ds-helpdrawer__intro { color: var(--ds-text); }
.ds-helpdrawer__off { margin: 0 0 var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface-sunken); border-inline-start: 3px solid var(--ds-accent); border-radius: var(--ds-radius-sm); font-size: var(--ds-text-sm); }
.ds-helpdrawer__steps { list-style: decimal; margin: 0 0 var(--ds-space-3); padding-inline-start: 1.4em; font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); }
.ds-helpdrawer__steps li { margin-block: var(--ds-space-2); padding-inline-start: var(--ds-space-1); }
.ds-helpdrawer__steps li::marker { color: var(--ds-accent); font-weight: 600; }
.ds-helpdrawer__full, .ds-helpdrawer__all a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ds-accent); font-weight: 600; text-underline-offset: .2em; }
.ds-helpdrawer__all { margin: 0; border-block-start: 1px solid var(--ds-border); padding-block-start: var(--ds-space-2); }
.ds-helpdrawer .hlp-live__list { list-style: none; margin: 0; padding: 0; }
.ds-helpdrawer .hlp-live__list li + li { border-block-start: 1px solid var(--ds-border); }
.ds-helpdrawer .hlp-live__link { display: grid; gap: var(--ds-space-1); min-block-size: 44px; padding-block: var(--ds-space-3); color: inherit; text-decoration: none; }
.ds-helpdrawer .hlp-live__title { font-weight: 600; color: var(--ds-accent); }
.ds-helpdrawer .hlp-live__sum, .ds-helpdrawer .hlp-live__meta { font-size: var(--ds-text-sm); line-height: var(--ds-leading-normal); color: var(--ds-text-muted); }
.ds-helpdrawer .hlp-live__meta { font-size: var(--ds-text-xs); }
.ds-helpdrawer .ds-helpdrawer__guide[hidden], .ds-helpdrawer [hidden] { display: none; }