/* =============================================================================
   anand-karaj.css — the projection tool for /culture/weddings/anand-karaj/

   PAGE-SCOPED (AK23). Nothing in here is loaded by any other page and nothing
   in here belongs in a shared stylesheet. If that ever has to change, say so
   explicitly in the handoff and specify the sitewide cache-bust.

   WHAT THIS IS FOR
   ----------------
   A slideshow projected during an actual Anand Karaj, so the sangat can follow
   what is being read. The operating assumption: a borrowed laptop, an
   uncalibrated projector, a hall with windows, a clicker nobody checked, and a
   volunteer who has not used this before and cannot ask anyone during the
   ceremony. During the ceremony the tool should be invisible — the sangat
   should be aware of the words and not of the software.

   Everything conservative here is conservative on purpose.

   AK21 — PALETTE TOKENS ONLY. Every colour below is derived from style.css's
   tokens with color-mix. There are no new colour values in this file. Two
   literals appear — #000 for the blank state and for mixing toward black, and
   #fff for mixing toward white — and neither is a brand colour.

   TWO COLOUR TRAPS, BOTH DELIBERATELY AVOIDED
   -------------------------------------------
   1. Marigold gold on parchment measures 3.5:1. It is the most characteristic
      brand pairing on this site and it is INVISIBLE on a projector. Gold is
      used here for exactly one thing: a hairline rule. Never for type.
   2. Pure white on a dark ground BLOOMS on a dim or misconverged projector —
      the strokes spread and the subscript conjuncts fill in. That matters
      specifically for Gurmukhi, where a filled-in pairin rara changes what the
      reader sees. The dark theme uses parchment-tinted off-white, never #fff.

   MEASURED CONTRAST — every pairing, from the built page, not estimated:
     light  Gurmukhi 18.6:1 · romanisation 11.3:1 · English 17.7:1
     dark   Gurmukhi 15.3:1 · romanisation 10.1:1 · English 12.7:1
     explain slide 13.7:1 (light) · 17.9:1 (dark)
     section indicator 3.6:1 (light) · 3.4:1 (dark) — deliberately low
   Targets were 12:1 for Gurmukhi and 8:1 for the rest. WCAG AAA is 7:1 and
   assumes a self-luminous display in reasonable conditions; these are headroom
   for bad projection, not a compliance exercise.

   WHY LIGHT IS THE DEFAULT, WHICH IS NOT THE OBVIOUS ANSWER
   ---------------------------------------------------------
   Ambient light adds a constant to every part of a projected image, so it
   degrades the measured contrast of light and dark themes about equally. The
   difference is ADAPTATION. With a light ground the projected image stays a
   bright field the eye can settle on, in a room the eye is already adapted to.
   With a dark ground in a lit room the image is dim overall and the white text
   is the only bright thing in a brighter surround — the eye is adapted to the
   room, and the slide looks grey and weak. Gurdwara darbar halls are usually
   well lit, frequently have windows, and are rarely dimmable. Dark theme is
   right in a dark hall, which is why it is offered, but it is the exception.

   NO TRANSITIONS ANYWHERE. Not as a default — at all. There is no transition
   or animation property in this file. A crossfade between two Gurmukhi slides
   ghosts on a projector: two sets of stacked diacritics overlapping, which
   reads as a rendering fault rather than as a transition. It is also, for
   scripture, less dignified than a cut. prefers-reduced-motion is therefore
   satisfied by construction; the block at the bottom asserts it anyway.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · The self-hosted faces (AK20 — no CDN, ever)
   ---------------------------------------------------------------------------
   Subsetted from the codepoint inventory of the frozen text, never from a
   language range: a unicode-range subset would drop the rarer conjuncts, which
   is precisely the content at risk. Run
   `build-anand-karaj-slides.py --glyph-inventory` to see the inventory.

   font-display: BLOCK, not swap. A flash of fallback Gurmukhi mid-ceremony is
   worse than a beat of nothing, and with a local 7 KB file the beat is
   imperceptible.

   Noto Serif Gurmukhi v22 and Noto Serif v33, both OFL 1.1. Weight 500 for the
   Gurmukhi because thin strokes disappear on a dim projector lamp. Provenance
   and the two coverage findings are in font-src/anand-karaj/README.md.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "AKGurmukhi";
  src: url("/fonts/anand-karaj-gurmukhi.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: "AKLatin";
  src: url("/fonts/anand-karaj-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
}

/* ---------------------------------------------------------------------------
   1a · .visually-hidden — RESOLVED 2026-07-29 (AK23 closed)
   ---------------------------------------------------------------------------
   The class now lives in style.css and nowhere else. History, kept because it
   is the reason the rule is where it is: it used to be defined only in
   naqsha.css. Three pages used it; two of them loaded naqsha.css. This page
   was the third, so its order-table header —
   <th><span class="visually-hidden">Step</span>#</th> — rendered the literal
   word "Step" beside the "#" from the day the page shipped, and the
   projection's aria-live region would have printed the slide position in the
   top-left corner of the wall.

   Both duplicate blocks (here and in naqsha.css) are deleted. Do not re-add
   one: a second definition is how this bug came back the first time.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2 · The launch card, on the article surface
   --------------------------------------------------------------------------- */
