/* The page after the Reframe answer, /reframe/live/ (Wave 2). The page loads /assets/site.css first and this file
   second, so a rule here wins a tie with a shared rule at every width, phones included.

   This file is never named reframe.css: the partner pages still load the old /reframe/reframe.css.

   Everything on the page comes from the shared file: the top block (.ihero), the long form with numbered questions
   (.lform, .lform__group--num), the form with its picture rail (.apply, with .is-stack and .pair-end), the cards for
   "Application unlocked.", "Application received." and "Not yet." (.state), the proof cards (.minicard) and the
   figurine scene. This file only holds what belongs to this page and its script.

   Four colors only: Deep Slate Olive, Naples Yellow, Peach Red, Neutral Gray, and transparency of them.

   What the live script switches on and off, and where each piece is styled:
     section.forge-hero           hidden when the answers don't unlock the application      -> "not yet"
     div#questions                hidden at the same moment                                  -> "not yet"
     form#qualify-form            .is-working while sending, .is-locked after a pass         -> "the questions and the application"
     button#qualify-submit        switched off while sending (the shared form greys it)
     p#qualify-status, p#apply-status   the script's words, with .is-error for a problem    -> the shared block below
     .q-submit (first form)       hidden after a pass
     section#apply                loses hidden after a pass and gets .fade-in               -> the shared block below
     .q-num inside #apply         renumbered by the script (the first one is an empty, hidden one; see the page)
     form#apply-form, p#apply-intro   hidden once the application is sent                   -> "application received"
     div#apply-received           loses hidden then, and gets .fade-in                      -> "application received"
     section#not-yet              loses hidden when the answers don't unlock it, gets .fade-in   -> "not yet"
     div#not-yet-ps               shown inside it only for a man who said no to the budget question */

/* ===================== the questions and the application =====================
   The same block is in /reframe/live/live-v4.css and /pressure-process-apply/page.css: both pages ask the same six
   questions and open the same kind of application, and each page loads only its own stylesheet.
   Everything here is built on the shared long form (.lform), its numbered questions (.lform__group--num), the form
   with a picture rail (.apply) and the screen-state cards (.state). These rules add what the two live scripts need. */

/* the first block of the column starts level with the top of the rail */
.apply__main.is-stack > :first-child{margin-top:0}
.apply .lead{font-weight:600}

/* the line under a button while the page is sending ("Sending your answers."). When the script adds .is-error the
   shared note box with the Peach Red edge shows instead ("Answer every question."). */
.lform__msg{text-wrap:balance}
.lform__msg:not(.is-error){padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"opsz" 36;font-size:21px;line-height:1.3;letter-spacing:0}

/* the scripts move the keyboard focus to these headings so a screen reader reads them. They aren't buttons, so no ring. */
.state__h:focus{outline:none}

/* after a pass his answers stay on screen and can't be changed (the script adds .is-locked and switches every box off).
   The boxes go flat with a dashed line, the choice he made stays Peach Red, and the ones he didn't pick go quiet. */
.lform.is-locked .field{opacity:1;color:var(--ink);-webkit-text-fill-color:var(--ink);background-color:transparent;border-style:dashed;box-shadow:none;cursor:default;resize:none}
.lform.is-locked select.field{background-image:none;padding-right:16px}
.lform.is-locked .lform__radio,.lform.is-locked .lform__radio input{cursor:default}
.lform.is-locked .lform__radio input:not(:checked) + span{background:transparent;border-style:dashed;border-color:rgba(37,49,34,.5);box-shadow:none;color:rgba(37,49,34,.74)}
.lform.is-locked .lform__radio input:not(:checked) + span::before{border-color:rgba(37,49,34,.5);background:transparent;box-shadow:none}

/* a select box keeps the answer he picked inside its own edge. On a 320px phone the Safari engine draws a long answer
   ("Self-taught, books, courses, videos") past the box, which made the whole page 10px wider than the screen. */
