/* pastel-screens.css
   Survey and thinking-task screens (Signal look): a paper panel on the navy page, white question
   sheets, outlined answer buttons that turn orange when chosen.
*/

/* ---- survey and task screens ---- */
#screen-survey.active,
#screen-cognitive.active{
  max-width:min(920px,calc(100vw - 28px));
  min-height:calc(100svh - 42px);
  margin:21px auto;
  padding:clamp(20px,4.5vw,54px);
  justify-content:center;
  gap:clamp(18px,3vw,30px);
  color:#0f1a17;
  background:#f1f3ee;
  border:0;
  border-top:6px solid #f2b33d;
  border-radius:0;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}
/* the survey screen must not clip, or its header can't stay pinned while scrolling */
#screen-survey.active{overflow:visible;}
#screen-survey.active::before,
#screen-cognitive.active::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
}
#screen-survey.active > *,
#screen-cognitive.active > *{position:relative;z-index:1;}
/* pinned header: the assessment's name, then its instruction line */
#screen-survey .survey-head{
  position:sticky;
  top:0;
  z-index:5;
  width:min(760px,100%);
  margin:0 auto;
  padding:14px 0 12px;
  background:#f1f3ee;
  border-bottom:1px solid #d6ddd8;
}
#screen-survey .survey-name{
  margin:0;
  font-family:var(--display-font);
  font-size:clamp(26px,3.4vw,34px);
  font-weight:420;
  letter-spacing:-.015em;
  line-height:1.1;
  color:#0f1a17;
}
#screen-survey .survey-instruction{
  margin:6px 0 0;
  color:#44524c;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.45;
}
#screen-survey .survey-question{
  width:min(760px,100%);
  margin:0 auto;
  padding:clamp(18px,3vw,30px);
  border:1px solid #cad3cd;
  border-radius:0;
  background:#ffffff;
  box-shadow:none;
  animation:surveyCardIn .48s cubic-bezier(.2,.8,.2,1) both;
}
#screen-survey .survey-answers{
  width:min(760px,100%);
  margin:0 auto;
  animation:surveyCardIn .48s cubic-bezier(.2,.8,.2,1) .08s both;
}

