/*
 * marketing.telonic.ai web decks: the shared runtime CSS (MK-3; ARCHITECTURE 4.2, 4.3, 4.6). Both deck families use it.
 *
 * Source file: build/shell.mjs processes it before it is served (processRuntimeCss):
 *  - `@media screen and (min-width: 1024px) and (min-height: 640px) and (hover: hover) and (pointer: fine)` becomes `screen and <stageQuery>` and `@media not all and (min-width: 1024px), not all and (min-height: 640px), not all and (hover: hover), not all and (pointer: fine)` its exact complement on screen, both
 *    from config/marketing.json `stageQuery` (C2; the query is written nowhere else);
 *  - the token comment below becomes a :root block of --mk-* colours whose values are read from styles/tokens.css.
 * The bar never uses the decks' own tokens (same names, separate source) and is never styled by deck CSS.
 *
 * Text pairings (WCAG AA): text #2A1F29 on white 15.83:1; muted #6C5E6A on white 6.09:1; focus ring accent #B04A2A on
 * white 5.44:1 (non-text, 3:1 needed); control border #8E7E8B on white 3.81:1 (non-text). The accent never sits on the
 * anchor: the bar is white, and the lockup is the kit's colour version (anchor artwork, accent terminal) on white.
 * Motion: none. The fit scale() is static (owner decision 8); slide changes use CSS scroll-behavior, `auto` under
 * reduced motion.
 */
:root{--mk-ground:#FFFFFF;--mk-surface:#F8F4F7;--mk-border:#E8E0E6;--mk-control:#8E7E8B;--mk-text:#2A1F29;--mk-muted:#6C5E6A;--mk-anchor:#442C43;--mk-accent:#B04A2A;--mk-focus:#B04A2A}
:root {
  --mk-bar-h: 48px;
  --mk-font: "mk-bar", system-ui, sans-serif;
}

/* ---------- The header bar (both modes) ---------- */
.mk-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  block-size: var(--mk-bar-h);
  margin: 0;
  padding-block: 0;
  padding-inline: 24px;
  background: var(--mk-ground);
  border-block-end: 1px solid var(--mk-border);
  color: var(--mk-text);
  font-family: var(--mk-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.mk-bar *,
.mk-bar *::before,
.mk-bar *::after { box-sizing: border-box; letter-spacing: normal; text-transform: none; }
:is(:lang(ar), :lang(ur)).mk-bar,
.mk-bar :is(:lang(ar), :lang(ur)) { font-size: 15px; }
.mk-bar svg { display: block; flex: none; }

.mk-bar a,
.mk-bar summary,
.mk-bar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 40px;
  margin: 0;
  padding-block: 0;
  padding-inline: 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mk-bar a:hover,
.mk-bar summary:hover { color: inherit; }
.mk-bar a:hover > span,
.mk-bar summary:hover > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mk-bar :focus { outline: none; }
.mk-bar :focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }

/* Brand lockup (the kit's colour version) to the hub; the mark alone below 360px. */
.mk-bar .mk-home { padding-inline: 0; color: var(--mk-anchor); }
.mk-home .mk-term { fill: var(--mk-accent); }
.mk-home .mk-mark { display: none; }
.mk-bar .mk-back { margin-inline-start: 8px; }
.mk-back svg { inline-size: 16px; block-size: 16px; }
html[dir="rtl"] .mk-back svg { transform: scaleX(-1); }   /* the chevron points back in either direction */

.mk-end { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }

/* Slide counter and Previous / Next: JavaScript only (html[data-js] is set by an inline script in the head). */
.mk-nav { display: flex; align-items: center; gap: 4px; margin-inline-end: 8px; }
.mk-count { min-inline-size: 56px; color: var(--mk-muted); font-variant-numeric: tabular-nums; text-align: center; }
.mk-bar .mk-btn {
  justify-content: center;
  inline-size: 32px;
  min-block-size: 32px;
  block-size: 32px;
  padding: 0;
  border: 1px solid var(--mk-control);
}
.mk-bar .mk-btn:hover { background: var(--mk-surface); }
.mk-btn svg { inline-size: 18px; block-size: 18px; }
html:not([data-js]) .mk-js { display: none !important; }

/* Language menu: a native <details>, so it opens without JavaScript. */
.mk-lang { position: relative; }
.mk-lang details { position: relative; }
.mk-lang summary { list-style: none; }
.mk-lang summary::-webkit-details-marker { display: none; }
.mk-lang summary::marker { content: ""; }
.mk-lang summary svg { inline-size: 16px; block-size: 16px; }
.mk-lang details[open] > summary { background: var(--mk-surface); }
.mk-lang ul {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 1;
  min-inline-size: 184px;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--mk-ground);
  border: 1px solid var(--mk-border);
  border-radius: 6px;
}
.mk-lang li { margin: 0; padding: 0; }
.mk-bar .mk-lang li a { display: flex; inline-size: 100%; padding-inline: 12px; }
.mk-bar .mk-lang a[aria-current="page"] {
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--mk-accent);
  border-radius: 0 4px 4px 0;
  background: var(--mk-surface);
}
html[dir="rtl"] .mk-bar .mk-lang a[aria-current="page"] { border-radius: 4px 0 0 4px; }

