/* Make your Orli, step by step (js/steps.js, 3 Nov 2026)
   ---------------------------------------------------------------------------
   One card: the picture (the 3D squishy, or its still) and, beside it from
   720 px (under it on phones), the step: where you are (a count and five
   markers), who does it, what to do, one button that does it (and, for the
   fill, a bar), then Back and Next. System tokens and the approved buttons
   only. Without script the five steps are a plain list (.mks-list).
   ------------------------------------------------------------------------- */

.mks {
  display: grid; grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  background: var(--o-surface); color: var(--o-ink);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow);
  scroll-margin-block-start: calc(var(--o-header-h) + var(--o-space-3));
}
html:not(.js) .mks { display: none; }

/* ------------------------------------------------------------ the picture */
.mks__stage {
  position: relative; min-width: 0;
  aspect-ratio: 6 / 5; max-height: 44vh; max-height: 44svh; inline-size: 100%;
  background: var(--o-warm);
}
.mks__still, .mks__canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
}
.mks__still { object-fit: contain; object-position: 50% 55%; }
.mks__canvas { opacity: 0; transition: opacity 300ms var(--o-ease); touch-action: auto; }
.mks[data-mode="live"] .mks__canvas { opacity: 1; }
.mks.is-reset .mks__canvas, .mks.is-reset .mks__still { animation: mks-in 360ms var(--o-ease) both; }
@keyframes mks-in { from { opacity: .2; } to { opacity: 1; } }
/* The one status tag, on paper. */
.mks__tag {
  position: absolute; z-index: 1; inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-3);
  --pill-bg: var(--o-paper); --pill-ink: var(--o-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--o-ink) 10%, transparent);
}

/* -------------------------------------------------------------- the step */
.mks__panel {
  display: flex; flex-direction: column; gap: var(--o-space-5); min-width: 0;
  padding: var(--o-space-5) var(--o-space-4) var(--o-space-4);
}
.mks__progress { display: grid; gap: var(--o-space-3); }
.mks__count { margin: 0; font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }

/* Five markers on a line: done (a tick), the current one (green), to come. */
.mks__dots {
  position: relative; display: flex; justify-content: space-between; gap: var(--o-space-1);
  margin: 0; padding: 0; list-style: none;
}
.mks__dots::before {
  content: ""; position: absolute; inset-inline: 14px; inset-block-start: 13px; height: 2px;
  background: var(--o-warm-high);
}
.mks__dot {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--o-space-1);
  min-width: 0; color: var(--o-ink-2);
  font: 500 var(--o-text-small) / var(--o-lh-small) var(--o-font-body);
}
.mks__mark {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--o-warm); box-shadow: 0 0 0 3px var(--o-surface);
  font: var(--o-weight-ui) .8125rem / 1 var(--o-font-ui); color: var(--o-ink-2);
  font-variant-numeric: tabular-nums;
}
.mks__dot.is-current { color: var(--o-ink); font-weight: 650; }
.mks__dot.is-current .mks__mark { background: var(--o-action); color: #fff; }
.mks__dot.is-done .mks__mark { background: var(--o-mint); color: var(--o-on-mint); }
.mks__dot.is-done .mks__num { display: none; }
.mks__dot.is-done .mks__mark::before {
  content: ""; width: 13px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mks__label { white-space: nowrap; }

.mks__body { display: grid; gap: var(--o-space-2); justify-items: start; }
.mks__who {
  margin: 0; font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2);
}
.mks__who[hidden] { display: none; }
.mks__title {
  margin: 0; 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;
}
.mks__title:focus { outline: none; }
.mks__title:focus-visible { outline: var(--o-focus-ring); outline-offset: 4px; border-radius: 4px; }
.mks__say { margin: 0; max-inline-size: 38ch; color: var(--o-ink-2); text-wrap: pretty; }

.mks__do { display: grid; gap: var(--o-space-3); justify-items: start; inline-size: 100%; margin-block-start: var(--o-space-3); }
/* The fill button: press and hold, so no text selection, call-out or panning under the finger. */
.mks[data-step="fill"] .mks__act:not([data-state="done"]) {
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
/* Next pressed too early: the step's button says "here". */
.mks.is-nudge .mks__act { animation: mks-nudge 800ms var(--o-ease); }
@keyframes mks-nudge {
  0%, 100% { outline: 0 solid transparent; outline-offset: 2px; }
  30%, 70% { outline: 3px solid color-mix(in srgb, var(--o-action) 55%, transparent); outline-offset: 5px; }
}

/* The bar: how full the balloon is. */
.mks__meter { display: flex; align-items: center; gap: var(--o-space-3); inline-size: 100%; max-inline-size: 26rem; }
.mks__meter[hidden] { display: none; }
.mks__meter-track {
  flex: 1; min-width: 0; height: 12px; overflow: hidden;
  border-radius: var(--o-r-pill); background: var(--o-warm);
  box-shadow: inset 0 0 0 1px var(--o-line);
}
.mks__meter-bar {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; background: var(--o-action);
  transform-origin: left center; transform: scaleX(var(--mks-fill, 0));
}
.mks__meter-text {
  flex: none; min-inline-size: 4.5em; text-align: end;
  font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-ink);
  font-variant-numeric: tabular-nums;
}
.mks__status {
  margin: 0; min-height: calc(var(--o-lh-small) * 1em);
  font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink);
}

