/* If you fancy more on the sky (routines/more.js), job fancy-more-sky.
   It borrows the routine sky's background, colours and stars (sky.css) but
   is a plain column, not the step screen's grid: the header, the stars,
   the title, the quiz card, the tiles, and That's me at the thumb. */
.demand.sky.sky-more{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;
  overflow-y:auto;padding-bottom:calc(26px + var(--inset-bottom,0px))
}
body .demand.sky.sky-more > *{flex:none}
body .demand.sky.sky-more > .more-enough{margin-top:auto}
body .demand.sky.sky-more > .dm-when{margin-top:0;font-size:13px;letter-spacing:.2em}
.demand.sky.sky-more .more-count{color:var(--grey)}
body .demand.sky.sky-more > .sky-stars{max-width:342px;margin-top:18px}
body .demand.sky.sky-more > .dm-what{margin-top:22px;font-size:38px;line-height:1.1}
body .demand.sky.sky-more > .more-body{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:30px;margin-bottom:24px}

.sky-more .more-quiz{
  width:100%;box-sizing:border-box;border-radius:28px;border:1px solid rgba(224,190,126,.28);
  background:rgba(255,255,255,.035);padding:22px 20px 20px;
  display:flex;flex-direction:column;align-items:center;gap:6px
}
.sky-more .more-kind,.sky-more .more-or{font-family:'Lexend',sans-serif;font-size:15px;}
.sky-more .more-kind{color:var(--sky-acc)}
.sky-more .more-book{font-family:'Lexend',sans-serif;font-weight:300;font-size:36px;line-height:1.1;color:var(--white)}
.sky-more .more-line{font-size:14px;color:var(--grey)}
.sky-more .more-start{
  margin-top:14px;width:100%;height:64px;border-radius:32px;border:0;cursor:pointer;
  background:var(--sky-acc);color:var(--sky-ink);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:'Lexend',sans-serif;font-size:16px;font-weight:500
}
.sky-more .more-or{margin-top:26px;color:#8C8980}

.sky-more .more-tiles{margin-top:12px;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sky-more .more-tiles[data-n="1"]{grid-template-columns:minmax(0,1fr)}
.sky-more .more-tiles[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.sky-more .more-tile{
  min-height:108px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  color:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px;font:inherit;font-size:14px;cursor:pointer;text-align:center
}
.sky-more .more-tile:disabled{opacity:.55;cursor:default}
.sky-more .more-glyph{fill:none;stroke:var(--sky-acc);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px}
.sky-more .more-sub,.sky-more .minute-breath{font-size:11px;color:var(--grey);line-height:1.3}
.sky-more .minute-breath{color:var(--sky-acc)}

.sky-more .more-enough{
  width:100%;min-height:56px;border-radius:28px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:var(--white);font:inherit;font-size:16px;cursor:pointer
}
.sky-more .more-start:focus-visible,.sky-more .more-tile:focus-visible,.sky-more .more-enough:focus-visible{outline:2px solid var(--sky-acc);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  .demand.sky.sky-more .more-body{animation:sky-rise .6s cubic-bezier(.2,.8,.2,1) .08s both}
}