/* ===========================================================================
   SIPPARSOFT deck — engine chrome
   Slide stage, navigation, drawer index, overview grid, help, progress.
   Every directional value uses logical properties: this file is written once
   and is correct in RTL and LTR alike.
   =========================================================================== */

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--navy-900);
}

body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--text);
  letter-spacing: var(--tracking-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Latin fragments inside Arabic: isolate so bidi cannot reorder them, and
   never inherit Arabic tracking rules. */
.lat, .num {
  unicode-bidi: isolate;
  font-family: var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
}
.lat { direction: ltr; letter-spacing: var(--tracking-latin); }
.num { direction: ltr; letter-spacing: 0; }

/* ---------------------------------------------------------------------------
   STAGE
   --------------------------------------------------------------------------- */
.deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--paper-100);
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  /* one row, exactly the slide's height. Without this the implicit row is auto,
     so .slide__body's height:100% resolves against its own content and the frame
     silently grows to fit anything — overflow becomes undetectable and the
     autofit pass has nothing to push against. */
  grid-template-rows: minmax(0, 100%);
  background: var(--surface);
  color: var(--text);
  overflow: clip;      /* the watermark bleeds past the frame on purpose */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}
@supports (container-type: size) {
  .slide { container-type: size; container-name: slide; }
}

.slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: var(--z-slide);
  transition:
    opacity var(--dur-2) var(--ease-out),
    visibility 0s;
}