.mk-pdf svg { inline-size: 16px; block-size: 16px; }

/* Narrow screens: lockup, Back, language and PDF only (ARCHITECTURE 4.3). */
@media (max-width: 639.98px) {
  .mk-bar { gap: 4px; padding-inline: 12px; }
  .mk-bar .mk-back { margin-inline-start: 4px; }
  .mk-end { gap: 0; }
  .mk-nav,
  .mk-lang .mk-caret { display: none; }
}
@media (max-width: 359.98px) {
  .mk-home .mk-lockup { display: none; }
  .mk-home .mk-mark { display: block; }
}

/* ---------- Page (screen) ---------- */
/* Slides start below the sticky bar (snap positions, #slide-N, scrollIntoView). A scroll margin on the slides, not
   a scroll padding on html: with scroll-padding, Chrome scrolls the page when a control in the sticky bar takes focus. */
@media screen {
  body { margin: 0; }
  .mk-deck > .ds { scroll-margin-block-start: var(--mk-bar-h); }
}
/* Very short screens (a phone held sideways): the bar scrolls away. Never stage mode (it needs 640px). */
@media screen and (max-height: 500px) {
  .mk-deck > .ds { scroll-margin-block-start: 0; }
  .mk-bar { position: static; }
}

/* ---------- Stage mode (desktop): one slide per screen, the 1920x1080 slide scaled to fit ---------- */
@media screen and (min-width: 1024px) and (min-height: 640px) and (hover: hover) and (pointer: fine) {
  @supports (scale: tan(atan2(1px, 1px))) {
    html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
    .mk-deck { display: block; margin: 0; padding: 0; }
    .mk-deck > .ds {
      display: grid;
      place-items: center;
      box-sizing: border-box;
      block-size: calc(100dvh - var(--mk-bar-h));
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: var(--mk-surface);
      container-type: size;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }
    .ds > .ds-frame {
      --s: min(tan(atan2(100cqw, 1920px)), tan(atan2(100cqh, 1080px)));
      inline-size: calc(1920px * var(--s));
      block-size: calc(1080px * var(--s));
      overflow: hidden;
      direction: ltr;   /* origin 0 0 is the top left in every language; each slide keeps its own dir */
      outline: 1px solid var(--mk-border);
    }
    .ds-frame > .slide-page {
      inline-size: 1920px;
      block-size: 1080px;
      transform: scale(var(--s));
      transform-origin: 0 0;
    }
    html[dir="rtl"] .ds-frame > .slide-page { direction: rtl; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

/* ---------- Print: one slide per 1920x1080 page, as the PDF ---------- */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { margin: 0; padding: 0; background: var(--mk-ground); }
  .mk-bar { display: none !important; }
  .mk-deck { display: block; margin: 0; padding: 0; }
  .mk-deck > .ds { display: block; margin: 0; padding: 0; break-after: page; break-inside: avoid; }
  .mk-deck > .ds:last-child { break-after: auto; }
  .ds > .ds-frame { inline-size: 1920px; block-size: 1080px; overflow: hidden; direction: ltr; }
  .ds-frame > .slide-page { break-after: auto; transform: none; }
  html[dir="rtl"] .ds-frame > .slide-page { direction: rtl; }
}