/* masugami — the how-to demo (HOW_TO_PLAY_WORK_ORDER §2, H2)
   ============================================================
   Component CSS for masugami-howto.js. It does not belong in masugami-theme.css, which decides
   colour and nothing else, and it does not belong in either page, because the same component is
   mounted on the landing and in the player.

   Every colour here is a token. The room is --ms-bg, the sheet --ms-paper, the back of the flap
   --ms-paper-flap, the crease --ms-crease / --ms-crease-folded, the lift --ms-paper-lift, and
   the one accent --ms-accent, spent on the armed crease and nowhere else. Two of those tokens
   are published literally only by the material that needs no derivation (kasure), so each one is
   read with the derivation web/index.html applies for washi and ai as its fallback. That keeps
   the component self-contained: it renders correctly on the landing, which carries no board CSS
   at all.

   Ink is not drawn here. The cells are real `.cell` elements and masugami-marks.css draws them,
   which is why the demo's mark, bleed-through, cancelling pair and arriving ghost are the board's
   and not a second sketch of them.

   Squares everywhere, per the design law — except the touch indicator, which is a finger.
   ============================================================ */

.ms-howto{
  /* every material publishes these (scripts/theme-tokens.test.mjs), so no fallbacks */
  --ms-howto-lift:var(--ms-paper-lift);
  --ms-howto-cast:var(--ms-shadow);
  --ms-howto-crease:var(--ms-crease);
  --ms-howto-crease-held:var(--ms-crease-folded);
  --ms-howto-ease:var(--ms-ease);
  --ms-howto-resize:var(--ms-dur-sheet);
}
.ms-howto-pause{
  display:block;min-height:var(--ms-hit-min);margin:var(--ms-space-2) auto;
  padding:0 var(--ms-space-3);border:0;background:transparent;color:var(--ms-text);
  font:400 var(--ms-size-small)/1.5 var(--ms-font-display);cursor:pointer;touch-action:manipulation;
}
.ms-howto-pause[hidden]{display:none}
.ms-howto-pause:hover{text-decoration:underline}
.ms-howto-pause:focus-visible{outline:var(--ms-focus-width) solid currentColor;outline-offset:var(--ms-focus-offset)}

/* ---------- the room ---------- */
.ms-howto-stage{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:250px;padding:64px 32px;
  background:var(--ms-bg);
  perspective:1100px;
  overflow:hidden;
}
.ms-howto-stage.is-mini{min-height:132px;padding:36px 20px}

/* The level line above the sheet and the result line below it are quiet sentences in the
   running face, not micro caps (D2), and say their facts with commas (D4). */
.ms-howto-hint,.ms-howto-caption{
  position:absolute;left:0;right:0;text-align:center;
  font:400 var(--ms-size-small)/1 var(--ms-font-display);
  color:var(--ms-text-2);
}
.ms-howto-hint{top:18px;opacity:.42}
.ms-howto-caption{
  bottom:22px;opacity:0;
  transition:opacity .3s linear;
}
.ms-howto-caption.is-shown{opacity:.72}

/* ---------- the sheet ---------- */
.ms-strip{
  position:relative;transform-style:preserve-3d;
  transition:width var(--ms-howto-resize) var(--ms-howto-ease),opacity .14s linear;
}
.ms-strip.is-snapping,.ms-strip.is-snapping *{transition:none !important}
.ms-sheet{position:absolute;inset:0;transition:transform var(--ms-howto-resize) var(--ms-howto-ease)}
.ms-paper{
  position:absolute;top:0;height:100%;
  background:var(--ms-paper);box-shadow:var(--ms-howto-lift);
}
.ms-slot{position:absolute;top:0;width:var(--ms-howto-size);height:var(--ms-howto-size)}
.ms-slot.is-under{visibility:hidden}

/* The demo's cell is the board's cell — masugami-marks.css draws its ink — but the board's own
   layout rules live in web/index.html, which the landing does not load. State it here so the two
   surfaces render one component. */
.ms-howto .cell{
  position:absolute;inset:0;display:block;z-index:1;
  border:0;border-radius:0;
  background-color:var(--ms-paper);
  transition:opacity .14s linear;
}
.ms-howto .ms-face.is-back .cell{background-color:var(--ms-paper-flap)}

/* ---------- the crease ---------- */
.ms-seam{
  position:absolute;top:0;width:2px;height:100%;
  background:var(--ms-howto-crease);
  transition:background .12s linear,opacity .12s linear;
}
.ms-seam.is-held{background:var(--ms-howto-crease-held)}
.ms-seam.is-armed{background:var(--ms-accent);opacity:1}

