/* BioTwin education decks (metabolomics, Bio-Signatures).
   Same stage, typography, palette and controls as /understand: this sheet is
   loaded after deck.css, deck-mobile.css and biotwin-decks.css and only adds
   what these decks need. A readable caption under each title, illustrated
   figures, the tree and forest split, the scientific context panel, a
   portrait layout for phones and the Arabic right-to-left reading. */

body.edu-deck {
  --edu-panel-bottom: 92px;
  --edu-ivory: #f6f4eb;
  color-scheme: dark;
}
.edu-deck .speaker-note { display: none !important; }
.edu-deck .brand img { object-fit: contain; }
.edu-deck .slide h1, .edu-deck .slide h2 { max-width: 13em; }
.edu-deck .slide h2 { font-size: clamp(38px, 4.7vw, 90px); }
.edu-deck .slide h1 { font-size: clamp(46px, 5.6vw, 108px); }
.edu-deck .slide h1:focus, .edu-deck .slide h2:focus { outline: none; }
/* Bio-Signature never breaks at its hyphen; Latin names keep their direction in Arabic. */
.edu-deck .edu-nowrap { white-space: nowrap; unicode-bidi: isolate; }

/* Caption: one or two sentences under the title, readable from the back of a room. */
.edu-deck .edu-caption {
  max-width: 46ch;
  margin-top: 1.05em;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(16px, 1.3vw, 25px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.edu-deck .edu-note {
  max-width: 54ch;
  margin-top: 1.1em;
  padding-inline-start: .8em;
  border-inline-start: 3px solid var(--aqua);
  color: rgba(255, 255, 255, .8);
  font-size: clamp(12px, .92vw, 17px);
  line-height: 1.45;
}
.edu-deck .edu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin: 1.25em 0 0;
  padding: 0;
  list-style: none;
}
.edu-deck .edu-chips li {
  display: inline-flex;
  align-items: center;
  padding: .45em .9em;
  border: 1px solid rgba(182, 214, 187, .42);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: clamp(12px, .95vw, 17px);
  font-weight: 750;
}
.edu-deck .edu-pathway li > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-inline-end: .5em;
  border-radius: 50%;
  background: var(--aqua);
  color: var(--navy);
  font-size: .82em;
  font-weight: 900;
}

/* Figures: the illustrated scenes of the series, framed on the dark stage. */
.edu-deck .edu-figure {
  background:
    radial-gradient(circle at 74% 46%, rgba(182, 214, 187, .16), transparent 40%),
    linear-gradient(135deg, var(--navy), #10251f 82%);
}
.edu-deck .edu-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 6.5%;
  width: 36%;
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: clamp(14px, 1.6vw, 30px);
  background: var(--edu-ivory);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .36);
  transform: translateY(-50%);
}
.edu-deck .edu-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edu-deck .edu-figure-copy {
  width: 56%;
  justify-content: center;
  padding: 7.2% 2% 7.2% 7.5%;
}
.edu-deck .edu-waypoint {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border: 1px solid rgba(25, 58, 53, .5);
  border-radius: 50%;
  background: #fffdf7;
  color: #193a35;
  font-size: clamp(11px, .95vw, 17px);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(25, 58, 53, .16);
  transform: translate(-50%, -50%);
}
.edu-deck .edu-waypoint-1 { left: 26%; top: 8%; }
.edu-deck .edu-waypoint-2 { left: 72%; top: 20%; }
.edu-deck .edu-waypoint-3 { left: 28%; top: 48%; }
.edu-deck .edu-waypoint-4 { left: 75%; top: 62%; }

