/* Orli v3 · product showcase
   ---------------------------------------------------------------------------
   Today's Orli Schools screens in device frames, two ways:
     .ps-stack      a layered set of devices that settles as it scrolls in
     .ps-carousel   one flow per slide: swipe, drag, arrows, keys, labelled dots

   Needs the v2 system (system.css: tokens, layout, the approved buttons).
   Nothing here redefines a token. Device frames are drawn in ink with the
   button family's lip (warm high on Neutral 3); bezels and corners scale with
   the device through container units (cqi = 1% of the device's width).
   ------------------------------------------------------------------------- */

/* ============================================================== devices */
.ps-dev {
  --bezel: var(--o-ink);
  --ps-shadow: var(--o-shadow-raised);
  --ps-shadow-lift: 0 2px 6px rgb(60 57 50 / .08), 0 34px 70px -18px rgb(60 57 50 / .3);
  position: absolute; z-index: 1;
  left: var(--x); top: var(--y); width: var(--w);
  container: ps-dev / inline-size;
  transform-origin: 50% 60%;
}
.ps-dev__body {
  position: relative;
  transition: translate var(--o-t-enter) var(--o-ease);
}
.ps-dev__frame {
  position: relative;
  padding: var(--bz-t, var(--bz)) var(--bz) var(--bz-b, var(--bz));
  border-radius: var(--rf);
  background: var(--bezel);
  box-shadow: var(--ps-shadow);
  transition: box-shadow var(--o-t-enter) var(--o-ease);
}
/* A hairline on the bezel's edge, lit from the upper left like the rest of the system */
.ps-dev__frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset .25cqi .25cqi 0 color-mix(in srgb, var(--bezel) 82%, #fff);
}
.ps-dev__screen {
  position: relative; aspect-ratio: var(--ar);
  border-radius: var(--rs); overflow: clip;
  background: var(--o-canvas);
}
.ps-dev__screen picture { display: contents; }
/* A part of the screen, close up (a device's zoom option) */
.ps-dev__screen[data-zoom] img { transform-origin: var(--zx) var(--zy); scale: var(--zs); }
.ps-dev__screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
/* The base under a laptop and the tray under a class board: the lip */
.ps-dev__base {
  position: relative; height: 2.4cqi; margin-block-start: -.1cqi;
  background: var(--o-warm-high);
  border-radius: .3cqi .3cqi 2.4cqi 2.4cqi / .3cqi .3cqi 1.6cqi 1.6cqi;
  box-shadow: 0 .5cqi 0 var(--o-n3), var(--o-shadow);
}
.ps-dev__base::before {
  content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0;
  width: 15cqi; height: .9cqi;
  background: var(--o-n2); border-radius: 0 0 1cqi 1cqi;
}

.ps-dev--laptop { --ar: 1366 / 768; --bz: 2cqi; --bz-t: 2.3cqi; --bz-b: 2.2cqi; --rf: 2.4cqi 2.4cqi .9cqi .9cqi; --rs: .4cqi; }
.ps-dev--laptop .ps-dev__frame { margin-inline: 5.5cqi; }

/* The class board reads as a board on the wall, not a second laptop: a thin
   even bezel and a slim pen tray in a darker tone, narrower than the board
   (client request 16; from the home page, fpol-home, for every stack). */
.ps-dev--board { --ar: 16 / 9; --bz: 1cqi; --bz-b: 1cqi; --rf: 1.2cqi; --rs: .3cqi; }
.ps-dev--board .ps-dev__base {
  height: 1.2cqi; margin: .5cqi 24cqi 0;
  background: var(--o-n4); border-radius: .3cqi .3cqi .9cqi .9cqi;
  box-shadow: none;
}
.ps-dev--board .ps-dev__base::before { content: none; }

.ps-dev--ipad { --ar: 4 / 3; --bz: 3.2cqi; --rf: 5cqi; --rs: 1.8cqi; }
.ps-dev--phone { --ar: 390 / 844; --bz: 3.6cqi; --rf: 14cqi; --rs: 10.5cqi; }

