/* ON-1 — styles.
 * Two rules here are experimental requirements, not aesthetics:
 *   1. .on1-source and .on1-entry disable text selection (§5.7, copy-out).
 *   2. There is NO countdown element anywhere in this stylesheet or the
 *      markup. If you find yourself adding one, read §5.4 first.
 * The layout is verified at 900 CSS px, the minimum accepted viewport (T8).
 */

:root {
  --on1-ink: #1a1a1a;
  --on1-muted: #5b6470;
  --on1-line: #d4d9e0;
  --on1-bg: #ffffff;
  --on1-panel: #f7f8fa;
  --on1-accent: #2e5496;
  --on1-flag: #b3541e;
  --on1-max: 1180px;
}

html, body { margin: 0; padding: 0; background: var(--on1-bg); color: var(--on1-ink); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.5; }
#jspsych-target { max-width: var(--on1-max); margin: 0 auto; padding: 24px 20px 60px; }

.on1-text { max-width: 720px; margin: 0 auto; text-align: left; }
.on1-text h2 { font-size: 22px; margin: 0 0 12px; color: var(--on1-accent); }
.on1-text ul { padding-left: 20px; }
.on1-small { color: var(--on1-muted); font-size: 14px; }
.on1-done { text-align: center; }
.on1-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 22px; letter-spacing: .05em; background: var(--on1-panel); padding: 10px 14px; display: inline-block; border-radius: 6px; }