/* Photograph kept on the image side of the slide, at its own sharpness. */
.edu-deck .bg.edu-region { left: auto; right: 0; width: var(--edu-region, 42%); }
.edu-deck .scrim.edu-region-edge {
  background: linear-gradient(90deg, #10251f 0%, #10251f calc(100% - var(--edu-region, 42%)), #10251f99 calc(100% - var(--edu-region, 42%) + 5%), transparent calc(100% - var(--edu-region, 42%) + 18%));
}
[dir="rtl"] .edu-deck .bg.edu-region { right: auto; left: 0; }
[dir="rtl"] .edu-deck .scrim.edu-region-edge { transform: scaleX(-1); }

/* One tree, the whole forest. */
.edu-deck .edu-split {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: grid;
  grid-template-columns: 3fr 7fr;
}
.edu-deck .edu-split figure { position: relative; margin: 0; overflow: hidden; }
.edu-deck .edu-split img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edu-deck .edu-split figure:first-child { border-inline-end: 3px solid rgba(246, 244, 235, .88); }
.edu-deck .edu-split figcaption {
  position: absolute;
  top: 13%;
  left: 50%;
  padding: .55em 1em;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(16, 37, 31, .74);
  color: #fff;
  font-size: clamp(10px, .86vw, 15px);
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}
.edu-deck .edu-split-slide .scrim.bottom {
  background: linear-gradient(0deg, #10251ff5 0%, #10251fcc 34%, #10251f40 62%, transparent 80%);
}
.edu-deck .edu-split-slide .content { width: 80%; }

/* Steps and summary cards. */
.edu-deck .edu-wide-copy { width: 88%; justify-content: center; padding: 8.5% 7.5% 8%; }
.edu-deck .edu-steps,
.edu-deck .edu-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1vw;
  width: 100%;
  margin: 2em 0 0;
  padding: 0;
  list-style: none;
  counter-reset: edu-step;
}
.edu-deck .edu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.edu-deck .edu-steps li,
.edu-deck .edu-cards li {
  padding: 1.1em 1.05em 1.2em;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 1vw;
  background: rgba(255, 255, 255, .06);
}
.edu-deck .edu-steps li::before {
  counter-increment: edu-step;
  content: counter(edu-step, decimal-leading-zero);
  display: block;
  margin-bottom: .7em;
  color: var(--aqua);
  font-size: clamp(11px, .85vw, 15px);
  font-weight: 900;
  letter-spacing: .12em;
}
.edu-deck .edu-steps li.is-key { border-color: var(--aqua); background: rgba(182, 214, 187, .15); }
.edu-deck .edu-steps b,
.edu-deck .edu-cards b {
  display: block;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 23px);
  letter-spacing: -.02em;
}
.edu-deck .edu-cards b { color: var(--aqua); }
.edu-deck .edu-steps li > span,
.edu-deck .edu-cards li > span {
  display: block;
  margin-top: .4em;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(12px, .95vw, 17px);
  line-height: 1.38;
}

/* Closing slide and language links. */
.edu-deck .edu-actions { justify-content: flex-start; gap: .8em; margin-top: 1.7em; }
.edu-deck .edu-actions .deck-cta { min-height: 46px; font-size: clamp(12px, .95vw, 17px); }
.edu-deck .edu-actions .edu-arrow { margin-inline-start: .5em; }
.edu-deck .edu-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35em 1em;
  margin-top: 1.4em;
  color: rgba(255, 255, 255, .66);
  font-size: clamp(11px, .85vw, 15px);
  font-weight: 700;
}
.edu-deck .edu-langs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(182, 214, 187, .7);
  text-underline-offset: 4px;
}