/* Lifted: pointed at, focused through its key, or brought to the front */
.ps-dev.is-lifted .ps-dev__body,
.ps-dev.is-front .ps-dev__body { translate: calc(var(--o-lift-x) * 2) calc(var(--o-lift-y) * 2); }
.ps-dev.is-lifted .ps-dev__frame,
.ps-dev.is-front .ps-dev__frame { box-shadow: var(--ps-shadow-lift); }
.ps-dev.is-front { z-index: 10; }

/* Status tag on paper, top left of a picture (as .o-media__tag) */
.ps-tag { position: absolute; z-index: 20; inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-3); opacity: var(--a, 1); }
.ps-tag .o-pill { --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }

/* ================================================================ stack */
.ps-stack { container: ps-stack / inline-size; }
.ps-stack__stage { position: relative; aspect-ratio: 16 / 9.4; }
.ps-stack.is-enhanced .ps-dev { cursor: pointer; }
.ps-stack__keys {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--o-grid-gap);
  margin: var(--o-space-7) 0 0; padding: 0; list-style: none;
}
.ps-key {
  display: grid; gap: var(--o-space-1); align-content: start;
  width: 100%; min-height: var(--o-target); margin: 0;
  padding: var(--o-space-4) 0 0;
  border: 0; border-block-start: 2px solid var(--o-line); border-radius: 0;
  background: none; color: var(--o-ink); text-align: start;
  font: inherit; cursor: pointer;
  transition: border-color var(--o-t-interact) var(--o-ease);
}
.ps-key__name { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em; }
.ps-key__text { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .ps-key:hover { border-block-start-color: var(--o-n3); } }
.ps-key.is-hot { border-block-start-color: var(--o-n3); }
.ps-key[aria-pressed="true"] { border-block-start-color: var(--o-ink); }
.ps-key:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); border-radius: 4px; }
/* Before the script runs the keys are plain captions */
.ps-stack:not(.is-enhanced) .ps-key { cursor: default; }

@container ps-stack (max-width: 599px) {
  .ps-stack__stage { aspect-ratio: 4 / 5; }
  .ps-stack .ps-dev { left: var(--mx); top: var(--my); width: var(--mw); }
  .ps-stack__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--o-space-5); margin-block-start: var(--o-space-6); }
}

/* ============================================================= carousel */
.ps-carousel {
  --ps-gap: var(--o-space-5);
  --ps-slide: 100%;
  container: ps-carousel / inline-size;
  position: relative;
  /* Keep the stage, caption and controls inside one laptop screen. */
  max-inline-size: max(720px, (100svh - 300px) * 16 / 9);
  margin-inline: auto;
}
@media (max-width: 599.98px) { .ps-carousel { --ps-gap: var(--o-space-3); --ps-slide: 88%; max-inline-size: none; } }

/* Without the script: a row you scroll sideways, snapping to each slide */
.ps-carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ps-carousel__viewport::-webkit-scrollbar { display: none; }
.ps-carousel__track { display: flex; gap: var(--ps-gap); margin: 0; padding: 0; list-style: none; }
.ps-slide { flex: 0 0 var(--ps-slide); min-width: 0; scroll-snap-align: start; container: ps-slide / inline-size; }

/* With the script: a track that follows the finger */
.ps-carousel.is-enhanced .ps-carousel__viewport { overflow: clip; scroll-snap-type: none; touch-action: pan-y; }
.ps-carousel.is-enhanced .ps-carousel__track { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .ps-carousel.is-enhanced .ps-carousel__viewport { cursor: grab; }
  .ps-carousel.is-dragging .ps-carousel__viewport { cursor: grabbing; }
}
.ps-carousel.is-dragging { -webkit-user-select: none; user-select: none; }

.ps-stage {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9;
  border-radius: var(--o-r-card); overflow: clip;
  background: var(--o-warm);
}
/* Depth while sliding: the front device travels further than the one behind */
.ps-slide .ps-dev { translate: calc(var(--d, 0) * var(--depth, 0) * 100cqi) 0; }

.ps-slide__caption { display: grid; gap: var(--o-space-2); padding-block-start: var(--o-space-5); max-inline-size: 46ch; opacity: var(--a, 1); }
.ps-slide__title { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); text-wrap: balance; }
.ps-slide__text { color: var(--o-ink-2); text-wrap: pretty; }

@container ps-slide (max-width: 559px) {
  .ps-stage { aspect-ratio: 4 / 5; }
  .ps-slide .ps-dev { left: var(--mx); top: var(--my); width: var(--mw); }
  .ps-slide__caption { padding-block-start: var(--o-space-4); }
}