.on1-btn { background: var(--on1-accent); color: #fff; border: 0; border-radius: 6px; padding: 10px 22px; font-size: 15px; cursor: pointer; }
.on1-btn:disabled { background: #b9c1cd; cursor: not-allowed; }
.on1-actions { margin-top: 16px; }

/* ---- the persistent attribution banner (§5.6) ------------------------- */
.on1-banner {
  position: sticky; top: 0; z-index: 20;
  background: #eef2f8; border: 1px solid var(--on1-line); border-left: 4px solid var(--on1-accent);
  padding: 9px 14px; margin: 0 0 12px; font-size: 14px; color: #24313f;
}

/* ---- two-panel task layout -------------------------------------------- */
.on1-task { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.on1-pane { border: 1px solid var(--on1-line); border-radius: 8px; background: var(--on1-bg); padding: 12px 14px; min-width: 0; }
.on1-pane-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--on1-muted); margin-bottom: 8px; }

/* COPY-OUT PROTECTION. Do not remove — see §5.7. The JS handlers in
   telemetry.js log every attempt; these rules stop the easy cases. */
.on1-source, .on1-entry {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.on1-record-img { width: 100%; height: auto; display: block; border: 1px solid var(--on1-line); border-radius: 4px; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* inputs must stay selectable so participants can edit their own typing */
.on1-input { -webkit-user-select: text; user-select: text; }

.on1-item-preamble { font-size: 13px; color: var(--on1-muted); margin: -2px 0 10px; }

/* ---- execute form ------------------------------------------------------ */
.on1-field { display: block; margin-bottom: 10px; }
.on1-field-label { display: block; font-size: 13px; color: var(--on1-muted); margin-bottom: 3px; }
.on1-input { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 14px; border: 1px solid var(--on1-line); border-radius: 5px; font-family: inherit; }
.on1-input:focus { outline: 2px solid var(--on1-accent); outline-offset: -1px; }
.on1-feedback { margin-top: 10px; font-size: 14px; color: var(--on1-accent); min-height: 20px; }

/* autofill detection hook — telemetry.js listens for this animation name */
@keyframes on1AutofillDetected { from { } to { } }
input:-webkit-autofill { animation-name: on1AutofillDetected; animation-duration: 1ms; }

/* ---- verify rows ------------------------------------------------------- */
.on1-vrow { border-bottom: 1px solid var(--on1-line); padding: 9px 0; }
.on1-vrow:last-of-type { border-bottom: 0; }
.on1-vhead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.on1-vvalue { font-weight: 600; text-align: right; word-break: break-word; }
.on1-vmarks { display: flex; gap: 14px; margin-top: 5px; }
.on1-mark { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.on1-mark input { margin: 0; }
.on1-vdetail { margin-top: 8px; padding: 9px 11px; background: var(--on1-panel); border-left: 3px solid var(--on1-flag); border-radius: 0 5px 5px 0; }
.on1-cat { display: block; font-size: 13px; margin-bottom: 5px; cursor: pointer; }
.on1-cat input { margin-right: 6px; }
.on1-corr { display: block; font-size: 13px; color: var(--on1-muted); margin-top: 6px; }
.on1-corr span { display: block; margin-bottom: 3px; }

/* ---- rating grid ------------------------------------------------------- */
.on1-grid-wrap { max-width: 1120px; margin: 0 auto; }
.on1-preamble { color: var(--on1-muted); }
/* border-collapse: collapse breaks position:sticky on table headers in Chrome,
   so the scale labels scrolled away and the participant was left guessing what
   the columns meant halfway down a 25-row grid. separate + border-spacing 0
   looks identical and keeps the header stuck. */
.on1-grid { width: 100%; border-collapse: separate; border-spacing: 0; }
.on1-grid th, .on1-grid td { border-bottom: 1px solid var(--on1-line); padding: 7px 4px; }
.on1-grid thead th { position: sticky; top: 0; z-index: 5; background: var(--on1-bg);
                     vertical-align: bottom; border-bottom: 2px solid var(--on1-line);
                     box-shadow: 0 1px 0 var(--on1-bg); }
/* Item column wide enough that the longest statement (69 characters) sits on
   one line at a normal window width. It still wraps at the 900 px floor, which
   is why the marker is positioned in the gutter rather than inline: as an
   inline span it took width on the first line only, so a wrapped statement
   appeared indented on line one and flush on line two. */
.on1-gitem { text-align: left; width: 47%; font-size: 14px;
             position: relative; padding-left: 18px; }
.on1-gmark { position: absolute; left: 2px; top: 7px; }
.on1-gcol { width: 7.5%; }

/* The header stacks a number over a label. Bottom-aligning the cell meant a
   three-line label ("Neither agree nor disagree") pushed its number a line
   higher than the other six. Top-align, and give the label a fixed height so
   every number sits on the same line. */
.on1-grid thead th, .on1-grepeat th { vertical-align: top; }
.on1-gnum { font-size: 13px; font-weight: 600; height: 1.3em; line-height: 1.3em; }
.on1-ganchor { font-size: 11px; color: var(--on1-muted); line-height: 1.2;
               height: 3.6em; display: block; }
.on1-gcell { text-align: center; }
.on1-grow.on1-answered .on1-gitem { color: var(--on1-muted); }
.on1-grid-warn { color: var(--on1-flag); font-size: 14px; margin-bottom: 8px; }

/* ---- misc form bits ---------------------------------------------------- */
.on1-check { display: block; margin: 6px 0; }
.on1-inline { display: inline-flex; flex-direction: column; align-items: center; width: 42px; font-size: 13px; }
.on1-scale { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 14px; }
.on1-block { display: block; margin: 12px 0; }
.on1-block select { display: block; margin-top: 4px; padding: 6px 8px; font-size: 14px; min-width: 240px; }

/* ---- 900px floor (T8) --------------------------------------------------- */
@media (max-width: 1000px) {
  .on1-task { gap: 12px; }
  #jspsych-target { padding: 16px 12px 48px; }
  .on1-gitem { width: 38%; font-size: 13px; }
}


/* ---- added after the first round of tester feedback --------------------- */

/* Short text screens sat at the very top of a tall empty page. Centre them
   vertically — but only screens that are text, never the two-panel task. */
.jspsych-content-wrapper:has(.on1-text):not(:has(.on1-task)):not(:has(.on1-grid)) {
  min-height: 72vh; display: flex; align-items: center; justify-content: center;
}
.on1-text { width: 100%; }

/* Execute: an unfilled field the participant has already left */
.on1-input.on1-missing { border-color: var(--on1-flag); background: #fdf6f1; }
.on1-warn { color: var(--on1-flag); font-size: 14px; margin-bottom: 8px; }

/* Practice feedback, per field */
.on1-fbhead { font-weight: 600; margin-bottom: 6px; color: var(--on1-ink); }
.on1-fbrow { display: flex; justify-content: space-between; gap: 12px; font-size: 13px;
             padding: 3px 0; border-bottom: 1px solid var(--on1-line); }
.on1-fbrow:last-child { border-bottom: 0; }
.on1-fbrow span:first-child { color: var(--on1-muted); white-space: nowrap; }
.on1-fbrow span:last-child { text-align: right; }
.on1-fbrow.on1-ok span:last-child { color: #2c6e49; }
.on1-fbrow.on1-no span:last-child { color: var(--on1-flag); }
/* Spotted the error, wrong category: neither right nor wrong, and it must not
 * read as either. Amber, so the practice screen has three distinguishable
 * states rather than a pass/fail binary that hides a real mistake. */
.on1-fbrow.on1-part span:last-child { color: #a8620a; }

/* Rating grid: unanswered rows are marked, not merely scrolled to */
.on1-gmark { color: transparent; font-weight: 700; }
.on1-grow.on1-unanswered { background: #fdf1ea; }
.on1-grow.on1-unanswered .on1-gmark { color: var(--on1-flag); }
.on1-grow.on1-unanswered .on1-gitem { color: var(--on1-flag); font-weight: 600; }


/* Scale hints were grey enough to be missed */
.on1-hint { color: #3d4652; font-size: 13px; }

/* ---- forced-choice screen (rebuilt 14 Sep, tester: "the font is very small
   and just visually looks off") ------------------------------------------
   Three things were wrong and they compounded.

   1. The preamble carried the two task DESCRIPTIONS, which a participant has
      to read to answer correctly, and it was set in .on1-small grey at 13px —
      the smallest type on the screen was the part they could not skip.
   2. The buttons were centred by jsPsych while the question above them sat in
      a left-aligned 720px column, so nothing shared a vertical axis.
   3. The buttons were auto-width, so the two options were different sizes —
      which on a forced choice reads as one option being favoured.

   The screen now uses one column for everything, two equal-width options, and
   no type below 13px. */
.on1-fc-lead { font-size: 15px; margin: 0 0 18px; }
.on1-choicehint { display: block; font-size: 13px; color: var(--on1-muted);
                  font-weight: 400; margin-top: 4px; line-height: 1.35; }
.jspsych-btn { white-space: normal; }

/* Only on the forced-choice screens: match the question's column and split it
   evenly. Scoped by :has() so the ordinary Continue button is untouched. */
.jspsych-content:has(.on1-fc-lead) #jspsych-html-button-response-btngroup,
.jspsych-content:has(.on1-fc-lead) .jspsych-html-button-response-btngroup {
  display: flex; gap: 14px; max-width: 720px; margin: 22px auto 0;
  align-items: stretch; justify-content: flex-start;
}
/* Left-aligned label, equal width (Marlo, 14 Sep). Equal width is not
   cosmetic: on a forced choice a wider box reads as the favoured option, so
   the two halves stay identical in size however long their labels are, and
   only the TEXT aligns left. The group starts at the left edge of the same
   720px column the question uses, so the screen has one left margin. */
.jspsych-content:has(.on1-fc-lead) .jspsych-btn {
  flex: 1 1 0; max-width: none; font-size: 15px; line-height: 1.35;
  padding: 14px 18px; text-align: left; border-radius: 8px;
  border: 1px solid var(--on1-line); background: #fff; cursor: pointer;
}
.jspsych-content:has(.on1-fc-lead) .jspsych-btn:hover {
  border-color: var(--on1-accent); background: var(--on1-panel);
}

/* Repeated scale header inside the grid body */
.on1-grepeat th { background: #f4f6f9; border-top: 1px solid var(--on1-line);
                  border-bottom: 1px solid var(--on1-line); padding: 5px 4px; vertical-align: bottom; }
.on1-grepeat .on1-gnum { font-size: 12px; }
.on1-grepeat .on1-ganchor { font-size: 10.5px; height: 3.2em; }

/* Device gate: a live width readout, not a verdict. */
.on1-gate-status { margin-top: 14px; padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.on1-gate-wait   { background: #fdf3e3; border: 1px solid #e0c48a; color: #7a4d06; }
.on1-gate-ok     { background: #eef6f0; border: 1px solid #a9cdb6; color: #2c6e49; }
#jspsych-html-button-response-btngroup button[disabled] { opacity: .45; cursor: not-allowed; }

/* ===== the order form, shared by both tasks (js/fields.js) ==============
 * Verify must read as the same form as execute, so the read-only boxes are
 * styled EXACTLY like the live ones — same border, same padding, same weight,
 * same colour. A greyed-out disabled box would announce "this is a different
 * task", which is the one thing the design cannot afford.
 */
.on1-input[readonly], .on1-input:disabled {
  background: #fff; color: inherit; opacity: 1; -webkit-text-fill-color: inherit;
  cursor: default;
}
.on1-field.on1-missing-field .on1-input { border-color: var(--on1-flag); background: #fdf6f1; }

/* verify row: label, then box + marks on one line, detail underneath */
.on1-vrow { border-bottom: 1px solid var(--on1-line); padding: 8px 0; margin-bottom: 0; }
.on1-vrow:last-of-type { border-bottom: 0; }
.on1-vline { display: flex; align-items: center; gap: 14px; }
/* narrower than execute's full-width box, to leave room for the radios */
.on1-vbox { flex: 0 0 58%; min-width: 0; }
.on1-vmarks { display: flex; gap: 12px; margin-top: 0; white-space: nowrap; }

/* pickup date — a calendar, not typing */
.on1-datewrap { position: relative; }
.on1-datebox { cursor: pointer; background: #fff; }
.on1-cal { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 250px;
  background: #fff; border: 1px solid var(--on1-line); border-radius: 6px; padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.on1-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.on1-calmon { font-size: 13px; font-weight: 600; }
.on1-calnav { border: 1px solid var(--on1-line); background: #fff; border-radius: 4px;
  width: 26px; height: 24px; cursor: pointer; font-size: 11px; line-height: 1; }
.on1-calnav[disabled] { opacity: .3; cursor: not-allowed; }
.on1-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.on1-caldow { font-size: 10px; color: var(--on1-muted); text-align: center; padding-bottom: 2px; }
.on1-calday { border: 0; background: #fff; border-radius: 4px; padding: 5px 0; font-size: 12px;
  cursor: pointer; font-family: inherit; }
.on1-calday:hover:not([disabled]) { background: var(--on1-panel); }
.on1-calday[disabled] { color: #c9ccd2; cursor: default; }

/* pickup time — three dropdowns */
.on1-timewrap { display: flex; align-items: center; gap: 5px; }
.on1-time { width: auto; flex: 0 0 auto; padding: 7px 6px; background: #fff; }
.on1-time-ap { min-width: 62px; }
.on1-timesep { color: var(--on1-muted); }

@media (max-width: 1100px) {
  .on1-vbox { flex: 0 0 50%; }
  .on1-vmarks { gap: 8px; }
}

/* jsPsych centres everything inside .jspsych-content, which the form inherited.
 * Both task panes are left-aligned so the labels sit above the left edge of
 * their boxes and line up with the radios beside them. Applied to BOTH tasks
 * so the two screens stay identical. */
.on1-source, .on1-entry { text-align: left; }
.on1-pane-head { text-align: left; }
.on1-field-label { text-align: left; }
.on1-item-preamble { text-align: left; }


/* Completion screen: the platform return link and the inline fallback code. */
.on1-return { font-weight: 600; }
.on1-code-inline { font-family: ui-monospace, Menlo, Consolas, monospace;
                   background: #f2f2f2; padding: 1px 5px; border-radius: 3px; }

/* A screen that asks about BOTH tasks needs two headed groups, not one heading
   (tester, 14 Sep: the header named the checking task and the last question
   asked about typing). The rule is the visual break between them. */
.on1-rule { border: 0; border-top: 1px solid var(--on1-line); margin: 26px 0 18px; }
.on1-text h2 + p { margin-top: 0; }
.on1-text h2 em { font-style: normal; }
/* The survey Continue button sat flush against the last radio option. */
.jspsych-content:has(.on1-text) .jspsych-survey-html-form input[type=submit],
.jspsych-survey-html-form input[type=submit] { margin-top: 22px; }

/* The one free-text field in the study. */
.on1-why { width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 15px;
           font-family: inherit; line-height: 1.45; border: 1px solid var(--on1-line);
           border-radius: 6px; resize: vertical; }
.on1-why:focus { outline: 2px solid var(--on1-accent); outline-offset: 1px; }

/* ---- the IRB consent form ---------------------------------------------
   Long, and it has to be readable rather than skimmed past. Wider column than
   the task screens, printable, and the one screen that is NOT vertically
   centred — a centred 900-word form puts its own first line off the top. */
.on1-consent { max-width: 780px; text-align: left; }
.on1-consent-head { border-bottom: 1px solid var(--on1-line); padding-bottom: 10px; margin-bottom: 14px; }
.on1-consent-inst { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
                    color: var(--on1-muted); margin: 0 0 4px; }
.on1-consent h2 { margin: 0 0 10px; }
.on1-consent h3 { font-size: 16px; margin: 20px 0 6px; color: var(--on1-accent); }
.on1-consent p { margin: 0 0 10px; }
.on1-consent-lead { color: var(--on1-muted); }
.on1-consent-list { margin: 0 0 10px; padding-left: 20px; }
.on1-consent-print { margin-top: 18px; }
.on1-btn-quiet { background: #fff; color: var(--on1-accent); border: 1px solid var(--on1-line); }
.on1-consent-warn { background: #fdf1ea; border-left: 4px solid var(--on1-flag);
                    padding: 10px 14px; margin: 0 0 16px; }
.jspsych-content-wrapper:has(.on1-consent) { min-height: 0; display: block; }
@media print {
  .jspsych-btn, .on1-consent-print, .on1-consent-warn { display: none !important; }
  .on1-consent { max-width: none; }
}
/* The consent button is the one action on the screen; it should not be the
   smallest thing on it, sitting under a secondary button. */
.jspsych-content:has(.on1-consent) .jspsych-btn {
  background: var(--on1-accent); color: #fff; border: 0; border-radius: 6px;
  padding: 12px 26px; font-size: 16px; cursor: pointer; margin-top: 6px;
}