/* "Question 3 of 20" with a small bar under it, between Back and Exit */
#screen-survey .survey-progress-wrap{display:grid;gap:6px;justify-items:center;flex:1;min-width:120px;}
#screen-survey .survey-count{color:#0f1a17;font-weight:600;font-size:15px;}
#screen-survey .survey-progress{display:block;width:min(220px,100%);height:6px;border-radius:3px;background:#d6ddd8;overflow:hidden;}
#screen-survey .survey-progress i{display:block;height:100%;width:0;background:#f2b33d;transition:width .25s ease;}
#screen-survey .item-text{
  color:#0f1a17;
  font-weight:700;
  max-width:760px;
}
#screen-survey .scale{
  gap:clamp(8px,1.6vw,14px);
  margin-top:0;
}
#screen-survey .scale button{
  min-height:clamp(58px,8vw,72px);
  border-radius:0;
  border:2px solid #cad3cd;
  background:#ffffff;
  color:#0f1a17;
  box-shadow:none;
  font-size:clamp(13px,1.6vw,16px);
  font-weight:600;
  transition:border-color .15s ease,background .15s ease;
}
#screen-survey .scale button:hover:not(:disabled),
#screen-survey .scale button:focus-visible{
  border-color:#0f1a17;
  box-shadow:none;
}
#screen-survey .scale button.selected{
  background:#f2b33d;
  color:#0f1a17;
  border-color:#8a5e0e;
  box-shadow:none;
}
#screen-survey .scale-buttons.scale-long button{
  min-height:clamp(58px,7vw,70px);
  padding:10px 6px;
  font-size:clamp(12px,1.7vw,14px); /* never below 12px; scales with the screen above that */
  line-height:1.15;
}
#screen-survey .survey-select-card{
  border-radius:0;
  border:1px solid #cad3cd;
  background:#ffffff;
  box-shadow:none;
}
#screen-survey .survey-select-card label{color:#44524c;}
#screen-survey .survey-select-card select,
#screen-survey .survey-select-card input{
  border-radius:0;
  border:2px solid #cad3cd;
  background:#ffffff;
  color:#0f1a17;
}
#screen-survey .survey-nav{
  width:min(760px,100%);
  margin:0 auto;
  align-items:center;
}
#screen-survey .survey-count{color:#44524c;font-weight:700;}
#screen-survey .btn-ghost,
#screen-cognitive .btn-ghost{
  color:#0f1a17!important;
  border:2px solid #0f1a17!important;
  background:transparent;
  border-radius:0;
}
#screen-survey .btn-ghost:hover,
#screen-cognitive .btn-ghost:hover{background:#0f1a17;color:#f1f3ee!important;}
.progress-wrap{height:5px;background:rgba(163,194,180,.26);}
.progress-bar{background:#f2b33d;box-shadow:none;}
#screen-cognitive .task-shell{width:min(860px,100%);margin:0 auto;gap:16px;}
#screen-cognitive .task-meta{
  justify-content:space-between;
  color:#44524c;
  font-weight:700;
}
#screen-cognitive .task-stage{
  border:1px solid #cad3cd;
  border-radius:0;
  background:#ffffff;
  color:#0f1a17;
  padding:clamp(20px,4vw,42px);
  box-shadow:none;
  animation:surveyCardIn .48s cubic-bezier(.2,.8,.2,1) both;
  touch-action:manipulation; /* fast repeated taps answer at once instead of waiting to see if they are a double-tap zoom */
}
#screen-cognitive .task-stage h2{
  font-family:var(--display-font);
  font-size:clamp(30px,6vw,54px);
  font-weight:420;
  
  letter-spacing:-.015em;
  line-height:1.06;
  color:#0f1a17;
}
#screen-cognitive .task-stage p{
  max-width:680px;
  color:#44524c;
  font-size:clamp(15px,2vw,18px);
}
#screen-cognitive .task-stimulus{
  border:0;
  border-radius:0;
  background:#f5f7f3;
  box-shadow:inset 0 0 0 1px #d6ddd8;
  padding:clamp(18px,4vw,34px);
}
#screen-cognitive .task-options button,
#screen-cognitive .task-input-row button{
  border-radius:0;
  border:2px solid #cad3cd;
  background:#ffffff;
  box-shadow:none;
  transition:border-color .15s ease,background .15s ease;
}
#screen-cognitive .task-options button:hover,
#screen-cognitive .task-input-row button:hover{
  border-color:#0f1a17;
  box-shadow:none;
}
#screen-cognitive .task-options button.selected{
  background:#f2b33d;
  outline:0;
  border-color:#8a5e0e;
}
#screen-cognitive .task-input-row input{
  border-radius:0;
  border:2px solid #cad3cd;
  background:#ffffff;
  color:#0f1a17;
}
#screen-cognitive .task-topbar{
  color:#44524c;
  background:#ffffff;
  border:1px solid #cad3cd;
  border-radius:0;
  padding:10px 12px;
}
#screen-cognitive .timebar{background:#e1e6e2;}
#screen-cognitive .timebar span{background:#f2b33d;}
#screen-cognitive .pattern-card{
  border-radius:0;
  background:#ffffff;
  box-shadow:none;
}
#screen-cognitive .pvt-field{
  border:0;
  border-radius:0;
  background:#191c28; /* stimulus color: kept from before the Signal restyle so task timing is comparable */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 45px rgba(15,26,23,.22);
}
#screen-cognitive .pvt-target{
  background:#ffb36f; /* stimulus color: unchanged by the Signal restyle */
  box-shadow:0 0 0 18px rgba(255,179,111,.20),0 18px 44px rgba(0,0,0,.28);
}
@keyframes surveyCardIn{
  from{opacity:0;transform:translateY(18px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes diagnosticCardIn{
  from{opacity:0;transform:translateY(22px) rotate(.8deg) scale(.985);}
  to{opacity:1;transform:translateY(0) rotate(0) scale(1);}
}
@media (max-width:820px){
  #screen-survey.active,
  #screen-cognitive.active{
    max-width:calc(100vw - 16px);
    min-height:calc(100svh - 16px);
    margin:8px auto;
    border-radius:0;
  }
}
/* answer buttons: words wrap between words, never spill out of their cell */
#screen-survey .scale button{min-width:0;overflow-wrap:break-word;}
/* the nav wraps rather than pushing Exit past the edge */
#screen-survey .survey-nav{flex-wrap:wrap;gap:12px;}
@media (max-width:620px){
  /* six-answer scales are already one per row below 620px (survey-results.css); keep their text full size */
  #screen-survey .scale-buttons.scale-long button{min-height:48px;padding:10px 14px;font-size:clamp(14px,4.2vw,16px);line-height:1.25;text-align:center;justify-content:center;}
}
@media (max-width:560px){
  /* on phones there is not room for 4-6 answers side by side ("Sometimes" overflowed),
     so every answer scale becomes a full-width list, one answer per row */
  #screen-survey{padding-top:24px;justify-content:flex-start;}
  #screen-survey .scale-buttons,
  #screen-survey .scale-buttons.scale-long{grid-template-columns:1fr;gap:8px;}
  #screen-survey .scale button,
  #screen-survey .scale-buttons.scale-long button{
    min-height:48px;padding:10px 14px;
    font-size:clamp(14px,4.2vw,16px);line-height:1.25;
    text-align:center;justify-content:center;
  }
  /* "Question 3 of 20" gets its own row, with Back and Exit under it */
  #screen-survey .survey-progress-wrap{order:-1;flex:1 1 100%;}
  /* equal halves; on question 1 Back is invisible but keeps its half, so Exit never jumps */
  #screen-survey .survey-nav .btn{flex:1 1 0;min-width:0;padding-inline:10px;}
}
@media (max-width:430px){
  #screen-survey.active,
  #screen-cognitive.active{padding:16px 12px;}
}

/* ---- "Complete" screen after a survey or task (results open from "See results") ---- */
#screen-complete.active{
  max-width:min(920px,calc(100vw - 28px));
  min-height:calc(100svh - 42px);
  margin:21px auto;
  padding:clamp(20px,4.5vw,54px);
  justify-content:center;
  align-items:center;
  background:#f1f3ee;
  border-top:6px solid #f2b33d;
  color:#0f1a17;
}
.complete-card{
  position:relative;
  overflow:hidden;
  width:min(560px,100%);
  padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);
  text-align:center;
  background:#ffffff;
  border:1px solid #cad3cd;
  border-top:6px solid #1d6e55;
  animation:completeIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.complete-card > *:not(.complete-confetti){position:relative;z-index:1;}