/* Controls and panels, as in the other decks. */
.edu-deck .edu-controls { opacity: .94; }
.edu-deck .edu-controls button:disabled { opacity: .3; cursor: default; }
.edu-deck .edu-controls .notes-button { width: 38px; padding: 0; font-size: 18px; font-weight: 800; }
.edu-deck .counter { direction: ltr; unicode-bidi: isolate; }
.edu-deck .act-nav button { min-height: 44px; padding: 8px 0; }
.edu-deck .edu-return { gap: 8px; }
.edu-deck.edu-embedded .edu-return { display: none; }
.edu-deck .notes-panel { bottom: var(--edu-panel-bottom); max-height: min(65vh, calc(100dvh - var(--edu-panel-bottom) - 20px)); }
.edu-deck .chapters-sheet { bottom: var(--edu-panel-bottom); max-height: min(74vh, calc(100dvh - var(--edu-panel-bottom) - 20px)); }
.edu-deck .notes-panel h3,
.edu-deck .help-panel h3 { padding-inline-end: 36px; line-height: 1.4; }
.edu-deck .notes-panel p + p { margin-top: 12px; }
.edu-deck .notes-panel h4 {
  margin: 18px 0 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(182, 214, 187, .28);
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.edu-deck .edu-sources { margin: 0; padding: 0; list-style: none; }
.edu-deck .edu-sources a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  min-height: 44px;
  padding: 8px 0;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.edu-deck .edu-sources a span:not(.sr-only) { grid-column: 1; color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 500; }
.edu-deck .edu-sources a b { grid-column: 2; grid-row: 1; color: var(--aqua); }
.edu-deck .edu-sources a:hover { text-decoration: underline; text-underline-offset: 3px; }
.edu-deck .edu-more a { color: var(--aqua); font-weight: 800; }
.edu-deck .edu-panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 28px;
  cursor: pointer;
}
.edu-deck :is(a, button, [tabindex]):focus-visible { outline: 3px solid #ead1a0; outline-offset: 4px; }
.edu-deck .edu-skip { position: fixed; top: -100px; left: 12px; z-index: 120; padding: 12px 18px; background: #fff; color: #142e29; }
.edu-deck .edu-skip:focus { top: 12px; }
.edu-deck .edu-noscript { padding: 24px; background: #fff; color: #142e29; }

/* Without scripting, every slide stays readable one after another. */
html:has(body.edu-deck:not(.edu-ready)) { height: auto; overflow: auto; }
.edu-deck:not(.edu-ready) { height: auto; overflow: auto; }
.edu-deck:not(.edu-ready) .deck-shell { position: static; display: block; }
.edu-deck:not(.edu-ready) .stage { width: 100%; height: auto; overflow: visible; }
.edu-deck:not(.edu-ready) .slide { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; animation: none; }
.edu-deck:not(.edu-ready) :is(.controls, .act-nav, .progress) { display: none; }

/* Arabic: the composition of the photographs and figures is mirrored so the
   text keeps the dark side of each image, and the text itself reads right to
   left. The counter keeps its digits in order. */
[dir="rtl"] .edu-deck .edu-mirror { scale: -1 1; }
[dir="rtl"] .edu-deck .scrim.left { transform: scaleX(-1); }
[dir="rtl"] .edu-deck .content.left { right: 0; left: auto; text-align: right; }
[dir="rtl"] .edu-deck .edu-figure-copy { padding: 7.2% 7.5% 7.2% 2%; }
[dir="rtl"] .edu-deck .edu-art { right: auto; left: 6.5%; }
[dir="rtl"] .edu-deck .edu-figure {
  background:
    radial-gradient(circle at 26% 46%, rgba(182, 214, 187, .16), transparent 40%),
    linear-gradient(225deg, var(--navy), #10251f 82%);
}
[dir="rtl"] .edu-deck .edu-split { direction: rtl; }
[dir="rtl"] .edu-deck .slide h1,
[dir="rtl"] .edu-deck .slide h2 { letter-spacing: 0; line-height: 1.12; }
[dir="rtl"] .edu-deck .act { letter-spacing: .02em; }
[dir="rtl"] .edu-deck .edu-split figcaption,
[dir="rtl"] .edu-deck .notes-panel h4 { letter-spacing: 0; }
[dir="rtl"] .edu-deck .brand { right: auto; left: 4.4%; }
[dir="rtl"] .edu-deck .slide-no { right: auto; left: 4.4%; }
[dir="rtl"] .edu-deck .edu-panel-close { right: auto; left: 8px; }
[dir="rtl"] .edu-deck .site-return { left: auto; right: 22px; }

/* Phones and portrait screens: the whole viewport becomes the slide. */
@media (max-width: 760px), (orientation: portrait) {
  .edu-deck .stage { width: 100vw; height: 100svh; }
  .edu-deck .brand { top: 23px; right: 20px; width: 112px; }
  [dir="rtl"] .edu-deck .brand { right: auto; left: 20px; }
  .edu-deck .site-return { max-width: calc(100vw - 155px); font-size: 11px; padding-inline: 11px; }
  [dir="rtl"] .edu-deck .site-return { right: 12px; left: auto; }
  .edu-deck .slide .content,
  .edu-deck .slide .content.bottom,
  .edu-deck .slide .edu-figure-copy,
  .edu-deck .slide .edu-wide-copy {
    width: 100% !important;
    padding: 100px 24px max(172px, var(--edu-copy-bottom, 172px)) !important;
    justify-content: flex-end;
  }
  .edu-deck .slide h1,
  .edu-deck .slide h2 {
    max-width: 18ch !important;
    font-size: clamp(29px, 7.9vw, 44px) !important;
    line-height: 1.07 !important;
  }
  [dir="rtl"] .edu-deck .slide h1,
  [dir="rtl"] .edu-deck .slide h2 { line-height: 1.2 !important; }
  .edu-deck .edu-caption { max-width: 36ch; margin-top: 14px; font-size: 16.5px; line-height: 1.42; }
  .edu-deck .edu-note { margin-top: 12px; font-size: 13px; }
  .edu-deck .edu-chips { margin-top: 14px; gap: 6px; }
  .edu-deck .edu-chips li { padding: 6px 10px; font-size: 12.5px; }
  .edu-deck .scrim.left,
  .edu-deck .scrim.bottom { background: linear-gradient(0deg, #10251f 8%, #10251fe6 38%, #10251f73 66%, #10251f1a); }
  [dir="rtl"] .edu-deck .scrim.left { transform: none; }
  /* The photograph kept on one side becomes the upper band of the phone slide. */
  .edu-deck .bg.edu-region,
  [dir="rtl"] .edu-deck .bg.edu-region { inset: 0 0 auto 0; width: 100%; height: 58%; }
  .edu-deck .scrim.edu-region-edge,
  [dir="rtl"] .edu-deck .scrim.edu-region-edge { transform: none; background: linear-gradient(0deg, #10251f 0%, #10251f 42%, #10251fb3 50%, transparent 66%); }
  .edu-deck .edu-figure .edu-art {
    top: 76px;
    right: 50%;
    left: auto;
    width: min(70vw, 34svh);
    transform: translateX(50%);
  }
  [dir="rtl"] .edu-deck .edu-figure .edu-art { right: 50%; left: auto; }
  .edu-deck .edu-split { grid-template-columns: 38fr 62fr; }
  .edu-deck .edu-split figcaption { top: 88px; font-size: 10px; padding: 6px 9px; letter-spacing: .06em; }
  .edu-deck .edu-steps,
  .edu-deck .edu-cards { grid-template-columns: 1fr; gap: 7px; margin-top: 16px; }
  .edu-deck .edu-steps li,
  .edu-deck .edu-cards li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; padding: 9px 12px; border-radius: 12px; }
  .edu-deck .edu-cards li { grid-template-columns: 1fr; }
  .edu-deck .edu-steps li::before { grid-row: span 2; margin: 0; }
  .edu-deck .edu-steps b, .edu-deck .edu-cards b { font-size: 15px; }
  .edu-deck .edu-steps li > span, .edu-deck .edu-cards li > span { margin-top: 0; font-size: 13px; }
  .edu-deck .edu-actions { flex-direction: column; align-items: stretch; margin-top: 18px; }
  .edu-deck .edu-actions .deck-cta { justify-content: center; font-size: 14px; }
  .edu-deck .edu-langs { margin-top: 10px; font-size: 12px; }
  .edu-deck .slide-no { display: none; }
  .edu-deck .edu-controls { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); gap: 4px; padding: 6px; }
  .edu-deck .edu-controls button { width: 44px; height: 44px; }
  .edu-deck .edu-controls .notes-button { width: 44px; }
  .edu-deck .edu-controls .counter { min-width: 52px; }
  .edu-deck #fullBtn { display: none; }
  .edu-deck .notes-panel { left: 8px; right: 8px; width: auto; }
  .edu-deck .help-panel { top: auto; bottom: var(--edu-panel-bottom); left: 8px; right: 8px; width: auto; max-height: calc(100dvh - var(--edu-panel-bottom) - 20px); transform: none; }
  .edu-deck:not(.edu-ready) .slide { min-height: 740px; aspect-ratio: auto; }
}

/* A figure slide keeps its image above the text on the smallest phones. */
@media (max-width: 760px) and (max-height: 720px), (orientation: portrait) and (max-height: 720px) {
  .edu-deck .edu-figure .edu-art { width: min(52vw, 26svh); top: 70px; }
  .edu-deck .slide h1,
  .edu-deck .slide h2 { font-size: clamp(26px, 7vw, 34px) !important; }
  .edu-deck .edu-caption { font-size: 15px; }
}

@media print {
  .edu-deck .stage { width: 16in; height: auto; }
  .edu-deck .slide { width: 16in; height: 9in; }
  .edu-deck .edu-skip { display: none; }
}