/* Content enters with a short fade + rise. Children stagger. */
.slide.is-active [data-enter] {
  animation: enter var(--dur-3) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* The autofit pass measures geometry. The entrance animation offsets elements by
   up to 14px while it runs, which would be read as overflow, so it is frozen for
   the duration of the measurement. */
html.is-measuring .slide [data-enter] { animation: none !important; transform: none !important; }

/* ---------------------------------------------------------------------------
   CLICK ZONES — inline-end edge goes back, everything else advances.
   In RTL that puts "back" under the left hand and "next" under the right,
   matching the arrow keys.
   --------------------------------------------------------------------------- */
.zone {
  position: fixed;
  inset-block: 0;
  z-index: var(--z-chrome);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zone--next { inset-inline: 0 22%; }
.zone--prev { inset-inline-end: 0; width: 22%; }
/* The zones are invisible, full-height, tabindex="-1" hit areas. The global
   :focus-visible ring would paint a 2px gold outline down the whole slide at the
   22% boundary — which reads as a stray rule cutting the presentation in half.
   They are not keyboard-reachable, so suppressing the ring costs nothing. */
.zone:focus, .zone:focus-visible { outline: none; box-shadow: none; }
body.is-overview .zone,
body.is-drawer .zone { display: none; }

/* ---------------------------------------------------------------------------
   BOTTOM BAR — progress + counter + section
   --------------------------------------------------------------------------- */
.bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  gap: var(--chrome-pad);
  padding: 0 var(--chrome-pad) calc(var(--chrome-pad) * 0.8);
  pointer-events: none;
  font-size: var(--chrome-fs);
  color: var(--text-muted);
  transition: opacity var(--dur-2) var(--ease-out);
}
body.is-overview .bar { opacity: 0; }

.bar__track {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 2px;
  background: var(--paper-400);   /* visible, so the gold reads as "filled so far" */
}
/* In RTL this fills from the right edge inward — no mirroring needed. */
.bar__fill {
  height: 100%;
  background: var(--accent-line);
  transition: width var(--dur-3) var(--ease-out);
}

.bar__section {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.bar__count {
  font-family: var(--font-sans);
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.bar__count b { color: var(--text); font-weight: var(--w-semi); }

/* ---------------------------------------------------------------------------
   TOP CHROME — logo + controls
   --------------------------------------------------------------------------- */
.top {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-chrome);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--chrome-pad);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
body.is-overview .top { opacity: 0; }

/* Chrome sits ON TOP of slides, so it has to follow the active slide's
   ground. JS mirrors data-ground onto <body>; the override is scoped to the
   chrome only, so it can never leak into a slide's own role bindings. */
body[data-ground="ink"] .top,  body[data-ground="deep"] .top,
body[data-ground="ink"] .bar,  body[data-ground="deep"] .bar {
  --text:        var(--ink-text);
  --text-muted:  var(--ink-text-muted);
  --rule:        var(--ink-rule);
  --rule-strong: rgb(247 246 242 / 0.35);
  --logo-ink:    var(--paper-100);
  --logo-dot:    var(--brand-gold);
  --accent-line: var(--gold-300);
}
body.is-overview .top, body.is-overview .bar {
  --text: var(--navy-600); --text-muted: #55708A; --rule: var(--paper-300);
}

.top__mark {
  display: block;
  height: clamp(24px, 2.7vh, 42px);
  width: calc(clamp(24px, 2.7vh, 42px) * 0.4853);  /* mark aspect 264:544 */
  opacity: 0.85;
  transition: opacity var(--dur-2) var(--ease-out);
}
/* the cover and closing slides carry the logo themselves */
body[data-slide-logo="own"] .top__mark { opacity: 0; }
.top__mark .mark-curve { fill: var(--logo-ink); }
.top__mark .mark-dot   { fill: var(--logo-dot); }

.top__ctrl { display: flex; gap: calc(var(--chrome-pad) * 0.4); pointer-events: auto; }

.btn {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-label);
  font-weight: var(--w-semi);
  font-size: var(--chrome-fs);
  letter-spacing: 0;   /* buttons carry Arabic labels — never track them */
  line-height: 1;
  padding: 0.55em 0.8em;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}
.btn:hover { color: var(--text); border-color: var(--rule-strong); }
.btn svg { display: block; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------------------------------------------------------------------------
   DRAWER INDEX — opens from the inline-start edge (the right, in Arabic)
   --------------------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: var(--z-drawer);
  width: min(30rem, 84vw);
  background: var(--paper-050);
  box-shadow: var(--shadow-3);
  transform: translateX(0);
  transition: transform var(--dur-3) var(--ease-in-out);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* inline-start is the right edge in RTL, so it hides to +100% there */
.drawer[hidden] { display: flex; }
body:not(.is-drawer) .drawer {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease-in-out), visibility 0s linear var(--dur-3);
}
html[dir="ltr"] body:not(.is-drawer) .drawer { transform: translateX(-100%); }

.drawer__head {
  padding: calc(var(--chrome-pad) * 1.4) calc(var(--chrome-pad) * 1.4) var(--chrome-pad);
  border-block-end: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.drawer__title {
  margin: 0;
  font-size: calc(var(--chrome-fs) * 1.15);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.drawer__list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--chrome-pad) * 0.6) 0 calc(var(--chrome-pad) * 2);
  margin: 0;
  list-style: none;
}
/* Section headings in the index are Arabic: no tracking, no uppercase. */
.drawer__group {
  padding: calc(var(--chrome-pad) * 1.2) calc(var(--chrome-pad) * 1.4) calc(var(--chrome-pad) * 0.4);
  font-family: var(--font-sans);
  font-size: calc(var(--chrome-fs) * 0.85);
  font-weight: var(--w-semi);
  letter-spacing: 0;
  color: var(--text-muted);
}
.drawer__group:first-child { padding-block-start: calc(var(--chrome-pad) * 0.4); }