.apply select.field{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the application opens as one block under his answers (/reframe/live/ wraps it in section#apply). When the script
   scrolls to it, it stops clear of the header. */
.w2-apply{display:flex;flex-direction:column;gap:26px;scroll-margin-top:calc(var(--nav-h) + 24px)}

/* a block the script has just shown rises into place (not when he has asked for less motion). On section#apply the
   blocks inside it rise, never the section itself: the script scrolls to the section, and a section that is still
   moving would end up 22px higher than where the scroll stopped. */
.w2-apply.fade-in > *,.state.fade-in{animation:w2-rise .8s ease both}
@keyframes w2-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- the picture rail beside the two forms ----------
   As the page loads the rail holds one framed photo, the figurine and a last photo. While the application is open the
   column beside it is three times as tall, so three more photos are drawn (.only-open), spread down its length. */
.apply__ph--top{width:88%;align-self:flex-start}
.apply__ph--end{width:62%;align-self:flex-start;margin-bottom:6px}
.only-open{width:70%;align-self:flex-start}
.only-open.is-right{align-self:flex-end}
@media (min-width:900px){
  .apply__rail > .figure-scene.is-spread{margin-top:auto}
  .apply__rail > .only-open{display:none}
  .apply__grid:has(.w2-app:not([hidden], [hidden] *)) .apply__rail > .only-open{display:block}
}
@media (max-width:1100px){
  /* a narrower rail: larger photos */
  .apply__ph--top{width:100%}
  .only-open{width:84%}
  .apply__ph--end{width:78%}
}
@media (max-width:899px){
  /* the rail is gone. The first photo sits over the questions at full width; the last one stands beside the figurine
     (.pair-end in the shared file). */
  .apply__ph--top{width:auto;align-self:stretch}
  .apply .lform .lform__break{margin:8px 0 10px}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets: the photo over the questions is not blown up to the full width of the screen */
  .apply__ph--top{width:72%;align-self:center}
  /* tablets: the application's first photo stands after its second question (on phones it stands over the first).
     On a screen 690px tall the first box, "Your Name", is then on the screen when the page moves to "Application
     unlocked.". The markup is not changed: the first two questions are only drawn ahead of the photo. */
  .w2-app > .lform__group:nth-of-type(-n+2){order:-1}
}
@media (max-width:599px){
  .lform__msg:not(.is-error){font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .w2-apply.fade-in > *,.state.fade-in{animation:none}
}

/* ---------- what he missed (no script is changed for this) ----------
   While the line under a button is an error line (the scripts add .is-error to it), every required box of that form
   that is still empty gets the Peach Red ring, and so do the choices of a required question with nothing ticked.
   A ring goes as soon as its box is filled in. A browser without :has() shows what it showed before. */
.lform:has(.lform__msg.is-error) .field:required:invalid{box-shadow:inset 3px 3px 0 rgba(37,49,34,.08), 0 0 0 3px var(--red)}
.lform:has(.lform__msg.is-error) .lform__group:has(input[type=radio]:required:invalid) .lform__radio span{box-shadow:3px 3px 0 var(--ink), 0 0 0 3px var(--red)}

/* ===================== this page only ===================== */

/* ---------- 1. top: on tablets the photo stays beside the words, so the first question is on the first screen ---------- */
@media (min-width:600px) and (max-width:899px){
  .forge-hero .ihero__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0 30px;align-items:start}
  .forge-hero .ihero__copy{grid-column:1;grid-row:1}
  .forge-hero .ihero__photo{grid-column:2;grid-row:1;margin-top:10px}
  .forge-hero .ihero__photo .frame{aspect-ratio:1/1}
}

/* ---------- application received ----------
   The script hides the application and the line under "Application unlocked.", and shows "Application received."
   right under his six answers. The "unlocked" bar would sit straight over it and say the opposite, so it goes too. */
#apply:has(> #apply-received:not([hidden])) > .state--bar{display:none}

/* ---------- not yet ----------
   The script hides the top block and the six questions and takes the page to the top, so this band is the first
   thing under the header: its top line would double the header's. The rail keeps one framed photo of him (the shared
   file would leave only the thumbs-up figurine, which is the wrong picture beside "Not yet."), and its last photo
   too. That photo is a frame of its own, drawn in this screen only (.apply__ph--ny: the hands-on-hips photo, whose
   other frame, in the top block, is hidden then). The rail's first photo, where he points to his head, is never
   drawn beside "Not yet.". On tablets and phones the card comes first, right under the header, and the photos
   follow it. */
.forge-hero[hidden] + .sec{border-top:0}
.apply__ph--ny{display:none;width:88%;align-self:flex-start}
.apply__grid:has(#not-yet:not([hidden])) .apply__rail > .figure-scene{display:none}
.apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--ny,
.apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--end{display:block}
#questions[hidden] ~ #not-yet{margin-top:0}
@media (min-width:900px){
  /* the rail's last photo stands at the foot of the rail, level with the last proof card */
  .apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--end{width:50%;align-self:flex-end;margin:auto 0 0}
}
@media (max-width:1100px){
  /* a narrower rail: a larger photo */
  .apply__ph--ny{width:100%}
}
@media (max-width:899px){
  /* one column: "Not yet.", the photo, a proof card, the wide photo, a proof card, the last photo */
  .apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--ny{order:4;width:auto;align-self:stretch;margin:0 0 26px}
  .apply__grid:has(#not-yet:not([hidden])) .apply__main > .strip{order:6}
  .apply__grid:has(#not-yet:not([hidden])) .apply__main > .w2-proof ~ .w2-proof{order:7}
  .apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--end{order:8;width:min(56%, 320px);align-self:center;margin:8px 0 0}
}
@media (min-width:600px) and (max-width:899px){
  /* tablets: the photo is not blown up to the full width of the screen */
  .apply__grid:has(#not-yet:not([hidden])) .apply__rail > .apply__ph--ny{width:72%;align-self:center}
}

/* ---------- tablets and phones ----------
   The top block's photo sits right over this band there, so the rail's first photo is left out (two photos of him in a
   row would push the first question off the first screen). A wide photo stands between the forms and the two proof
   cards. */
@media (max-width:899px){
  .apply__rail > .apply__ph--top{display:none}
  .apply__main > .w2-proof{order:5}
}