/* Study chrome, and the Condition B manipulation.
 *
 * Layered on top of the vendored product stylesheet — nothing in oriion.css is
 * edited, so the reproduced canvas stays pixel-faithful to the shipped product.
 *
 * THE MANIPULATION IS EXACTLY TWO THINGS (Iter 3.04):
 *   1. .cond-b .idea-node.is-current  → CURRENT chip + highlight ring, and a
 *      connector from that sketch down to the input.
 *   2. the input's placeholder text (set in JS, not here).
 * Everything else below applies to BOTH conditions and must stay condition-blind.
 * In particular: no rule may change size, opacity, or position by condition —
 * that would confound lineage with legibility. */

.study-body {
  min-height: 100vh;
  margin: 0;
}

/* ---------------- screen shell ---------------- */
.study-screen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}
.study-card {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 30px;
  border-radius: 16px;
  background: var(--surface, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
}
.study-card h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.study-card h2 {
  margin: 22px 0 8px;
  font-size: 17px;
}
.study-card p,
.study-card li {
  line-height: 1.6;
  color: var(--ink-dim, #b9bdca);
}
.study-card .lead {
  font-size: 16px;
  color: var(--ink, #eef1ff);
}
.study-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  flex-wrap: wrap;
}
.study-err {
  color: #fb7185;
  margin-top: 12px;
  min-height: 20px;
}
.study-note {
  font-size: 13px;
  color: var(--ink-dim, #9aa0b4);
}

/* Consent tickbox — a real 20px target, not a hairline default. */
.consent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 20px 0 4px;
  cursor: pointer;
}
.consent-row input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* ---------------- progress ---------------- */
/* Progress is feedback about PROGRESS, never about linking. Identical in both
   conditions — eight screens with no feedback at all reads as broken. */
.study-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto 16px;
  font-size: 13px;
  color: var(--ink-dim, #9aa0b4);
  letter-spacing: 0.04em;
}
.study-progress .bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.study-progress .bar i {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.42);
}

/* ---------------- trial layout ---------------- */
.trial-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.trial-pane .eyebrow {
  margin-bottom: 8px;
}
/* The target pane mirrors the board pane's box, and the target sketch is capped
   to the same 120px art box the board's nodes use, so the two sketches are the
   same size on screen. This is a legibility control, not a manipulation — an
   uncapped target would render ~700px tall next to a 120px board sketch. */
.target-frame {
  border-radius: 14px;
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.1));
  background: rgba(255, 255, 255, 0.03);
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.target-frame svg {
  width: 173px; /* = .idea-node 195px minus its 11px padding each side */
  height: 120px; /* = .idea-shape height */
  max-width: 100%;
}

/* The reproduced canvas. Fixed height so the board is identical across screens
   and conditions regardless of how many sketches sit on it. The product's
   .canvas-panel is height:44vh; pin it here so the board does not resize with
   the viewport — stimulus geometry must not vary between participants. */
.study-board {
  height: auto;
  min-height: 0;
  padding: 0;
}
.study-board .idea-canvas {
  position: relative;
  min-height: 400px;
  height: 400px;
  overflow: hidden;
  padding: 0;
}
/* The shipped toolbar is reproduced as chrome. Its input is inert here (the live
   input is below the board) — same treatment as the disabled chain/delete
   buttons, and identical in both conditions. */
.study-board .toolbar-input input[disabled] {
  cursor: default;
}

/* ---------------- teammate dialogue ---------------- */
.dialogue {
  margin: 20px auto 0;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dialogue .line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: var(--ink-dim, #c2c7d6);
}
.dialogue .who {
  font-weight: 600;
  color: var(--ink, #eef1ff);
  min-width: 68px;
}

/* ---------------- the input ---------------- */
/* Width is fixed in pixels and identical in both conditions — the pre-registered
   pixel comparison checks exactly this. Do not make it condition-dependent. */
.reply-block {
  max-width: 1180px;
  margin: 22px auto 0;
  position: relative;
}
.reply-label {
  font-size: 15px;
  margin-bottom: 10px;
  color: var(--ink, #eef1ff);
}
.reply-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.reply-row input {
  width: 640px;
  max-width: 100%;
  padding: 13px 15px;
  font: inherit;
  font-size: 15px;
  color: var(--ink, #eef1ff);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
}
.reply-row input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.42);
}

/* ================= CONDITION B ONLY ==================================== */
/* Addition 1a — the CURRENT chip. Reads as a label, never an instruction: the
   word "building" or any imperative here would be a hypothesis cue printed on
   every screen for a study-literate population. */
/* The chip element ships in BOTH conditions' markup and is revealed here only.
   It sits INSIDE the card (top-right, clear of the caption at top-left): placing
   it outside would need overflow:visible on the treatment node alone, and the
   geometry of the two conditions must stay identical. */
.current-chip {
  display: none;
}
.cond-b .idea-node.is-current .current-chip {
  display: block;
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 4;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.09em;
  color: #0e1017;
  background: #e8ebf5;
}
/* Addition 1b — the highlight ring. Ring only: no scale, no opacity, no
   z-order change. Enlarging the live sketch or dimming the others would
   confound lineage with legibility. */
.cond-b .idea-node.is-current {
  box-shadow:
    0 0 0 2px #e8ebf5,
    0 0 0 7px rgba(232, 235, 245, 0.16);
}
/* Addition 1c — the connector leading the eye down into the input. A real
   element, in both conditions' markup, revealed here only. Absolutely
   positioned so it adds no vertical space: the input must sit at the same
   place in both conditions. */
.input-connector {
  display: none;
}
.cond-b .input-connector {
  display: block;
  position: absolute;
  left: 16px;
  top: -30px;
  width: 2px;
  height: 58px;
  z-index: 3;
  border-radius: 2px;
  background: linear-gradient(rgba(232, 235, 245, 0), rgba(232, 235, 245, 0.75));
}
.cond-b .input-connector::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(232, 235, 245, 0.75);
  border-bottom: 2px solid rgba(232, 235, 245, 0.75);
  transform: rotate(45deg);
}

/* ---------------- mobile block ---------------- */
.device-block {
  max-width: 560px;
  margin: 12vh auto;
  text-align: center;
  padding: 0 22px;
}

@media (max-width: 900px) {
  .trial-panes {
    grid-template-columns: 1fr;
  }
}

/* Debrief: the two boards shown side by side after the fact. */
.debrief-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (max-width: 700px) {
  .debrief-compare {
    grid-template-columns: 1fr;
  }
}