/* The bar: play/pause, labelled dots, arrows */
.ps-carousel__bar {
  display: flex; align-items: center; gap: var(--o-space-2);
  margin-block-start: var(--o-space-5);
}
.ps-carousel__bar [hidden] { display: none; }
.ps-tabs { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: var(--o-space-1); }
.ps-tab {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-height: var(--o-target); padding: 0 var(--o-space-3) 0 var(--o-space-2);
  border-radius: var(--o-r-pill);
  color: var(--o-ink-2); text-decoration: none; white-space: nowrap;
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); letter-spacing: .005em;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--o-t-interact) var(--o-ease), background-color var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .ps-tab:hover { color: var(--o-ink); background: var(--o-warm); } }
.ps-tab[aria-selected="true"] { color: var(--o-ink); }
.ps-tab:focus-visible { outline: var(--o-focus-ring); outline-offset: 0; }
.ps-tab__dot { position: relative; flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.ps-tab__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--o-n3);
  transition: background-color var(--o-t-interact) var(--o-ease), scale var(--o-t-interact) var(--o-ease);
}
.ps-tab[aria-selected="true"] .ps-tab__dot::before { background: var(--o-ink); }
.ps-tab__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ps-tab__ring circle { fill: none; stroke-width: 1.75; opacity: 0; transition: opacity var(--o-t-interact) var(--o-ease); }
.ps-tab__ring .ps-ring-track { stroke: var(--o-n2); }
.ps-tab__ring .ps-ring-fill { stroke: var(--o-ink); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--progress, 0)); }
.ps-carousel.is-playing .ps-tab[aria-selected="true"] .ps-tab__ring circle { opacity: 1; }

.ps-arrows { display: flex; gap: var(--o-space-2); margin-inline-start: auto; }
.ps-ico { --size: 20px; }
.ps-ico--flip { scale: -1 1; }

/* Narrower: only the current step keeps its label */
@container ps-carousel (max-width: 899px) {
  .ps-tab:not([aria-selected="true"]) { padding-inline: var(--o-space-1); }
  .ps-tab:not([aria-selected="true"]) .ps-tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Phone: dots only (the caption names the step) */
@container ps-carousel (max-width: 520px) {
  .ps-tabs { gap: 0; justify-content: center; }
  .ps-tab { flex: 0 1 30px; min-width: 24px; justify-content: center; padding: 0; }
  .ps-tab .ps-tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* (no room for one row: the dots take their own, pause and the arrows
     share the next, 12px apart; spacing rules, 2 Nov) */
  .ps-carousel__bar { flex-wrap: wrap; gap: var(--o-space-3); }
  .ps-tabs { order: -1; flex: 1 0 100%; }
  .ps-arrows { gap: var(--o-space-3); }
}
/* A narrow stack: one key to a row, so their words aren't squeezed. */
@container ps-stack (max-width: 479px) {
  .ps-stack__keys { grid-template-columns: minmax(0, 1fr); row-gap: var(--o-space-4); }
}

/* Reduced motion: a quiet fade instead of the slide */
@keyframes ps-fade { from { opacity: 0; } }
.ps-slide.is-arriving { animation: ps-fade 220ms var(--o-ease) both; }

/* ======================================================== motion levels */
html:is([data-motion="reduced"], [data-motion="still"]) .ps-dev .ps-dev__body { translate: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .ps-slide .ps-dev { translate: none !important; }
html[data-motion="still"] :is(.ps-dev__body, .ps-dev__frame, .ps-key, .ps-tab),
html[data-motion="still"] .ps-tab__dot::before { transition: none !important; }
html[data-motion="still"] .ps-slide.is-arriving { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .ps-dev .ps-dev__body { translate: none !important; }
  html:not([data-motion]) .ps-slide .ps-dev { translate: none !important; }
}

@media (forced-colors: active) {
  .ps-dev__frame { border: 1px solid CanvasText; }
  .ps-key[aria-pressed="true"] { border-block-start-color: Highlight; }
  .ps-tab[aria-selected="true"] { color: Highlight; }
  .ps-tab__dot::before { forced-color-adjust: none; background: CanvasText; }
}