/* ---------- the flap: a real two-sided sheet ---------- */
.ms-fold{position:absolute;top:0;height:100%;transform-style:preserve-3d;will-change:transform}
.ms-face{
  position:absolute;inset:0;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:var(--ms-howto-lift);
}
.ms-face.is-back{transform:rotateY(180deg)}
/* the hinge shade, at the same reach the board's flap uses */
.ms-face::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(var(--ms-howto-shade-dir,90deg),
    rgba(0,0,0,var(--ms-howto-shade,0)),rgba(0,0,0,0) 60%);
}
/* the ground the lifted half no longer covers */
.ms-ground{
  position:absolute;top:0;height:100%;opacity:0;pointer-events:none;
  box-shadow:0 8px 22px var(--ms-howto-cast);
}

/* ---------- the finger ----------
   The one round thing in a square design, because it is not paper. */
.ms-touch{
  position:absolute;width:40px;height:40px;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--ms-text) 16%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ms-text) 32%,transparent);
  transform:translate(-50%,-50%) scale(var(--ms-howto-touch-scale,1));
  opacity:var(--ms-howto-touch-opacity,0);
  transition:opacity .16s linear;
}

/* ---------- the three beats ---------- */
.ms-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:34px}
.ms-step{
  display:block;width:100%;padding:0 0 18px;
  border:0;border-top:1px solid transparent;background:none;
  text-align:left;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .14s linear;
}
/* "1 Hold": the beats are a real sequence, so they keep their numbers, set as a title in the
   running face without the dot or the capitals. The generator (build-presentation.mjs,
   data-shared-form="step") splits the shared "01 · Hold" into data-step="1" and the word, and
   the number is drawn here, quieter than the word it counts. */
.ms-step .ms-step-label{
  display:block;padding-top:var(--ms-space-4);
  font:400 var(--ms-size-title)/1.3 var(--ms-font-display);
  color:var(--ms-text-2);
  transition:color var(--ms-dur-hover) linear;
}
.ms-step .ms-step-label::before{content:attr(data-step) " ";color:var(--ms-text-4)}
.ms-step p{
  margin:var(--ms-space-2) 0 0;font:400 var(--ms-size-body)/1.7 var(--ms-font-display);
  color:var(--ms-text-2);text-wrap:pretty;
}
.ms-step[aria-pressed="true"]{border-top-color:var(--ms-text)}
.ms-step[aria-pressed="true"] .ms-step-label,
.ms-step:hover .ms-step-label{color:var(--ms-text-bright)}
.ms-step:focus-visible{outline:var(--ms-focus-width) solid var(--ms-text);outline-offset:var(--ms-focus-offset)}

/* ---------- how ink behaves ---------- */
.ms-laws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ms-law{padding:0 28px 8px}
.ms-law:first-child{padding-left:0}
.ms-law:last-child{padding-right:0}
.ms-law+.ms-law{border-left:var(--ms-rule)}
.ms-law .ms-howto-stage{margin-bottom:22px}
.ms-law-eq{
  display:none;align-items:center;justify-content:center;gap:8px;
  height:132px;margin-bottom:22px;background:var(--ms-bg);
}
.ms-law-eq .sq{
  position:relative;display:block;flex:none;width:24px;height:24px;border-radius:0;
  background-color:var(--ms-paper);
}
.ms-law-op{font:300 13px/1 var(--ms-font-ui);color:var(--ms-text-4)}
/* A law reads as one sentence on two lines: "Ink onto ink / disappears". */
.ms-law-cap{font:400 var(--ms-size-body)/1.5 var(--ms-font-display);color:var(--ms-text-3)}
.ms-law-emph{margin-top:var(--ms-space-1);font:400 var(--ms-size-title)/1.4 var(--ms-font-display);color:var(--ms-text-bright)}
/* Reduce Motion: the laws stop folding and become the equation row, as they are on iOS. */
.ms-laws.is-stills .ms-law-eq{display:flex}
.ms-laws.is-stills .ms-law .ms-howto-stage{display:none}

@media (max-width:860px){
  .ms-steps{grid-template-columns:1fr;gap:0}
  .ms-step{border-top:var(--ms-rule)}
  .ms-step[aria-pressed="true"]{border-top-color:var(--ms-text)}
  .ms-laws{grid-template-columns:1fr}
  .ms-law{padding:0 0 24px}
  .ms-law+.ms-law{border-left:0;border-top:var(--ms-rule);padding-top:24px}
  .ms-howto-stage{min-height:200px;padding:48px 16px}
}

@media (prefers-reduced-motion:reduce){
  /* The strip's own opacity is the crossfade between stills and must survive; everything that
     would move is stopped instead. */
  .ms-strip{transition:opacity .14s linear}
  .ms-sheet,.ms-seam,.ms-touch,.ms-howto .cell,.ms-step,.ms-step .ms-step-label{transition:none}
}