/* Shared academic-study interface. */
:root { --ink:#243446; --muted:#627184; --line:#dce3eb; --accent:#285d80; --radius:14px; }
* { box-sizing:border-box; }
body { margin:0; background:#f4f6f8; color:var(--ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
.study-container { width:min(100% - 40px,1040px); margin:32px auto; }
.study-card,.container,[id^="container-"] { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 40px; box-shadow:0 6px 24px rgba(28,45,62,.045); }
.container,[id^="container-"] { width:min(100% - 40px,1040px); margin:32px auto; }
main:focus { outline:none; }
h1,h2,h3 { color:var(--ink); font-weight:650; line-height:1.25; }
h1 { font-size:clamp(25px,2.3vw,32px); margin:0 0 22px; letter-spacing:-.5px; }
h2 { font-size:21px; margin:0 0 10px; } h3 { font-size:17px; margin:0 0 8px; }
p { margin:0 0 14px; } .eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:1.6px; font-size:12px; font-weight:700; margin:0 0 8px; }
button,.btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; background:var(--accent); color:white; border:1px solid var(--accent); border-radius:8px; padding:10px 22px; font-family:inherit; font-size:16px; font-weight:600; line-height:1.4; cursor:pointer; text-decoration:none; margin:8px 0 0; }
button:hover:not(:disabled),.btn:hover { background:#204d6a; color:white; text-decoration:none; }
button:disabled { background:#e5eaf0; color:#85909d; border-color:#dce3eb; cursor:not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #83aecb; outline-offset:3px; }
.secondary { background:white; color:var(--accent); border-color:#b9cbd9; }
.target-display { padding:18px 22px; border:1px solid var(--line); border-radius:10px; margin-bottom:16px; }
.target-display h2 { margin:0; font-size:27px; }
.robot,.robot-message { padding:18px 22px; background:#f0f5f8; border:1px solid #dce7ee; border-radius:10px; margin:0 0 20px; }
.robot p:last-child { margin:0; }
.choices { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:8px 0 16px; }
.choices button { min-height:64px; font-size:25px; margin:0; }
#manual { width:100%; margin:0; }
.timer { display:flex; justify-content:space-between; align-items:center; background:#f7f9fb; border:1px solid var(--line); border-radius:8px; padding:10px 16px; font-size:15px; margin:0 0 18px; }
.timer span { font-size:21px; font-weight:650; font-variant-numeric:tabular-nums; }
.manual-check-panel { text-align:center; padding:20px; border:1px solid var(--line); border-radius:10px; background:#fafbfd; }
#rack-image { display:block; max-width:100%; width:auto; height:auto; max-height:52vh; object-fit:contain; margin:16px auto; }
.image-status { color:#8a3a26; background:#fff5f0; border:1px solid #edd6cc; padding:12px; border-radius:8px; }
[hidden] { display:none!important; }
fieldset,.questionnaire-section { min-width:0; padding:18px 20px; border:1px solid var(--line); border-radius:10px; margin:0 0 18px; }
legend { font-size:17px; font-weight:600; line-height:1.5; border:0; width:auto; margin:0 0 8px; padding:0 5px; }
fieldset p { font-size:14px; color:var(--muted); }
.rating { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.rating label { display:flex; justify-content:center; align-items:center; gap:8px; border:1px solid var(--line); border-radius:6px; padding:10px 4px; cursor:pointer; margin:0; }
input[type="radio"],input[type="checkbox"] { width:18px; height:18px; accent-color:var(--accent); margin:0; flex-shrink:0; }
form>label { display:block; margin:18px 0; font-weight:500; }
input:not([type="radio"]):not([type="checkbox"]),select,textarea { display:block; width:100%; max-width:100%; padding:10px 12px; margin-top:8px; border:1px solid #b8c5d1; border-radius:7px; background:white; color:var(--ink); font:inherit; }
textarea { min-height:130px; resize:vertical; }
.consent-grid,.instruction-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:24px 0; }
.consent-section h2,.instruction-grid h2 { font-size:18px; }
.consent-section p,.instruction-grid p { margin:0; }
.consent-actions { border-top:1px solid var(--line); padding-top:20px; }
.agreement { display:flex; gap:12px; align-items:flex-start; font-weight:500; cursor:pointer; }
.agreement input { margin-top:4px; }
.muted { color:var(--muted); font-size:14px; }
.task-example { display:flex; align-items:center; justify-content:center; gap:14px; padding:18px; background:#f7f9fb; border:1px solid var(--line); border-radius:10px; margin:20px 0; text-align:center; }
.example-step { flex:1; } .example-step strong { display:block; margin-bottom:4px; } .example-arrow { color:var(--muted); font-size:23px; }
@media (max-width:700px) { .study-container,.container,[id^="container-"] { width:calc(100% - 24px); margin:12px auto; } .study-card,.container,[id^="container-"] { padding:22px 18px; } .consent-grid,.instruction-grid { grid-template-columns:1fr; gap:18px; } .rating { gap:4px; } .rating label { flex-direction:column; padding:8px 2px; } .choices { gap:8px; } .task-example { flex-direction:column; } .example-arrow { transform:rotate(90deg); } .manual-check-panel { padding:12px; } }
@media (min-width:701px) and (max-height:800px) { .study-container { margin:18px auto; } .study-card { padding:24px 32px; } h1 { margin-bottom:16px; } .target-display,.robot { padding:12px 18px; margin-bottom:12px; } }

/* Continuous task and Pepper interaction. */
.trial-interface { max-width:760px; margin:0 auto; }
.practice-label { text-align:center; color:var(--muted); font-size:14px; }
.trial-interface .target-display { text-align:center; border:0; padding:4px 0 12px; margin:0; }
.target-display h1 { font-size:29px; text-transform:uppercase; margin:0; }
.pepper-message { display:flex; align-items:center; justify-content:center; gap:22px; margin:16px 0 24px; animation:recommendation-in .3s ease-out; }
.pepper-avatar { flex:0 0 96px; animation:pepper-idle 5s ease-in-out infinite; }
.pepper-avatar img,.pepper-avatar svg { display:block; width:96px; height:116px; object-fit:contain; }
.speech-bubble { position:relative; background:#f0f5f8; border:1px solid #dce7ee; border-radius:14px; padding:20px 24px; flex:1; }
.speech-bubble::before { content:""; position:absolute; left:-7px; top:42%; width:12px; height:12px; background:#f0f5f8; border-left:1px solid #dce7ee; border-bottom:1px solid #dce7ee; transform:rotate(45deg); }
.speech-bubble h3 { font-size:14px; color:var(--muted); margin:0 0 8px; }.speech-bubble p { font-size:19px; margin:0; }
.choice-prompt { text-align:center; margin:0 0 12px; font-weight:500; }
.trial-interface .choices button { display:flex; flex-direction:column; gap:2px; min-height:94px; background:white; color:var(--ink); border:1px solid #aebfcd; box-shadow:0 2px 4px #24344608; }
.trial-interface .choices button span { font-size:13px; font-weight:500; color:var(--muted); }.trial-interface .choices button strong { font-size:30px; }
.trial-interface .choices button:hover { background:#edf4f8; border-color:var(--accent); }
.trial-interface #manual { display:flex; width:auto; min-width:190px; margin:18px auto 0; }
.trial-interface .timer { justify-content:center; padding:0; margin:18px 0 0; background:none; border:0; color:var(--muted); }.trial-interface .timer span { font-size:18px; font-weight:500; }
body.inspecting { overflow:hidden; }
.rack-inspection { position:fixed; inset:0; z-index:1000; width:100vw; height:100dvh; background:#f4f6f8; display:flex; flex-direction:column; padding:16px 24px; }
.inspection-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0; padding-bottom:12px; }.inspection-header h2 { margin:0; font-size:20px; }.inspection-header button { margin:0; }
.inspection-image { flex:1; min-height:0; min-width:0; display:flex; align-items:center; justify-content:center; }
.rack-inspection #rack-image { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; margin:0; }
@keyframes pepper-idle { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-2px)} }
@keyframes recommendation-in { from {opacity:.8;transform:translateY(3px)} to {opacity:1;transform:translateY(0)} }
@media(prefers-reduced-motion:reduce) { .pepper-message,.pepper-avatar {animation:none;} }
@media(max-width:700px) { .pepper-message {gap:12px;} .pepper-avatar {flex-basis:66px;} .pepper-avatar img,.pepper-avatar svg {width:66px;height:90px;} .speech-bubble {padding:15px;} .speech-bubble p {font-size:17px;} .rack-inspection {padding:12px;} .inspection-header h2 {font-size:17px;} }

/* Target-first hierarchy and explicit response feedback. */
.trial-interface .target-display { padding:20px 16px; margin:0 0 18px; background:#f2f5f8; border:2px solid #cad6e0; border-radius:12px; }
.trial-interface .target-display .eyebrow {font-size:13px;letter-spacing:2px;margin-bottom:10px;}
.trial-interface .target-display h1 { font-size:clamp(34px,4vw,48px); font-weight:800; line-height:1.1; letter-spacing:.5px; margin:0; }
.inspection-header { position:relative; flex-direction:column; text-align:center; padding:8px 100px 18px; }
.inspection-header #back { position:absolute; left:0; top:0; }
.inspection-target { width:100%; }.inspection-target .eyebrow {font-size:13px;letter-spacing:2px;margin:0 0 6px;}
.inspection-header #inspection-target {font-size:clamp(30px,3.5vw,44px);font-weight:800;text-transform:uppercase;line-height:1.1;}
.feedback-card {text-align:center;}.feedback-card .task-content>h1 {display:inline-block;padding:16px 30px;border-radius:10px;font-size:32px;margin-bottom:20px;}
.feedback-correct .task-content>h1 {color:#19633c;background:#eaf6ee;border:1px solid #bdddc8;}
.feedback-incorrect .task-content>h1 {color:#a12626;background:#fceeee;border:1px solid #ebc4c4;}
.answer-feedback {font-size:21px;}.feedback-card .pepper-message {text-align:left;max-width:760px;margin:24px auto;}
/* Speaking runs twice, then a delayed idle animation continues indefinitely. */
.pepper-avatar.pepper-speaking {animation:pepperSpeak .7s ease-in-out 2,pepperIdle 2.8s ease-in-out 1.4s infinite;}
@keyframes pepperIdle {0%,100% {transform:translateY(0) rotate(0deg);}50% {transform:translateY(-4px) rotate(.5deg);}}
@keyframes pepperSpeak {0%,100% {transform:translateY(0) rotate(0deg);}25%,75% {transform:translateY(-5px) rotate(-1deg);}50% {transform:translateY(-2px) rotate(1deg);}}
@media(prefers-reduced-motion:reduce) {.pepper-avatar.pepper-speaking {animation:none;}}
@media(max-width:700px) {.inspection-header {padding:54px 0 12px;}.trial-interface .target-display {padding:16px 12px;}}

.study-landing {text-align:center;padding:48px 40px;}.study-landing h1 {max-width:800px;margin:16px auto 24px;font-size:clamp(28px,3vw,38px);}.study-landing .landing-intro {font-size:19px;max-width:700px;margin:0 auto 18px;}.study-landing .btn {margin-top:20px;}


.university-wordmark {display:block;width:min(100%,580px);height:auto;max-height:140px;object-fit:contain;margin:0 auto 24px;}.lab-logo {display:block;width:130px;max-width:100%;height:auto;object-fit:contain;margin:0 auto 20px;}.study-landing .lab-logo {width:100px;margin-bottom:24px;}

/* Shared task geometry keeps choices and Continue at the same screen height.
   Longer instruction pages may grow naturally; questionnaires remain independent. */
.task-layout {max-width:760px;margin:0 auto;display:grid;grid-template-rows:minmax(340px,auto) 240px 40px;}
.task-content {min-width:0;display:flex;flex-direction:column;justify-content:center;}
.task-content>h1 {align-self:center;text-align:center;}
.task-action-area {min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
.task-action-area>button {margin:0;min-width:220px;min-height:54px;}
.task-action-area .choice-prompt {margin:0;font-size:15px;}
.task-action-area .choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,480px);margin:0;}
.trial-interface .task-action-area .choices button {min-height:64px;height:64px;flex-direction:row;gap:10px;}
.trial-interface .task-action-area .choices button strong {font-size:27px;}
.trial-interface .task-action-area #manual {margin:0;min-height:44px;}
.task-layout>.timer,.task-footer {height:40px;min-height:40px;margin:0;}
.task-content .pepper-message,.feedback-card .task-content .pepper-message {margin:12px 0;}
.task-content .practice-label {margin:0 0 4px;}
@media(max-width:700px){.task-layout {grid-template-rows:minmax(380px,auto) 240px 40px;}.task-action-area>button {min-width:200px;}}

/* Visual polish: retain shared action geometry and emphasize the content. */
.study-card {border-color:#e5eaf0;box-shadow:0 8px 30px rgba(28,45,62,.035);}
.trial-interface .target-display {border:0;background:#f3f6f8;padding:18px 16px;margin-bottom:12px;}
.pepper-avatar {flex-basis:132px;}
.pepper-avatar img,.pepper-avatar svg {width:132px;height:148px;}
.speech-bubble {border:0;padding:18px 22px;background:#f1f5f8;}
.speech-bubble::before {border:0;background:#f1f5f8;}
.task-content .pepper-message,.feedback-card .task-content .pepper-message {gap:24px;margin:10px 0;}
.trial-interface .task-action-area .choices button {box-shadow:none;border-color:#c4d0db;}
.feedback-card .task-content>h1 {font-size:28px;padding:10px 22px;margin:0 0 14px;border:0;}
.answer-feedback {font-size:20px;}.answer-feedback p {margin-bottom:10px;}
.completion-card {text-align:center;max-width:820px;margin:0 auto;padding:48px 36px;}
.completion-card .lab-logo,#container-not-an-ad .lab-logo {width:100px;}
.completion-card h1 {margin:20px 0 16px;}.completion-card .completion-message {font-size:19px;color:var(--muted);max-width:540px;margin:0 auto 20px;}
.completion-card .completion-note {font-size:14px;color:var(--muted);margin-top:24px;}
@media(max-width:700px){.pepper-avatar {flex-basis:96px;}.pepper-avatar img,.pepper-avatar svg {width:96px;height:120px;}.task-content .pepper-message,.feedback-card .task-content .pepper-message {gap:14px;}.speech-bubble {padding:15px;}.completion-card {padding:32px 20px;}}

/* Compact study information and laptop layouts; allow scrolling rather than clipping. */
.course-info {font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 14px;}
.study-team {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;}
.study-team strong,.study-team span,.study-team a {display:block;}.study-team strong {font-size:15px;color:var(--ink);}.study-team a {color:var(--accent);}
.ratings-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.ratings-grid fieldset {margin:0;padding:12px 14px;}.ratings-grid legend {font-size:16px;}.ratings-grid fieldset p {margin-bottom:8px;font-size:13px;}
.ratings-grid .rating {gap:5px;}.ratings-grid .rating label {flex-direction:column;gap:5px;padding:8px 3px;}.ratings-grid>button {grid-column:1/-1;justify-self:center;min-width:180px;}
@media(min-width:701px) and (max-height:850px){
 .study-container {margin:12px auto;}.study-card {padding:22px 30px;}
 .study-landing {padding:24px 32px;}.study-landing .university-wordmark {width:380px;max-height:75px;margin-bottom:12px;}
 .study-landing h1 {font-size:30px;margin:12px auto 16px;}.study-landing .landing-intro {font-size:17px;margin-bottom:12px;}.study-landing .btn {margin-top:8px;}
 .study-team {margin-top:18px;padding-top:14px;}
 .task-layout {grid-template-rows:minmax(320px,auto) 222px 30px;}.task-action-area {min-height:222px;gap:8px;}.task-layout>.timer,.task-footer {height:30px;min-height:30px;}
 .trial-interface .target-display {padding:12px 16px;margin-bottom:8px;}.trial-interface .target-display h1 {font-size:38px;}
 .task-content .pepper-message,.feedback-card .task-content .pepper-message {margin:8px 0;}
 .consent-grid,.instruction-grid {gap:14px 24px;margin:18px 0;}
}
@media(max-width:700px){.study-team,.ratings-grid {grid-template-columns:1fr;}.study-team {text-align:left;}.ratings-grid .rating label {flex-direction:row;}.study-landing {padding:24px 18px;}}

.inspection-actions {flex-shrink:0;display:flex;justify-content:flex-start;padding-top:8px;}.inspection-actions button {margin:0;min-width:110px;}

.task-guide {display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin:8px 0 16px;}.task-guide h2 {font-size:18px;margin-bottom:6px;}.task-guide p {margin:0;font-size:15px;}.instruction-timing {padding:12px 16px;background:#f0f5f8;border-radius:8px;font-size:15px;}.instruction-page {grid-template-rows:auto 80px 0;}.instruction-page .task-action-area {min-height:80px;}.instruction-page .task-footer {height:0;min-height:0;}@media(max-width:700px){.task-guide {grid-template-columns:1fr;}}


.video-page {--video-ratio:1.777778;width:min(calc(100vw - 32px),calc((100dvh - 116px) * var(--video-ratio)));margin:16px auto;text-align:center;}.video-page video {display:block;width:100%;height:auto;max-width:100%;border:0;border-radius:8px;background:transparent;}.video-actions {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;}.video-actions button,.video-actions .btn {margin:0;}.video-page #video-status {margin-top:10px;}

/* Illustrated task overview; examples are deliberately non-interactive. */
.overview-card {padding:24px!important;}.overview-card .instruction-page {max-width:none;grid-template-rows:auto 60px 0;}.overview-card .task-content {justify-content:flex-start;}
.overview-eyebrow {text-align:center;background:#f0f4f8;color:#687d9e;letter-spacing:3px;font-weight:700;font-size:12px;padding:12px 0 0;margin:0;border-radius:12px 12px 0 0;}
.overview-card .task-content>h1 {align-self:stretch;background:#f0f4f8;font-size:38px;font-weight:800;padding:6px 12px 14px;margin:0 0 12px;border-radius:0 0 12px 12px;}
.overview-lead {text-align:center;font-size:17px;line-height:1.45;margin-bottom:16px;}
.overview-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.overview-step {background:#f5f8fa;border-radius:12px;padding:16px;display:flex;flex-direction:column;min-width:0;}
.overview-step header {display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;}.step-number {display:flex;align-items:center;justify-content:center;flex:0 0 34px;height:34px;border-radius:50%;background:#dce9ff;color:#245bc8;font-size:24px;font-weight:750;}
.overview-step h2 {font-size:17px;line-height:1.25;margin:3px 0 0;}.overview-step h2 small {font-size:14px;color:var(--muted);}.overview-step>p {font-size:14px;line-height:1.45;margin:0 0 14px;}
.instruction-example {background:#fff;padding:12px;border-radius:10px;margin-top:auto;}.example-target {text-align:center;background:#f0f4f8;border-radius:6px;padding:6px;}.example-target small {display:block;font-size:9px;letter-spacing:2px;color:#637b9d;}.example-target strong {display:block;font-size:22px;line-height:1.2;}
.example-pepper {display:flex;align-items:center;gap:8px;margin:10px 0;}.example-pepper img {width:70px;height:90px;object-fit:contain;}.example-pepper p {font-size:12px;line-height:1.4;background:#f0f4f8;border-radius:8px;padding:10px;margin:0;}
.example-caption {font-size:11px;line-height:1.4;text-align:center;color:var(--muted);margin:10px 0 0;}.example-choices {display:grid;grid-template-columns:1fr 1fr;gap:8px;}.example-choices span {border:1px solid #cbd8e7;border-radius:6px;padding:12px 6px;text-align:center;font-size:11px;}.example-choices b {font-size:22px;margin-left:5px;}
.example-manual {text-align:center;border:1px solid #70a3ef;color:#245da0;background:#f2f7ff;border-radius:6px;padding:8px;margin:12px 16px 0;font-size:13px;font-weight:600;}.rack-example>img {width:100%;height:auto;display:block;margin-top:8px;}.example-back {font-size:12px;margin-top:6px;color:var(--accent);}
.overview-notice {display:flex;gap:12px;align-items:center;background:#edf4ff;border:1px solid #d4e3ff;border-radius:10px;padding:12px 16px;margin-top:14px;color:#234f94;}.overview-notice>span {display:flex;align-items:center;justify-content:center;border-radius:50%;background:#326ce4;color:white;width:24px;height:24px;flex-shrink:0;font-weight:700;}.overview-notice p {font-size:13px;line-height:1.45;margin:0;}
.overview-footnote {font-size:12px;color:var(--muted);margin:10px 0 0;text-align:center;}.overview-card .task-action-area {min-height:60px;align-items:flex-end;}.overview-card #continue {background:#2869d8;border-color:#2869d8;min-height:44px;}
@media(max-width:800px){.overview-steps {grid-template-columns:1fr;}.overview-card .task-content>h1 {font-size:30px;}.instruction-example {max-width:350px;width:100%;align-self:center;}.overview-card .task-action-area {align-items:center;}}