.aks-launch {
  margin: 2.6rem 0; padding: 1.5rem 1.6rem;
  border: 1px solid var(--line-warm); border-left: 3px solid var(--indigo-600);
  border-radius: var(--radius-sm); background: var(--khaddar-50);
}
.aks-launch__h {
  margin: 0 0 .5rem; font-family: var(--font-sans); font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--indigo-600);
}
.aks-launch__p { margin: 0 0 .9rem; font-family: var(--font-serif); font-size: 1rem; line-height: 1.62; color: var(--text-2); }
.aks-launch__note {
  margin: 0 0 1rem; padding: .7rem .85rem; border-radius: 6px;
  background: color-mix(in srgb, var(--madder-500) 8%, var(--khaddar-50));
  border: 1px solid color-mix(in srgb, var(--madder-500) 26%, transparent);
  font-family: var(--font-sans); font-size: .84rem; line-height: 1.55; color: var(--madder-600);
}
.aks-launch__b { margin: 0; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.aks-launch__go {
  font-family: var(--font-sans); font-size: .95rem; font-weight: 500;
  padding: .62rem 1.15rem; border-radius: 8px; cursor: pointer;
  color: var(--cream); background: var(--indigo-800); border: 1px solid var(--indigo-900);
}
.aks-launch__go:hover { background: var(--indigo-700); }
.aks-launch__s { font-family: var(--font-sans); font-size: .82rem; color: var(--text-3); }
.aks-launch__s b { font-weight: 600; color: var(--text-2); }

/* ---------------------------------------------------------------------------
   3 · The projection root
   ---------------------------------------------------------------------------
   Hidden until JS opens it. Without JS the <noscript> block in the page head
   turns it back into a plain, readable, printable document of the whole
   ceremony in order — see AK19. The worst realistic failure of this tool is
   that it degrades into a scrollable document of the correct text, which at a
   wedding is recoverable rather than a disaster.
   --------------------------------------------------------------------------- */
.aks-root { display: none; }
.aks-root.is-open {
  /* Flex column so the under-review strip and the pre-flight panel stack in
     normal flow. The first version floated the strip absolutely over the top
     of the panel and swallowed its heading — which is the sort of thing you
     only see in a screenshot. The stage is absolutely positioned against this
     box and is unaffected. */
  display: flex; flex-direction: column;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ak-ground); color: var(--ak-gur);
  font-family: "AKLatin", Georgia, "Times New Roman", serif;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   3a · THE TOKENS — GENERATED. Do not hand-edit between the markers.
   ---------------------------------------------------------------------------
   Written by build-anand-karaj-slides.py from anand-karaj-design.json. That is
   the file to edit if you want the slides to look different; it is written for
   a human and says what each knob does.

   Why generated rather than typed here: the build computes offline whether
   every slide fits a 1024x768 projector at the minimum legible size, and its
   arithmetic has to agree with these values exactly. When they were two
   hand-kept copies they disagreed within a day — the fit model undercounted
   the held-slide furniture, passed in Python, and overflowed by 30px in
   Chromium on all four lāvāṅ slides. A line-height the fit check cannot see is
   a fit check that lies.

   The colours arrive as color-mix() of style.css tokens, so there is still no
   colour value of Punjabia's own anywhere in this file (AK21). The build
   resolves the same mixes in Python and FAILS if any pairing falls below its
   contrast target before it can reach a wall.

   THE LAYOUT UNIT --u is min(1vh, 0.75vw): type sized against projected
   HEIGHT, which is the only measure that means anything at the back of a hall,
   but capped by width so a surface narrower than the 4:3 the fit check assumed
   shrinks rather than overflows. At 4:3 and wider it is exactly 1vh.
   --------------------------------------------------------------------------- */
/* AK-TOKENS:START — GENERATED by build-anand-karaj-slides.py. Do not hand-edit. */
  /* Layout. Multiply by --u, the layout unit, to get a length. */
  .aks-root.is-open {
    --u: min(1vh, 0.75vw);
    --g: 3.6; --rt: 0.55; --re: 0.6;
    --ak-box-w: 88vw;   --ak-box-h: 84vh;
    --ak-lh-gur: 1.6;  --ak-lh-lat: 1.35;
    --ak-gap-lane: 0.55;  --ak-gap-tuk: 1.1;
    --ak-unit-size: 2.4;   --ak-unit-lh: 1.2;
    --ak-theme-size: 2.6;  --ak-theme-lh: 1.4;
    --ak-theme-gap: 0.5;   --ak-head-gap: 0.6;
    --ak-cite-size: 1.5;   --ak-cite-lh: 1.2;   --ak-cite-gap: 1.2;
  }

  /* Light — the default. Measured contrast is in the header above. */
  .aks-root,
  .aks-root[data-theme="light"] {
    --ak-ground: color-mix(in srgb, var(--khaddar-50) 50%, #fff);
    --ak-gur:    color-mix(in srgb, var(--indigo-900) 55%, #000);
    --ak-en:     color-mix(in srgb, var(--indigo-900) 82%, #000);
    --ak-tr:     color-mix(in srgb, var(--indigo-900) 86%, var(--ak-ground));
    --ak-dim:    color-mix(in srgb, var(--indigo-900) 52%, var(--ak-ground));
    --ak-rule:   var(--gold-600);
    --ak-x-ground: color-mix(in srgb, var(--indigo-900) 88%, #000);
    --ak-x-text:   color-mix(in srgb, var(--khaddar-50) 90%, var(--indigo-900));
  }

  /* Dark — for a hall that is genuinely dark. The exception. */
  .aks-root[data-theme="dark"] {
    --ak-ground: color-mix(in srgb, var(--indigo-900) 62%, #000);
    --ak-gur:    color-mix(in srgb, var(--khaddar-50) 93%, var(--indigo-900));
    --ak-en:     color-mix(in srgb, var(--khaddar-50) 84%, var(--indigo-900));
    --ak-tr:     color-mix(in srgb, var(--khaddar-50) 74%, var(--indigo-900));
    --ak-dim:    color-mix(in srgb, var(--khaddar-50) 38%, var(--ak-ground));
    --ak-rule:   var(--gold-400);
    --ak-x-ground: color-mix(in srgb, var(--khaddar-50) 62%, #fff);
    --ak-x-text:   color-mix(in srgb, var(--indigo-900) 70%, #000);
  }
/* AK-TOKENS:END */

/* prefers-contrast: take the high-contrast end of the derivation regardless
   of which theme the operator picked. */
@media (prefers-contrast: more) {
  .aks-root, .aks-root[data-theme="light"] {
    --ak-ground: #fff; --ak-gur: #000; --ak-en: #000; --ak-tr: #000;
    --ak-dim: color-mix(in srgb, var(--indigo-900) 60%, #fff);
  }
  .aks-root[data-theme="dark"] {
    --ak-ground: #000; --ak-gur: var(--khaddar-50);
    --ak-en: var(--khaddar-50); --ak-tr: var(--khaddar-50);
    --ak-dim: color-mix(in srgb, var(--khaddar-50) 45%, #000);
  }
}

/* ---------------------------------------------------------------------------
   4 · Pre-flight
   ---------------------------------------------------------------------------
   Everything adjustable lives here and nothing is adjustable afterwards. An
   operator who fumbles a theme toggle mid-lāv has changed the wall in front of
   two hundred people. The only in-ceremony controls are navigation, blank,
   hold and the jump menu.
   --------------------------------------------------------------------------- */
.aks-pre {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.2rem, 5vh, 3.4rem) clamp(1.2rem, 6vw, 4rem);
  max-width: 46rem; width: 100%; margin: 0 auto;
}
.aks-root.is-live .aks-pre { display: none; }
.aks-pre__h { margin: 0; font-size: 1.5rem; letter-spacing: .01em; }
.aks-pre__f { border: 0; border-top: 1px solid var(--ak-dim); margin: 0; padding: .8rem 0 0; }
.aks-pre__f legend {
  padding: 0 .6rem 0 0; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ak-dim);
}
.aks-pre__f label { display: block; padding: .34rem 0; font-size: 1.02rem; cursor: pointer; }
.aks-pre__f label span { color: var(--ak-tr); font-size: .88rem; }
.aks-pre__f input { margin-right: .5rem; accent-color: var(--indigo-600); }
.aks-pre__keys { margin: 0; font-size: .9rem; color: var(--ak-tr); line-height: 1.9; }
.aks-pre__keys b {
  font-weight: 400; padding: .1rem .42rem; border-radius: 4px;
  border: 1px solid var(--ak-dim); color: var(--ak-gur);
}
.aks-pre__off { margin: 0; font-size: .86rem; color: var(--ak-dim); }
.aks-pre__off[data-offline="ready"] { color: var(--ak-tr); }
.aks-pre__off[data-offline="no"]    { color: var(--madder-500); }
.aks-pre__go {
  align-self: flex-start; font: inherit; font-size: 1.05rem;
  padding: .66rem 2.2rem; border-radius: 8px; cursor: pointer;
  color: var(--ak-ground); background: var(--ak-gur); border: 0;
}
.aks-review {
  flex: none; margin: 0; padding: .85rem clamp(1.2rem, 6vw, 4rem);
  font-size: .92rem; line-height: 1.55; color: var(--madder-600);
  background: color-mix(in srgb, var(--madder-500) 10%, var(--ak-ground));
  border-bottom: 1px solid color-mix(in srgb, var(--madder-500) 34%, transparent);
}
.aks-root.is-live .aks-review { display: none; }

/* ---------------------------------------------------------------------------
   5 · The stage and the slides
   --------------------------------------------------------------------------- */
.aks-stage { position: absolute; inset: 0; }
.aks-root.is-open:not(.is-live) .aks-stage { display: none; }
.aks-root.is-live { cursor: none; }

.aks { display: none; position: absolute; inset: 0; }
.aks.is-on { display: grid; place-items: center; }
/* THE SLIDE BOX. 88vw x 84vh, and every vertical measurement below is an
   explicit margin in --u with an explicit line-height — no `gap`, no `normal`
   line-height, nothing inherited.

   That is not fussiness. build-anand-karaj-slides.py computes, offline and in
   Python, whether each slide fits this box at the minimum legible Gurmukhi
   size, and FAILS THE BUILD if one does not. Its arithmetic mirrors the rules
   in this block line for line. An inherited line-height or a flex `gap` here
   is a number the fit check cannot see, and a fit check that cannot see a
   number is a fit check that lies.

   If you change any measurement in this block, change SIZES in that script to
   match, and re-run it. _qa/qa-anand-karaj-slides.js measures the real boxes in
   three projector geometries and will catch you if you do not. */
.aks__in {
  width: var(--ak-box-w); max-height: var(--ak-box-h); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
}

/* Every slide shrinks to fit and centres as a block.

   Type here is sized against the projected HEIGHT, so on a 16:9 surface the
   lines only use about half the available width and a left-aligned 88vw box
   leaves the text stranded against the left edge with a void beside it. The
   lines stay left-aligned — ragged right is easier to read than centred verse,
   and a centred romanisation under a centred Gurmukhi line would sway — but
   the block they sit in is centred.

   max-content is the width of the longest UNWRAPPED line, capped at 88vw, so
   this cannot make anything wrap that did not wrap before. The build's fit
   check measured against 88vw and its arithmetic still holds. */
.aks__in { width: max-content; max-width: var(--ak-box-w); }

/* ---- the three lanes. Fixed order, every scripture slide, no exceptions
        (AK15): Gurmukhi top and largest, romanisation, English.

        The ratios are asymmetric on purpose. English is the lane most of the
        non-Gurmukhi-reading sangat is actually reading and must not be an
        afterthought; the romanisation serves people who speak Punjabi and read
        only Latin script, which at a diaspora wedding is a large group.

        --g / --rt / --re are computed per slide by the build's fit check and
        set inline. Do not override them here.                              ---- */
.aks__tuk + .aks__tuk { margin-top: calc(var(--ak-gap-tuk) * var(--u)); }
.aks__tuk p { margin: 0; }

.aks-gur {
  font-family: "AKGurmukhi", "Noto Serif Gurmukhi", serif;
  font-weight: 500;
  font-size: calc(var(--g) * var(--u));
  color: var(--ak-gur);
  /* 1.6 minimum. Vowel signs stack above the sirlekh and nasal marks sit above
     those; subscript conjuncts hang below. A line-height tuned for Latin will
     clip or collide them — the most common way Gurmukhi gets broken in web
     layouts. ਅੰਮ੍ਰਿਤੁ is the test case and it is in this corpus. */
  line-height: var(--ak-lh-gur);
  /* NOT text-wrap:pretty. Wrapping here is governed by the build's fit check
     and must be predictable, not optimised. */
  text-wrap: normal;
}
.aks-tr, .aks-en {
  font-family: "AKLatin", Georgia, "Times New Roman", serif;
  line-height: var(--ak-lh-lat);
  /* pretty on the Latin lanes only, so a wrapped English line does not leave
     one orphan word */
  text-wrap: pretty;
}
.aks-tr { font-size: calc(var(--g) * var(--rt) * var(--u)); color: var(--ak-tr); margin-top: calc(var(--ak-gap-lane) * var(--u)) !important; }
.aks-en { font-size: calc(var(--g) * var(--re) * var(--u)); color: var(--ak-en); margin-top: calc(var(--ak-gap-lane) * var(--u)) !important; }

/* ---- held-slide furniture ------------------------------------------------ */
.aks__head { margin-bottom: calc(var(--ak-head-gap) * var(--u)); }
.aks__unit {
  margin: 0; font-size: calc(var(--ak-unit-size) * var(--u)); line-height: var(--ak-unit-lh);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ak-dim);
}
.aks__theme {
  margin: calc(var(--ak-theme-gap) * var(--u)) 0 0; font-size: calc(var(--ak-theme-size) * var(--u));
  line-height: var(--ak-theme-lh); color: var(--ak-tr); font-style: italic;
}
.aks__cite {
  margin: calc(var(--ak-cite-gap) * var(--u)) 0 0; font-size: calc(var(--ak-cite-size) * var(--u));
  line-height: var(--ak-cite-lh); letter-spacing: .1em; color: var(--ak-dim);
}
/* §3.5: ang numbers and citations live on the HELD slide only. A citation on
   every slide is clutter on a wall; an operator or a curious guest can find it
   here, and nobody has to read past it. */

/* ---- section-transition slides ------------------------------------------- */
.aks--section .aks__in { align-items: center; text-align: center; }
.aks__sec {
  margin: 0; font-size: calc(5 * var(--u)); color: var(--ak-gur);
  letter-spacing: .02em; padding-bottom: calc(1.6 * var(--u));
  border-bottom: 1px solid var(--ak-rule);   /* the one and only use of gold */
}

/* ---- explain slides -------------------------------------------------------
   §3.4 Constraint 3: visually distinct, never overlaid. Different ground (the
   inverse of the active theme), no Gurmukhi anywhere on them, different type
   treatment, and a fixed small-caps label. A person glancing up must know
   within a quarter second that they are not looking at scripture.

   They are their own slides or nothing — never composited onto a scripture
   slide, never as a lower third, never as an overlay.
   ------------------------------------------------------------------------- */
.aks--explain { background: var(--ak-x-ground); color: var(--ak-x-text); }
.aks--explain .aks__in { gap: calc(2 * var(--u)); }
.aks__label {
  margin: 0 0 calc(1.4 * var(--u)); font-size: calc(1.8 * var(--u));
  letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ak-x-text) 62%, var(--ak-x-ground));
}
.aks__x p {
  margin: 0 0 calc(1.6 * var(--u)); font-size: calc(3 * var(--u));
  line-height: 1.5; text-wrap: pretty; max-width: 34em;
}
.aks__x p:last-child { margin-bottom: 0; }

/* ---- the attribution slide ------------------------------------------------
   §3.5: no logo, no wordmark, no URL on any scripture slide. One slide at the
   very end carries the translation credit and the site name. The tool is a
   guest at someone's wedding; it does not sign the wall. */
.aks--credit .aks__in { align-items: center; text-align: center; }
.aks__credit p {
  margin: 0 0 calc(1.4 * var(--u)); font-size: calc(2.2 * var(--u));
  line-height: 1.5; color: var(--ak-tr); max-width: 40em;
}
.aks__credit p:last-child { color: var(--ak-dim); letter-spacing: .2em; text-transform: uppercase; font-size: calc(1.7 * var(--u)); }

/* ---------------------------------------------------------------------------
   6 · Furniture — small, low contrast, fixed corner
   ---------------------------------------------------------------------------
   Legible from the operator's laptop at a metre; nearly invisible from the
   back of the hall. Both are suppressed entirely when blanked.
   --------------------------------------------------------------------------- */
.aks-where, .aks-flag {
  position: absolute; margin: 0; font-size: calc(1.4 * var(--u));
  letter-spacing: .1em; color: var(--ak-dim); pointer-events: none;
}
.aks-where { bottom: calc(2 * var(--u)); left: calc(2.6 * var(--u)); }
.aks-flag  { bottom: calc(2 * var(--u)); right: calc(2.6 * var(--u)); text-transform: uppercase; }
.aks-root:not(.is-live) .aks-where,
.aks-root:not(.is-live) .aks-flag { display: none; }

.aks-exit {
  position: absolute; top: calc(1.6 * var(--u)); right: calc(1.6 * var(--u));
  font: inherit; font-size: calc(1.5 * var(--u)); letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
  color: var(--ak-dim); background: none; border: 1px solid var(--ak-dim);
  border-radius: 4px; padding: calc(.5 * var(--u)) calc(1.2 * var(--u));
}
.aks-exit:hover { color: var(--ak-gur); border-color: var(--ak-gur); }
.aks-root:not(.is-live) .aks-exit { display: none; }

/* ---- blanked. Fully black in BOTH themes — not the theme's ground, not
        dimmed. During ardās the sangat stands and the screen must go dark.
        Instant, no transition, in either direction. Nothing advances while
        blanked and the position is held. ------------------------------------ */
.aks-root.is-blank { background: #000; cursor: none; }
.aks-root.is-blank .aks-stage,
.aks-root.is-blank .aks-where,
.aks-root.is-blank .aks-flag,
.aks-root.is-blank .aks-exit { visibility: hidden; }

/* ---------------------------------------------------------------------------
   7 · The jump menu
   ---------------------------------------------------------------------------
   The full map. Keyboard-only throughout, and WHILE IT IS OPEN THE PROJECTED
   SLIDE DOES NOT CHANGE — the operator browses without the hall seeing the
   browsing. Enter commits, Esc cancels.
   --------------------------------------------------------------------------- */
.aks-jump { position: absolute; inset: 0; display: grid; place-items: center;
            background: color-mix(in srgb, #000 72%, transparent); }
.aks-jump[hidden] { display: none; }
.aks-jump__in {
  width: min(52rem, var(--ak-box-w)); max-height: 80vh; overflow: auto;
  background: var(--ak-ground); color: var(--ak-gur);
  border: 1px solid var(--ak-dim); border-radius: 10px;
  padding: calc(2 * var(--u)) calc(2.4 * var(--u));
}
.aks-jump__h { margin: 0 0 calc(1.2 * var(--u)); font-size: calc(1.7 * var(--u));
               letter-spacing: .24em; text-transform: uppercase; color: var(--ak-dim); }
.aks-jump__l { margin: 0; padding: 0; list-style: none; }
.aks-jump__l li {
  padding: calc(.8 * var(--u)) calc(1 * var(--u)); font-size: calc(2.1 * var(--u));
  border-radius: 5px; display: flex; justify-content: space-between; gap: 2em;
}
.aks-jump__l li[aria-selected="true"] { background: var(--ak-gur); color: var(--ak-ground); }
.aks-jump__l li span { color: var(--ak-dim); font-size: calc(1.5 * var(--u)); letter-spacing: .1em; }
.aks-jump__l li[aria-selected="true"] span { color: var(--ak-ground); }
.aks-jump__f { margin: calc(1.4 * var(--u)) 0 0; font-size: calc(1.4 * var(--u)); color: var(--ak-dim); }

/* ---------------------------------------------------------------------------
   8 · Mode and explain filtering
   --------------------------------------------------------------------------- */
.aks-root[data-mode="simple"] .aks:not([data-modes~="simple"]) { display: none !important; }
.aks-root[data-explain="off"] .aks--explain { display: none !important; }

/* ---------------------------------------------------------------------------
   9 · Reduced motion, asserted rather than assumed
   ---------------------------------------------------------------------------
   There is no transition or animation in this file, so this block changes
   nothing today. It is here so that adding one later fails to take effect for
   an operator who has asked for stillness, rather than quietly working.
   VERIFY BY FLIPPING THE OS SETTING, not by reading this comment.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aks-root, .aks-root * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   10 · Print — the no-JS document, on paper
   ---------------------------------------------------------------------------
   §8 defers the PDF deck, but a printed running order is the most robust
   presenter view a gurdwara can have, because paper does not crash, sleep or
   lose focus. When the slides are visible (no-JS, or the reader has opened
   them), print them as an ordered document.
   --------------------------------------------------------------------------- */
@media print {
  .aks-pre, .aks-jump, .aks-where, .aks-flag, .aks-exit, .aks-launch__b { display: none !important; }
  .aks-root.is-open { position: static; overflow: visible; background: #fff; color: #000; }
  .aks-root.is-open .aks-stage { position: static; }
  .aks-root.is-open .aks { display: block !important; position: static;
                           page-break-inside: avoid; padding: 0 0 1.2rem;
                           border-bottom: 1px solid #ccc; }
  .aks-root.is-open .aks__in { width: auto; max-height: none; }
  .aks-root.is-open .aks-gur { font-size: 15pt; color: #000; }
  .aks-root.is-open .aks-tr  { font-size: 10pt; color: #333; }
  .aks-root.is-open .aks-en  { font-size: 10.5pt; color: #000; }
  .aks-root.is-open .aks__unit, .aks-root.is-open .aks__cite { font-size: 8pt; color: #555; }
  .aks-root.is-open .aks__theme { font-size: 10pt; color: #333; }
  .aks-root.is-open .aks--explain { background: #f2f2f2; color: #000; }
  .aks-root.is-open .aks__x p, .aks-root.is-open .aks__sec { font-size: 11pt; }
}