.drawer__item {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
  padding: 0.62em calc(var(--chrome-pad) * 1.4);
  font-family: inherit;
  font-size: calc(var(--chrome-fs) * 1.08);
  line-height: var(--lh-tight);
  color: var(--text);
  border-inline-start: 2px solid transparent;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.drawer__item:hover { background: var(--paper-200); }
.drawer__item[aria-current="true"] {
  border-inline-start-color: var(--accent-line);
  background: var(--paper-200);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.drawer__n {
  flex: none;
  min-width: 2.2ch;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.86em;
}
.drawer__item[aria-current="true"] .drawer__n { color: var(--text-accent); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgb(22 41 58 / 0.34);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
body.is-drawer .scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out); }

/* ---------------------------------------------------------------------------
   OVERVIEW GRID
   Slides are laid out at their true 1920x1080 geometry and scaled down.
   Because --u is a container unit, each thumbnail is a faithful miniature of
   what the projector shows — not an approximation.
   --------------------------------------------------------------------------- */
.thumb { display: contents; }

body.is-overview { overflow: auto; }
body.is-overview .deck {
  position: static;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb-w, 320px), 1fr));
  gap: calc(var(--chrome-pad) * 1.6);
  padding: calc(var(--chrome-pad) * 4) calc(var(--chrome-pad) * 2);
  background: var(--paper-200);
  min-height: 100%;
  /* keep rows at their aspect-ratio height instead of stretching to fill */
  align-content: start;
  align-items: start;
}
body.is-overview .thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper-100);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
body.is-overview .thumb:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--rule-strong);
}
body.is-overview .thumb[data-current="true"] {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-2), 0 0 0 2px var(--accent-line);
}
body.is-overview .thumb .slide {
  position: absolute;
  inset: auto;
  width: 1920px;
  height: 1080px;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transform-origin: top right;
  transform: scale(var(--thumb-k, 0.1667));
  transition: none;
  animation: none;
}
html[dir="ltr"] body.is-overview .thumb .slide { transform-origin: top left; }
body.is-overview .thumb .slide [data-enter] { animation: none; opacity: 1; transform: none; }

.thumb__tag {
  display: none;
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 2;
  gap: 0.8em;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.6em 0.75em 0.55em;
  font-size: calc(var(--chrome-fs) * 0.92);
  line-height: 1.3;
  color: var(--paper-100);
  background: linear-gradient(to top, rgb(22 41 58 / 0.9) 35%, rgb(22 41 58 / 0));
  pointer-events: none;
}
body.is-overview .thumb__tag { display: flex; }
.thumb__tag b {
  font-weight: var(--w-semi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumb__tag .num { flex: none; color: var(--gold-300); }

.overview-head {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: calc(var(--z-overview) + 1);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--chrome-pad) calc(var(--chrome-pad) * 2);
  background: var(--paper-100);
  border-block-end: 1px solid var(--rule);
  font-size: var(--chrome-fs);
  color: var(--text-muted);
}
body.is-overview .overview-head { display: flex; }

/* ---------------------------------------------------------------------------
   HELP
   --------------------------------------------------------------------------- */
.help {
  position: fixed;
  inset: 0;
  z-index: var(--z-help);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgb(22 41 58 / 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
body.is-help .help { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-out); }

.help__panel {
  width: min(34rem, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--paper-050);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.help__panel h2 {
  margin: 0 0 1.2em;
  font-size: calc(var(--chrome-fs) * 1.4);
  font-weight: var(--w-semi);
  color: var(--text-strong);
}
.help dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7em 1.2em;
  margin: 0;
  font-size: calc(var(--chrome-fs) * 1.05);
  align-items: baseline;
}
.help dt { margin: 0; }
.help dd { margin: 0; color: var(--text-muted); }
.help kbd {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-label);
  font-size: 0.88em;
  font-weight: var(--w-semi);
  line-height: 1;
  padding: 0.42em 0.55em;
  color: var(--text-strong);
  background: var(--paper-100);
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.is-overview .deck { --thumb-w: 220px; }
}
@media (max-width: 640px) {
  body.is-overview .deck { --thumb-w: 150px; padding: calc(var(--chrome-pad) * 4) var(--chrome-pad); }
  .top__ctrl .btn--label { display: none; }
  .zone--next, .zone--prev { display: none; }  /* touch: use swipe + drawer */
}

/* ---------------------------------------------------------------------------
   MOTION PREFERENCE
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   PRINT / PDF EXPORT — one slide per page
   --------------------------------------------------------------------------- */
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  .top, .bar, .zone, .drawer, .scrim, .help, .overview-head { display: none !important; }
  .deck { position: static; }
  .thumb { display: block !important; }
  .slide {
    position: relative !important;
    inset: auto !important;
    width: 1920px; height: 1080px;
    opacity: 1 !important; visibility: visible !important;
    break-after: page;
    transform: none !important;
  }
  .slide [data-enter] { animation: none !important; opacity: 1 !important; transform: none !important; }
}