/* WP-B: slide card #tutWrap > #tut (PLAN §4.2/§4.7, [LM §3.2], [TV §1.2]), built by src/tutorial.js.
   Portrait: the 4:3 scene on top, the caption with its phase icon, then ⏭ / ⟵ (48 dp) · dots · ▶ (72 dp); below 330 px
   wide (#stage.tiny) the dots get their own row above the buttons.
   Landscape (#stage.land, set by hud.js for any aspect up to 32:9): the diorama left, caption and buttons right;
   the scene is capped by the stage height (--sh, hud.js) so 1280x360 fits. Modes on #tutWrap: .m-deck .m-insert
   .m-recap .m-carousel; .many = more than 6 slides (dots get their own row), .single = one slide (no dots); .bare = no
   field behind yet. */
#tutWrap{background:rgba(40,28,20,.42)}
#tutWrap.bare{background:radial-gradient(circle at 50% 38%,#9BDC6A,#69B443 72%)}
#tut{position:relative;box-sizing:border-box;width:min(360px,92%);max-height:calc(100% - 12px);
  background:var(--cream);border:4px solid var(--ink);border-radius:30px;box-shadow:0 9px 0 rgba(58,42,34,.45);
  padding:12px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "cap" "row" "keys";
  row-gap:6px;align-items:center;animation:cardIn .5s cubic-bezier(.2,1.6,.4,1)}
#tutWrap.many #tut{grid-template-areas:"scene" "cap" "dots" "row" "keys"}
#tutc{grid-area:scene;justify-self:center;display:block;box-sizing:border-box;aspect-ratio:4/3;
  width:min(100%,calc((var(--sh,915px) - 250px) * 4 / 3));border-radius:20px;border:3px solid var(--ink);background:#7CC84F}
#tutCap{grid-area:cap;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 4px;
  font-weight:900;font-size:31px;line-height:1.05;color:#fff;text-align:center;
  text-shadow:0 4px 0 #3A2A22,2px 0 0 #3A2A22,-2px 0 0 #3A2A22,0 -2px 0 #3A2A22,2px 2px 0 #3A2A22,-2px 2px 0 #3A2A22,2px -2px 0 #3A2A22,-2px -2px 0 #3A2A22}
#tutCap svg{width:40px;height:40px;flex:none;filter:drop-shadow(0 3px 0 rgba(58,42,34,.4))}
#tutCap span{display:inline-block;animation:tutCapIn .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes tutCapIn{from{transform:scale(.4);opacity:0}}
#tutBtns{grid-area:row;display:flex;justify-content:space-between;align-items:center;min-height:72px}
#tutBtns .tl{width:48px;height:48px;margin-left:2px}
#tutBtns .tl svg{width:28px;height:28px}
#tutBtns .tl.off{visibility:hidden}
#tutBtns .tn{width:96px;height:72px;border-radius:24px}
#tutBtns .tn svg{width:46px;height:46px}
#tutBtns button:focus-visible,#tutDots .dot:focus-visible{outline:4px solid #3FB6E8;outline-offset:3px}
/* the dots sit centred in the button row: a centred box needs the same room on both sides, so it may use the row
   minus twice the widest button (▶ 96 px) and half a pixel of air on each side (Design 2.4: no dot under ▶; the 300 px stage
   had one). 21 px dots keep the 5-slide deck on one line from a 360 px stage up; below 330 px (#stage.tiny) less than
   four dots fit a line, so there the dots get their own row like .many */
#tutDots{grid-area:row;justify-self:center;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  max-width:calc(100% - 193px);pointer-events:none}
#tutWrap.many #tutDots{grid-area:dots;max-width:none}
#stage.tiny:not(.land) #tut{grid-template-areas:"scene" "cap" "dots" "row" "keys"}
#stage.tiny:not(.land) #tutDots{grid-area:dots;max-width:none}
#tutWrap.single #tutDots{visibility:hidden}
#tutDots .dot{width:21px;height:32px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:default}
#tutDots .dot i{display:block;box-sizing:border-box;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--ink);background:#E8D9B9;transition:width .2s,height .2s}
#tutDots .dot.done i{background:#9BE77F}
#tutDots .dot.done i::after{content:"";display:block;width:3px;height:6px;margin:0 0 0 2.5px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
#tutDots .dot.on i{width:18px;height:18px;background:var(--gold)}
#tutWrap.m-carousel #tutDots{pointer-events:auto}
#tutWrap.m-carousel #tutDots .dot{cursor:pointer}
#tutKeys{grid-area:keys;display:flex;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding-top:2px;font:800 12px/1 system-ui,sans-serif}
#tutKeys span{display:inline-flex;align-items:center;gap:3px}
#tutKeys svg{width:20px;height:20px}
#tutKeys .kbd{min-width:24px;height:24px;font-size:11px}
/* landscape: diorama left (58 % of the card), the rest right; height-capped for short 32:9 screens */
#stage.land #tut{width:min(720px,84%);grid-template-columns:auto minmax(190px,1fr);grid-template-areas:"scene cap" "scene row" "scene keys";
  column-gap:16px;row-gap:8px;align-content:center}
#stage.land #tutWrap.many #tut{grid-template-areas:"scene cap" "scene dots" "scene row" "scene keys"}
#stage.land #tutc{width:min(calc(min(720px,var(--sw,1280px) * .84) * .58),calc((var(--sh,720px) - 64px) * 4 / 3))}
#stage.land #tutCap{flex-direction:column;gap:6px;font-size:32px}
#stage.land #tutCap svg{width:46px;height:46px}
#stage.land #tutDots{max-width:none;grid-area:row;align-self:start;margin-top:-6px}
#stage.land #tutWrap.many #tutDots{grid-area:dots;margin-top:0}
#stage.land #tutBtns{padding-top:24px}
#stage.land.short #tutCap{font-size:28px;min-height:0}
#stage.land.short #tutCap svg{width:38px;height:38px}
/* ?gallery=tut: the scene board (gallery.js) */
#tutGal{position:absolute;inset:0;width:100%;height:100%;z-index:8;background:var(--cream);pointer-events:auto}