.complete-badge{
  width:76px;height:76px;margin:0 auto 14px;
  display:grid;place-items:center;
  border-radius:50%;
  background:#1d6e55;color:#ffffff;
  animation:completeBadge .55s cubic-bezier(.3,1.5,.5,1) .1s both;
}
.complete-badge svg{width:44px;height:44px;}
.complete-kicker{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1d6e55;}
.complete-card h2{
  margin:8px 0 10px;
  font-family:var(--display-font);
  font-weight:420;
  letter-spacing:-.015em;
  font-size:clamp(30px,4.4vw,44px);
  line-height:1.08;
  color:#0f1a17;
}
.complete-text{margin:0 auto;max-width:34rem;color:#44524c;font-size:16px;}
.complete-card .btn-row{justify-content:center;margin-top:24px;}
/* tasks: brighter, with confetti */
.complete-card.is-task{border-top-color:#f2b33d;background:linear-gradient(#fffbf0,#ffffff 60%);}
.complete-card.is-task .complete-badge{background:#f2b33d;color:#0f1a17;}
.complete-card.is-task .complete-kicker{color:#8a5e0e;font-size:15px;}
.complete-confetti{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.complete-confetti i{
  position:absolute;top:-16px;left:var(--x);
  width:10px;height:14px;border-radius:2px;
  opacity:0;
  animation:confettiFall var(--t) cubic-bezier(.25,.6,.4,1) var(--d) forwards;
}
.complete-confetti i.is-ribbon{width:6px;height:26px;border-radius:3px;}
@keyframes confettiFall{
  0%{opacity:1;transform:translate(0,0) rotate(0);}
  85%{opacity:1;}
  100%{opacity:0;transform:translate(var(--drift),520px) rotate(var(--r));}
}
@keyframes completeIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes completeBadge{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .complete-card,.complete-badge{animation:none;}
}
@media (max-width:820px){
  #screen-complete.active{max-width:calc(100vw - 16px);min-height:calc(100svh - 16px);margin:8px auto;}
}

/* ---- thinking-task header: name, phase tag, and the countdown ---- */
#screen-cognitive .task-meta{align-items:center;min-height:34px;}
#screen-cognitive .task-name{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:#0f1a17;}
#screen-cognitive .task-phase{padding:3px 9px;border-radius:6px;background:#e1e6e2;color:#44524c;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
#screen-cognitive .task-clock{display:inline-flex;align-items:center;gap:8px;color:#0f1a17;}
#screen-cognitive .task-clock[hidden]{display:none;}
#screen-cognitive .task-clock-icon{width:20px;height:20px;flex:0 0 auto;}
#screen-cognitive .task-clock-bar{display:block;width:clamp(90px,22vw,180px);height:8px;border-radius:4px;background:#d6ddd8;overflow:hidden;}
#screen-cognitive .task-clock-bar i{display:block;height:100%;width:100%;background:#1d6e55;transition:width .2s linear;}
#screen-cognitive .task-clock.is-low .task-clock-bar i{background:#f2b33d;}
#screen-cognitive .task-clock b{min-width:3.2em;font-variant-numeric:tabular-nums;font-size:16px;}

/* ---- task intros: the long-test notice and the Stroop example ---- */
#screen-cognitive .task-note{
  margin-top:12px;
  padding:12px 14px;
  border-left:4px solid #f2b33d;
  border-radius:6px;
  background:#fffbf0;
  color:#0f1a17;
  font-weight:600;
}
.stroop-example{
  display:grid;justify-items:center;gap:10px;
  margin-top:18px;padding:16px;
  border:1px solid #d6ddd8;border-radius:6px;background:#f5f7f3;
  text-align:center;
}
.stroop-example-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#66756e;}
.stroop-example-word{font-size:44px;font-weight:900;letter-spacing:.04em;line-height:1;}
.stroop-example-choices{display:flex;gap:10px;}
.stroop-example-choices span{padding:8px 16px;border:2px solid #cad3cd;border-radius:6px;background:#fff;font-weight:800;color:#0f1a17;}
.stroop-example-choices .is-answer{border-color:#1d6e55;background:#e6f2ec;color:#1d6e55;}
.stroop-example-why{max-width:34rem;color:#44524c;font-size:15px;}
.task-scorebar{display:flex;justify-content:flex-end;}

/* ---- sustained focus: a ring flashes on every press ---- */
.sart-field.is-pressed{animation:sartPress .3s ease-out;}
@keyframes sartPress{
  0%{box-shadow:inset 0 0 0 8px #86d4b4, 0 0 0 4px #86d4b4;}
  100%{box-shadow:inset 0 0 0 0 rgba(134,212,180,0), 0 0 0 0 rgba(134,212,180,0);}
}