/* Master Builder Secrets (owned by app/pages/secrets.js). Every class starts .ms- so it never clashes.
   The 3D viewer chrome (.fig-stage, .stage-tools, .tool, .stage-hint) and .pager come from build.css. */
:root{
  --ms-deep:#b4540d;   /* darker orange: white text on it stays readable at small sizes (5:1) */
  --ms-ink:#9a4708;    /* orange text on white or paper */
}
/* The section orange (#e67e22) only reaches 2.9:1 with white text, which the band's lead line and
   the white-on-orange buttons need at 4.5:1. Inside these pages the section colour is the deeper
   orange, so the band, its stepped edge, Next and the pager all pass. */
.ms-page{--c:var(--ms-deep)}
.ms-page .band .kicker{color:#fff}

/* ---------------------------------------------------------------- lesson cards (#/secrets) */
.ms-grid{--min:270px}
.ms-card{display:flex;flex-direction:column;background:var(--card);border-radius:20px;overflow:hidden;text-decoration:none;
  box-shadow:0 0 0 3px var(--line),4px 6px 0 var(--line);transition:transform .2s var(--ease-out),box-shadow .2s}
.ms-card:hover,.ms-card:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 3px var(--c-secrets),6px 10px 0 var(--line)}
.ms-art{position:relative;aspect-ratio:16/10;background:linear-gradient(180deg,#8fd0ff,#e4f4ff 75%);display:grid;place-items:center;padding:10px;overflow:hidden}
.ms-art img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;
  filter:drop-shadow(0 8px 6px rgba(0,40,80,.18));transition:transform .35s var(--ease-out)}
.ms-card:hover .ms-art img{transform:scale(1.04) translateY(-3px)}
.ms-art .ms-art-none{display:none}
.ms-art.none{background:linear-gradient(180deg,#ffd9b0,#fff4e6 80%)}
.ms-art.none img{display:none}
.ms-art.none .ms-art-none{display:grid}
.ms-card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.ms-card-body .kicker{color:var(--ms-ink)}
.ms-card h2{margin:0;font-size:1.35em}   /* h2: the page has no other level between h1 and the cards */
.ms-card p{margin:0;color:var(--ink-2);font-weight:700;line-height:1.4}
.ms-card-meta{margin-top:auto;padding-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.ms-card-meta .chip svg{width:16px;height:16px}
.ms-sample{margin-top:20px}

/* stand-in picture while a figure's poster doesn't exist: a little block staircase */
.ms-art-none{grid-auto-flow:column;align-items:end;justify-content:center}
.ms-art-none i{width:34px;background:repeating-linear-gradient(180deg,var(--c-secrets) 0 30px,#c4661a 30px 34px);box-shadow:inset -4px -4px 0 rgba(0,0,0,.16)}
.ms-art-none i:nth-child(1){height:34px}
.ms-art-none i:nth-child(2){height:68px}
.ms-art-none i:nth-child(3){height:102px}
.ms-art-none b{font-family:var(--display);font-weight:400;font-size:60px;line-height:1;color:var(--ms-ink);margin-left:16px;align-self:center}

/* ---------------------------------------------------------------- one lesson (#/secrets/<id>) */
.ms-band{padding-bottom:22px}
.ms-band h1{font-size:clamp(32px,5vw,50px)}
.ms-wrap{padding-top:26px;padding-bottom:40px}

/* stacked (phones, portrait iPad): the figure, then the stepper underneath it */
.ms-player{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.ms-player.no-steps{max-width:780px}
.ms-figbox{position:relative;min-width:0}
/* capped so on a portrait iPad the Next button still shows above the tab bar, with room for a
   two-line lead and a two-line step */
.ms-fig{width:100%;max-height:38vh}
.ms-fig-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.85);color:var(--ink-2);
  font-weight:900;font-size:.9em;padding:8px 14px;border-radius:999px;white-space:nowrap}
.ms-fig-none{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;padding:20px;text-align:center;
  background:linear-gradient(180deg,#ffd9b0,#fff4e6 80%)}
.ms-fig-none .ms-art-none{display:grid}
.ms-fig-none p{margin:0;max-width:30ch;font-weight:800;color:var(--ink-2)}

/* iPad landscape and wider: side by side, so the figure, the words and Next fit on one screen */
@media (min-width:900px) and (orientation:landscape){
  .ms-player{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}
  .ms-player.no-steps{grid-template-columns:minmax(0,1fr)}
  .ms-fig{max-height:calc(100dvh - var(--top) - 40px)}
}

/* the stepper: the reader drives every change */
.ms-stepper{display:flex;flex-direction:column;gap:12px;padding:16px;min-width:0}
.ms-stephead{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.ms-count{font-family:var(--display);font-size:1.3em;line-height:1.1;color:var(--ms-ink);white-space:nowrap}
.ms-count b{font-weight:400;font-size:1.25em}
.ms-dots{display:flex;flex-wrap:wrap;gap:6px}
.ms-dot{position:relative;width:44px;height:44px;border:0;border-radius:10px;background:var(--card);color:var(--ink-2);cursor:pointer;
  font-family:var(--display);font-size:20px;line-height:1;box-shadow:0 0 0 3px var(--line) inset}
.ms-dot:hover{background:var(--paper-2)}
/* the current step: filled, ringed and marked with a bar underneath, so colour is never the only clue */
.ms-dot[aria-current="step"]{background:var(--ms-deep);color:#fff;box-shadow:inset -3px -4px 0 rgba(0,0,0,.2),0 0 0 3px #6e3305}
.ms-dot[aria-current="step"]::after{content:'';position:absolute;left:10px;right:10px;bottom:-9px;height:4px;border-radius:2px;background:var(--ink)}
.ms-stephead:has(.ms-dots){padding-bottom:4px}

/* every step shares one grid cell, so the box is as tall as the longest step and the buttons stay put */
.ms-steps{display:grid}
.ms-step{grid-area:1/1;visibility:hidden;min-width:0}
.ms-step.on{visibility:visible}
.ms-step h2{font-size:clamp(24px,3vw,30px);margin:0 0 .3em}
.ms-step p{margin:0;font-size:1.08em;font-weight:700;line-height:1.5;max-width:60ch}
/* side by side, the stepper is as tall as the picture, so the step can be bigger and easier to read */
@media (min-width:900px) and (orientation:landscape){.ms-step p{font-size:1.18em}}

.ms-nav{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:auto}
.ms-nav.solo{grid-template-columns:minmax(0,1fr)}   /* a one-step lesson has nothing to go back to */
.ms-nav .btn{width:100%;min-width:0}

/* the words under the figure */
.ms-body{max-width:68ch;margin-top:30px}
.ms-body>p{font-size:1.05em}
.ms-try{border:3px dashed var(--c-secrets);border-radius:16px;padding:14px 16px;margin:18px 0;background:#fff8ef;scroll-margin:90px}
.ms-try:focus{outline:none}
.ms-try:focus-visible{outline:3px solid var(--blueprint);outline-offset:3px}
.ms-try p{margin:0;font-weight:800;font-size:1.08em;line-height:1.5}
/* the same label as the tips and the build page's MAKE IT YOURS box */
.ms-try .t{display:inline-block;font-family:var(--display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--ms-deep);
  padding:2px 9px;border-radius:6px;margin-right:6px;vertical-align:2px}

/* phones: a little tighter everywhere, so the picture, the step and Back/Next all fit above the tab
   bar without scrolling (390 x 844 with a two-line title and a three-line step) */
@media (max-width:640px){
  .ms-band{padding-top:16px}
  .ms-wrap{padding-top:18px}
  .ms-player{gap:12px}
  .ms-fig{border-radius:16px;aspect-ratio:3/2}
  .ms-stepper{padding:12px;gap:10px}
  .ms-nav{grid-template-columns:1fr 1.4fr}
  .ms-nav .btn.big{min-height:56px;padding-block:12px}
  .ms-art-none b{font-size:50px}
  /* the pager's two buttons stack: give each the full width instead of two ragged lengths */
  .ms-lesson .pager .btn{flex:1 1 100%}
}

/* printing a lesson prints every step, without the 3D or the buttons */
@media print{
  .ms-figbox,.ms-nav,.ms-dots,.ms-count{display:none!important}
  .ms-player{display:block}
  .ms-steps{display:block}
  .ms-step{visibility:visible!important;margin-bottom:12px}
}