/* Page styles for index.html (kept out of the page so a strict Content-Security-Policy can apply). */
/* Light theme only, so every participant sees identical colours. */
:root{
  --bg:#eceff3; --surface:#ffffff; --sunken:#f5f7fa; --ink:#18202d; --muted:#5a6476; --line:#d3d9e2;
  --accent:#1d6b66; --safe:#2259c4; --forbid:#c22f38; --warn:#a15c00;
  --f-body:"Inter","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.5}
.jspsych-display-element{font-family:var(--f-body);font-size:17px}
.jspsych-content{max-width:1080px;padding:24px 0}
.page{width:min(760px,94vw);margin:0 auto;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px 32px}
.page h2{margin:0 0 14px;font-size:1.35rem;line-height:1.25}
.page p{margin:0 0 12px}
.page ul{margin:0 0 12px;padding-left:22px}
.page .muted,.muted{color:var(--muted)}
.page .small{font-size:.88rem}
.page h3{margin:18px 0 8px;font-size:1.05rem}
.consent-boxes{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.consent-boxes label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;line-height:1.4}
.consent-boxes input{margin-top:4px;flex:none;width:16px;height:16px}
.jspsych-btn:disabled{opacity:.45;cursor:not-allowed}
.eyebrow{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.chip{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px}
.chip.s{background:var(--safe)} .chip.f{background:var(--forbid)}
kbd{font-family:var(--f-mono);font-size:.8rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--sunken)}
.sumgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 14px}
.sumgrid div{background:var(--sunken);border-radius:8px;padding:10px 12px}
.sumgrid b{display:block;font-family:var(--f-mono);font-size:1.2rem;font-variant-numeric:tabular-nums}
.sumgrid span{font-size:.82rem;color:var(--muted)}
.warnline{color:var(--warn)}
.debugbox{font-family:var(--f-mono);font-size:.8rem;background:var(--sunken);border-radius:8px;padding:10px 12px;white-space:pre-wrap}
.jspsych-btn{font-family:var(--f-body);font-size:1rem;padding:10px 20px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.jspsych-btn:hover{border-color:var(--muted);background:var(--surface)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.btn-primary:hover{background:var(--accent);filter:brightness(1.08)}
#jspsych-html-button-response-btngroup{margin-top:18px;gap:10px}
/* survey plugins: left-aligned in the same card look */
.jspsych-survey-multi-choice-preamble,.jspsych-survey-likert-preamble,.jspsych-survey-text-preamble{width:min(760px,94vw);margin:0 auto;text-align:left}
#jspsych-survey-multi-choice-form,#jspsych-survey-likert-form,#jspsych-survey-text-form{width:min(760px,94vw);margin:0 auto;text-align:left}
.jspsych-survey-multi-choice-question{margin-top:18px}
.jspsych-survey-multi-choice-text{font-weight:700}
.jspsych-survey-multi-choice-option{margin:6px 0}
.jspsych-survey-multi-choice-option label{font-weight:400}
.jspsych-survey-likert-statement{font-weight:700;text-align:left}
.jspsych-survey-text textarea{width:100%;font:inherit}
input[type=radio]{accent-color:var(--accent)}

/* Small spacing helpers (instead of inline style attributes) */
.m0{margin:0}
.mt8{margin-top:8px}
.mt12{margin-top:12px}
.mt16{margin-top:16px}

/* Bot check (motion captcha): the frames are 200 x 128 dots, shown at 2x without smoothing */
.captcha{margin:14px 0 6px}
.captcha-canvas{display:block;width:400px;max-width:100%;aspect-ratio:200/128;image-rendering:pixelated;border-radius:6px;background:#181818}
.captcha-status{min-height:1.5em;margin:6px 0}
.captcha-wrong{color:var(--forbid);font-weight:600}
.captcha-choices{display:flex;gap:10px;flex-wrap:wrap}
.captcha-choices .jspsych-btn{min-width:56px;font-weight:600;margin:0}
.captcha-new{margin:0;font-size:.9rem}

/* The session moved to another browser: everything stops behind this until "Continue here". */
.lost { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 24, 32, 0.92); display: flex; align-items: center; justify-content: center; }
.lost .page { max-width: 520px; }
/* Debug panel (?debug=1): the state and the last requests. */
.debugpanel { position: fixed; right: 8px; bottom: 8px; z-index: 900; margin: 0; padding: 8px 10px; max-width: 420px; font: 11px/1.4 "JetBrains Mono", monospace; color: #cfd6e4; background: rgba(20, 24, 32, 0.9); border-radius: 6px; white-space: pre-wrap; pointer-events: none; }