.mks__nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3);
  margin-block-start: auto; padding-block-start: var(--o-space-4);
  border-block-start: 1px solid var(--o-line);
}
.mks__next { margin-inline-start: auto; }
.mks__next[hidden], .mks__back[hidden] { display: none; }
/* (a replay that would show nothing new: gone, but its room kept, so Back and Next don't jump) */
.mks__act[hidden] { display: inline-flex; visibility: hidden; }
.mks__arrow { --size: 20px; }

/* ----------------------------------------------------------------- layout */
/* From 720 px: the picture beside the step, the picture as tall as the step. */
@media (min-width: 720px) {
  .mks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mks__stage { aspect-ratio: auto; max-height: none; min-height: 26rem; }
  .mks__panel { padding: var(--o-space-6); }
}
@media (min-width: 1100px) {
  .mks { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .mks__stage { min-height: 33rem; }
}
/* Phones: the markers only; the count line names the step. */
@media (max-width: 459px) {
  .mks__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mks__panel { gap: var(--o-space-4); }
  .mks__do { margin-block-start: var(--o-space-2); }
}
/* A phone on its side: side by side, the picture as tall as the window allows. */
@media (orientation: landscape) and (max-height: 500px) {
  .mks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mks__stage { aspect-ratio: auto; max-height: none; min-height: 16rem; }
}

/* ----------------------------------------------------------- no script */
.mks-list {
  display: grid; gap: var(--o-space-6) var(--o-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
html.js .mks-list { display: none; }
.mks-list__item { display: grid; align-content: start; gap: var(--o-space-2); min-width: 0; }
.mks-list__item img { width: 100%; height: auto; aspect-ratio: 5 / 4; border-radius: var(--o-r-card); background: var(--o-warm); }
.mks-list__name {
  display: flex; align-items: baseline; gap: var(--o-space-2); margin: var(--o-space-2) 0 0;
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
}
.mks-list__n { font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui); color: var(--o-ink-2); }
.mks-list__who { margin: 0; color: var(--o-ink-2); font-size: var(--o-text-small); line-height: var(--o-lh-small); }

/* ---------------------------------------------------------- motion, colours */
html:is([data-motion="reduced"], [data-motion="still"]) .mks__canvas { transition: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .mks.is-nudge .mks__act,
html:is([data-motion="reduced"], [data-motion="still"]) .mks.is-reset :is(.mks__canvas, .mks__still) { animation: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .mks.is-nudge .mks__act { outline: 3px solid color-mix(in srgb, var(--o-action) 55%, transparent); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .mks__canvas { transition: none; }
  html:not([data-motion]) .mks.is-nudge .mks__act, html:not([data-motion]) .mks.is-reset :is(.mks__canvas, .mks__still) { animation: none; }
}
@media (forced-colors: active) {
  .mks { border-color: CanvasText; }
  .mks__mark { border: 1px solid CanvasText; }
  .mks__dot.is-current .mks__mark { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .mks__dot.is-done .mks__mark::before { forced-color-adjust: none; background: CanvasText; }
  .mks__meter-track { border: 1px solid CanvasText; }
  .mks__meter-bar { forced-color-adjust: none; background: Highlight; }
}