/* The routine's sky (routines/sky.js), job routine-stars. The step screen and
   the start screen, centred, with the stars over the words and the buttons
   at the thumb. A grid rather than the bench's column so the stars and the
   step sit in the middle whatever the buttons below them are, and Note and
   SOS share the last row. Only the look changes: every button and id is
   the bench's own. */
.demand.sky{
  --sky-acc:var(--gold);--sky-ink:#0B0B0B;
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:auto minmax(12px,1fr) auto auto auto auto minmax(16px,1fr) auto auto auto;
  align-content:stretch;justify-items:center;gap:0;text-align:center;
  background:radial-gradient(90% 50% at 50% 42%,#17151A 0%,#0A0A0C 72%);
  padding-left:24px;padding-right:24px
}
.demand.sky-dawn{
  --sky-acc:#E0BE7E;--sky-ink:#1A140D;
  background:linear-gradient(180deg,#0D0D14 0%,#16141A 38%,#2A1F16 72%,#3D2A17 100%)
}
body .demand.sky > *{grid-column:1 / -1;margin-top:0;margin-bottom:0}
.demand.sky .dm-when{grid-row:1;color:var(--sky-acc)}
.demand.sky .dm-of{margin-left:8px}
.demand.sky .sky-stars{grid-row:3;width:100%;max-width:342px;height:auto;margin-bottom:14px}
.demand.sky .dm-what{grid-row:4;font-family:'Lexend',sans-serif;font-weight:300;font-size:42px;line-height:1.08;letter-spacing:.01em}
.demand.sky .dm-log,.demand.sky .sky-sub{grid-row:5;margin-top:10px}
.demand.sky .sky-sub{font-size:14px;color:var(--grey);letter-spacing:.04em}
.demand.sky .dm-log .sp-pick{background:none;border:0;color:var(--sky-acc);font-family:'Lexend',sans-serif;font-size:20px;letter-spacing:.06em;min-height:44px;padding:0 16px}
.demand.sky .sp-picker{grid-row:6;width:100%;text-align:left;margin-top:8px}
.demand.sky .dm-acts{grid-row:8;width:100%;display:flex;flex-direction:column;gap:12px;margin-bottom:10px}
.demand.sky .dm-acts .btn-s{width:100%;min-height:52px;border-radius:26px;font-size:15px;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--white)}
.demand.sky #demandDone,.demand.sky .dm-start.go{
  order:-1;min-height:60px;border-radius:30px;border:0;background:var(--sky-acc);color:var(--sky-ink);
  font-family:'Lexend',sans-serif;font-size:17px;font-weight:500
}
.demand.sky .dm-starts{flex-direction:row;flex-wrap:wrap}
.demand.sky .dm-starts .btn-s{flex:1 1 40%}
.demand.sky .dm-starts .dm-start.go{flex-basis:100%}
.demand.sky .dm-said{text-align:center}
.demand.sky .dm-note{grid-row:10;grid-column:1;justify-self:start;align-items:flex-start}
.demand.sky .dm-sos{grid-row:10;grid-column:2;justify-self:end}
.demand.sky .dm-note > .btn-s{background:none;border:0;color:var(--grey);min-height:44px;padding:0 6px}
/* An opened Note or SOS needs the whole width for its box. */
.demand.sky .dm-note:has(input){grid-column:1 / -1;justify-self:stretch}
.demand.sky:has(.dm-note input) .dm-sos{grid-row:11;grid-column:1 / -1}
.demand.sky .dm-sos:has(input){grid-row:11;grid-column:1 / -1;justify-self:stretch}

/* The stars. */
.sky-stars .sky-dust{fill:rgba(255,255,255,.18)}
.sky-stars .sky-line-done{fill:none;stroke:var(--sky-acc);stroke-opacity:.45;stroke-width:1}
.sky-stars .sky-line-ahead{fill:none;stroke:rgba(245,243,236,.1);stroke-width:1;stroke-dasharray:2 5}
.sky-stars .done circle{fill:var(--sky-acc)}
.sky-stars .ahead circle{fill:#5A5650}
.sky-stars .first circle{fill:none;stroke:var(--sky-acc);stroke-width:1.5}
.sky-stars .sky-halo{fill:rgba(245,243,236,.06)}
.sky-stars .sky-glow{fill:rgba(245,243,236,.12)}
.sky-stars .sky-core{fill:#FFFFFF}
.sky-dawn .sky-stars .sky-core{fill:#FFF6E3}
@media (prefers-reduced-motion:no-preference){
  .sky-stars .now .sky-halo,.sky-stars .first circle{transform-box:fill-box;transform-origin:center;animation:sky-breathe 4s ease-in-out infinite}
}
@keyframes sky-breathe{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

/* The chapter is a plain line: no arrow after it (2026-11-05). */
.demand.sky .dm-log .sp-pick::after{content:none}

/* SOS opens to Sick today and Exit, side by side across the foot; Exit
   then asks why (2026-11-05: "put sick today into SOS, which would have
   sick today and Exit"). */
.demand.sky .dm-sos:has(.btn-s){grid-area:auto;justify-self:auto;position:absolute;left:0;right:0;bottom:0;max-height:80%;overflow-y:auto;box-sizing:border-box;margin:0;flex-direction:column;align-items:stretch;gap:10px;border-radius:28px 28px 0 0;background:#141218;border-top:1px solid rgba(var(--gold-rgb),.28);box-shadow:0 -24px 60px rgba(0,0,0,.55);padding:20px 20px calc(22px + var(--inset-bottom,0px));z-index:2;text-align:left}
.demand.sky.sky-dawn .dm-sos:has(.btn-s){background:#1A1510}
.demand.sky .dm-sos:has(.btn-s)::before{content:'Not right now?';font-family:'Lexend',sans-serif;font-size:22px;font-weight:300;color:var(--white);text-align:center;margin-bottom:6px}
.demand.sky .dm-sos #demandSosBack{border:0;background:none;color:var(--grey);align-items:center;font-family:'Lexend',sans-serif;font-size:15px}
@media (prefers-reduced-motion:no-preference){.demand.sky .dm-sos:has(.btn-s){animation:sky-up .35s cubic-bezier(.2,.8,.2,1) both}}
.demand.sky .dm-sos .btn-s{min-height:52px;border-radius:20px;background:transparent;border:1px solid rgba(255,255,255,.14);color:var(--white);display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 16px;text-align:left;font-family:'Lexend',sans-serif;font-size:17px;letter-spacing:.04em;text-transform:none}
.demand.sky .dm-sos .dm-sub{font-family:'Lexend',sans-serif;font-size:13px;letter-spacing:0;color:var(--grey);line-height:1.4}
.demand.sky .dm-sos #demandPlanB{border-color:rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.08);color:var(--sky-acc)}
.demand.sky .dm-sos #demandPlanB .dm-sub{color:#CFC7B6}
.demand.sky .dm-sos .dm-why-lab,.demand.sky .dm-sos .dm-why{flex-basis:100%}
.demand.sky .dm-sos #demandOutGo{align-self:flex-end;min-width:96px;align-items:center}

/* The movement (sky.js, skyMotion). */
/* Step to step (skyCarry): what has not changed stays still, and the
   words cross over in one place, so nothing goes dark on a Done. */
.sky-stars .done .sky-was{fill:rgba(245,243,236,.16)}
/* The old words are laid over the new, out of the flow, so the screen does
   not shift when they go. */
.demand.sky .sky-ghost{grid-row:4;grid-column:1 / -1;position:absolute;top:0;left:0;right:0;pointer-events:none;color:var(--white);font-family:'Lexend',sans-serif;font-weight:300;font-size:42px;line-height:1.08;letter-spacing:.01em}
@media (prefers-reduced-motion:no-preference){
  .sky-arrive .sky-star{animation:sky-in .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 70ms + 100ms)}
  .sky-arrive .sky-line-done,.sky-arrive .sky-line-ahead{animation:sky-fade 1s ease both;animation-delay:.5s}
  .demand.sky .dm-what,.demand.sky .dm-log,.demand.sky .sky-sub{animation:sky-rise .6s cubic-bezier(.2,.8,.2,1) both}
  .demand.sky .dm-log,.demand.sky .sky-sub{animation-delay:.08s}
  .demand.sky.sky-on>.dm-when,.demand.sky.sky-on>.sky-stars,
  .demand.sky.sky-same>.dm-acts,.demand.sky.sky-same>.dm-note,.demand.sky.sky-same>.dm-sos,
  .demand.sky.sky-still .dm-what,.demand.sky.sky-still .dm-log{animation:none}
  .demand.sky.sky-swap .dm-what{animation:sky-rise .45s cubic-bezier(.2,.8,.2,1) .1s both}
  .demand.sky .sky-ghost{animation:sky-leave .2s ease-in both}
  .sky-go .now .sky-glow,.sky-go .now .sky-core{transform-box:fill-box;transform-origin:center;animation:sky-light .6s cubic-bezier(.2,.8,.2,1) both}
  .sky-go .now .sky-halo{animation:sky-halo-in .6s cubic-bezier(.2,.8,.2,1) both,sky-breathe 4s ease-in-out .6s infinite}
  .sky-go .sky-was{transform-box:fill-box;transform-origin:center;animation:sky-dim .6s ease-out both}
}
@keyframes sky-leave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@keyframes sky-light{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes sky-halo-in{from{opacity:0;transform:scale(.5)}to{opacity:.6;transform:scale(.9)}}
@keyframes sky-dim{from{opacity:1;transform:none}to{opacity:0;transform:scale(.3)}}
@keyframes sky-in{from{opacity:0}to{opacity:1}}
@keyframes sky-fade{from{opacity:0}to{opacity:1}}
@keyframes sky-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* The tick and the arrow as one bar (job routine-tick-bar, his pick C). */
.demand.sky .sky-bar{display:flex;width:100%;height:64px;border-radius:32px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4);order:-1}
.demand.sky .sky-bar .btn-s{min-height:0;height:100%;border:0;border-radius:0;margin:0;display:flex;align-items:center;justify-content:center;padding:0}
.demand.sky .sky-bar #demandDone{flex:1;background:var(--sky-acc);color:var(--sky-ink);order:0}
.demand.sky .sky-bar #demandGo{flex:0 0 96px;background:color-mix(in srgb,var(--sky-acc) 78%,#000);color:var(--sky-ink);border-left:1px solid rgba(0,0,0,.25)}
.demand.sky .sky-small{min-height:44px !important;border:0 !important;background:none !important;color:var(--grey) !important;font-size:14px !important;text-transform:none;letter-spacing:.02em}

/* The chapter looks like something to tap. */
.demand.sky .dm-log .sp-pick{text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.4);text-underline-offset:6px}

/* Questions to look into (his pick B). */
.demand.sky .sky-ask-open{grid-row:9;width:100%;min-height:48px;border-radius:24px;border:1px solid rgba(var(--gold-rgb),.22);background:rgba(var(--gold-rgb),.05);color:#E6DCC6;font:inherit;font-size:14px;margin-bottom:8px;cursor:pointer}
.demand.sky .sky-ask{position:absolute;left:0;right:0;bottom:0;max-height:78%;overflow-y:auto;box-sizing:border-box;border-radius:28px 28px 0 0;background:#141218;border-top:1px solid rgba(var(--gold-rgb),.28);box-shadow:0 -24px 60px rgba(0,0,0,.55);padding:20px 20px calc(22px + var(--inset-bottom,0px));display:flex;flex-direction:column;gap:14px;text-align:left;z-index:2}
.demand.sky.sky-dawn .sky-ask{background:#1A1510}
.sky-ask-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sky-ask-title{font-family:'Lexend',sans-serif;font-size:22px;font-weight:300;color:var(--white)}
.sky-ask-ch{font-family:'Lexend',sans-serif;font-size:15px;color:var(--sky-acc)}
.sky-ask-lab{font-size:13px;color:var(--grey)}
.sky-ask-row{display:flex;gap:10px}
.sky-ask-row textarea{flex:1;resize:none;border-radius:16px;border:1px solid rgba(var(--gold-rgb),.35);background:rgba(255,255,255,.03);color:var(--white);font:inherit;font-size:15px;padding:12px 14px}
.sky-ask-row textarea:focus{outline:none;border-color:var(--sky-acc)}
.sky-ask-keep{width:52px;border-radius:16px;border:0;background:var(--sky-acc);color:var(--sky-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.sky-ask-k{display:block;font-family:'Lexend',sans-serif;font-size:15px;color:#8C8980;margin-bottom:4px}
.sky-ask-q{margin:0;padding:10px 0 10px 16px;border-top:1px solid rgba(255,255,255,.06);font-size:15px;line-height:1.45;color:var(--white);position:relative}
.sky-ask-q::before{content:'';position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:3px;background:var(--sky-acc)}
.sky-ask-where{margin:0;font-size:13px;color:var(--grey);text-align:center}
.sky-ask-back{min-height:52px;border-radius:26px;border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--white);font:inherit;font-size:15px;cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .demand.sky .sky-ask{animation:sky-up .35s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes sky-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

.demand.sky .sky-bar #demandDone,.demand.sky .sky-bar #demandGo{border-radius:0;min-height:0;border-top:0;border-bottom:0;border-right:0;margin:0;letter-spacing:0}