/* The participant's interface: an everyday chat application, light only
   (the owner, 2026-09-18). It carries no name, colour, mark or typeface of
   either tool being compared. */
:root{
  color-scheme: light;
  --bg:#f7f7f8; --surface:#ffffff; --ink:#1f2023; --soft:#6e7079; --rule:#e6e6e8;
  --chip:#f4f4f5; --you:#eff0f2; --youink:#3a3c42;
  --accent:#2f7d6d; --accent-soft:#e7f1ee; --divider:#d4d4d9; --bad:#b91c1c;
  --flag:#8a5a12; --flag-soft:#fdf3e1;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:14.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em}
h1{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:0}
h2{font-size:1.05rem;font-weight:600;margin:0}
p{margin:0}
a{color:var(--accent)}
/* the header is one full-width bar at the top of every page (owner, 2026-09-30):
   the study's name and step on the left, the contact and the ways to leave on
   the right. Each page's title sits under it, at the top of the page body. */
.head{background:var(--surface);border-bottom:1px solid var(--rule);padding:7px 22px;display:grid;gap:8px;position:sticky;top:0;z-index:5}
/* one line on a computer: the right side keeps its size, and on a narrower
   window the study's name, then the step's name, are cut short with "…" */
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:0}
.bar-side{display:flex;align-items:center;gap:12px;min-width:0}
.bar-side:first-child{flex:1 1 auto}
.bar-side:last-child{flex:none}
.studyname{font-size:.8rem;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:60px;flex:0 3 auto}
.contact{font-size:.8rem;white-space:nowrap}
/* in the bar the step line is ordinary text, so the longest step name fits on the line */
.head .stepline{text-transform:none;letter-spacing:0;font-size:.8rem;white-space:nowrap;gap:8px;flex-wrap:nowrap;min-width:0;flex:0 1 auto}
.head .stepline > span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.head .step-dots{flex:none}
.head .step-dots i{width:14px;height:14px}
.page-head{max-width:960px;margin:0 auto;padding:24px 22px 0;display:grid;gap:5px}
.page-head p{color:var(--soft);max-width:82ch}
.page-head p .head-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:10px;max-width:1100px}
.page-head p .head-cols > span{display:grid;gap:3px;font-size:.88rem}
.page-head p .head-cols b{color:var(--ink)}
@media (max-width:900px){.page-head p .head-cols{grid-template-columns:1fr}}
/* the four conversations take the full width, and their title with them */
body:has(#step-runs:not([hidden])):has(#step-after[hidden]) .page-head{max-width:1560px;padding:24px 48px 0}
body:has(#step-runs:not([hidden])):has(#step-after[hidden]) .page-head p{max-width:none}
/* on a phone the bar is two lines: the study's name, then the step and the
   controls. The address is in the link, the step's name in the page title. */
@media (max-width:700px){
  .head{padding:6px 12px}
  .bar{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);align-items:center;gap:4px 8px}
  .bar-side{display:contents}
  .studyname{grid-column:1 / -1;font-size:.74rem}
  .contact-address,.head .step-name,.head .step-dots,.info-words{display:none}
  .contact{font-size:.76rem}
  .withdraw-open{font-size:.7rem;padding:4px 8px}
  .page-head{padding:18px 16px 0}
}
/* every screen is one centred column (owner, 2026-09-29), apart from the four
   conversations side by side, which keep the full width */
.body{padding:18px 22px 40px;display:grid;gap:14px;max-width:960px;margin:0 auto}
.body.wide{max-width:1560px;padding:20px 48px 40px}
@media (max-width:700px){.body.wide{padding:14px}body:has(#step-runs:not([hidden])) .page-head{padding:18px 14px 0}}
/* what every agent shares (the session before, the start message, how they
   differed) is one centred reading column between the four (owner, 2026-09-30) */
#step-runs .summary-block,.cols .start-row,.cols .diff-row{margin-inline:auto;width:min(920px,100%);box-sizing:border-box}
/* the send bar is sticky at the bottom, so the last row needs room behind it */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 16px;display:grid;gap:10px}
.btn{background:var(--accent);color:#fff;border:0;border-radius:999px;padding:9px 18px;font:600 .9rem/1 inherit;cursor:pointer;justify-self:start}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.quiet{background:var(--surface);color:var(--accent);border:1px solid var(--accent)}
/* a link drawn as a button is a box, so its padding takes room in the line */
a.btn{text-decoration:none;display:inline-block}
.muted{color:var(--soft)}
.small{font-size:.86rem}
.steps{margin:0;padding-left:1.25em;display:grid;gap:7px}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{padding:6px 14px;border-radius:999px;border:1px solid var(--rule);color:var(--soft);font:inherit;font-size:.88rem;background:var(--surface);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.progress{height:8px;background:var(--chip);border-radius:99px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}
.rows{display:grid;gap:8px}
.row{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:22px minmax(0,1fr) fit-content(40%);gap:12px;align-items:start}
.row .req{font-weight:500;overflow-wrap:anywhere}
@media (max-width:600px){.row{grid-template-columns:22px minmax(0,1fr)}.row>:nth-child(3){grid-column:2}}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.row .meta{color:var(--soft);font-size:.84rem;display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}
.found{margin-top:8px}
.found p{margin:0 0 4px}
.found-list{margin:0;padding-left:18px;overflow-wrap:anywhere}
.found-list .orig{font-family:var(--mono,ui-monospace,monospace)}
#reader-body mark{background:var(--flag-soft);color:inherit;border-radius:3px;padding:0 2px}
.stage{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule)}
.stage:last-child{border-bottom:0}
.linkbox{font-family:ui-monospace,Menlo,monospace;font-size:.84rem;background:var(--chip);border-radius:10px;padding:9px 12px;overflow-x:auto;white-space:nowrap}
.check{display:flex;gap:10px;align-items:flex-start}
textarea{width:100%;min-height:52px;font:inherit;font-size:.9rem;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--surface);color:var(--ink);resize:vertical}
fieldset{border:1px solid var(--rule);border-radius:14px;padding:13px 15px;margin:0;display:grid;gap:9px;background:var(--surface)}
legend{font-weight:600;padding:0 5px;font-size:.93rem}
.scale5{display:block}
.question{display:grid;gap:8px;padding-top:6px}

/* reading what would be sent, before sending it */
dialog#reader{width:min(900px,92vw);max-height:86vh;border:1px solid var(--rule);border-radius:16px;
  padding:0;background:var(--surface);color:var(--ink);overflow:hidden}
dialog#reader::backdrop{background:rgba(20,20,25,.45)}
.reader-head{position:sticky;top:0;background:var(--surface);border-bottom:1px solid var(--rule);
  padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
#reader-note{padding:10px 16px 0}
#reader-body{padding:12px 16px 18px;overflow-y:auto;max-height:70vh;display:grid;gap:10px}
.said-row{border:1px solid var(--rule);border-radius:12px;padding:9px 11px;display:grid;gap:5px}
.said-row.at-point{border-color:var(--accent);background:var(--accent-soft)}
.said-row .who{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.said-row pre{margin:0;font:400 .82rem/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.said-row .flag{font-size:.76rem;color:var(--flag);background:var(--flag-soft);border-radius:999px;padding:1px 9px;justify-self:start}

/* the four conversations in rows (owner, 2026-09-30): one grid, so each row of
   four cells is as tall as its tallest cell and the next row starts below it.
   A band (the start message, a round's label, how the agents differed) spans
   all four columns. On a phone the cells stack, each naming its agent. */
.scroll{overflow-x:auto}
.cols{display:grid;grid-template-columns:repeat(var(--columns,4),minmax(230px,1fr));gap:10px 28px;min-width:1040px}
.cols .band{grid-column:1 / -1;display:grid;gap:6px}
.cols .cell{display:grid;gap:9px;align-content:start;min-width:0;padding:12px;border-radius:14px}
.cols .agent-cell,.cols .short-cell{background:var(--surface);border:1px solid var(--rule)}
.cols .reply-cell{padding-top:0}
.cols .cell.empty{background:none;border:0;padding:0}
/* a thin line between the columns, down the whole page, so each column reads
   as one agent's conversation (owner, 2026-09-30, in place of a colour per
   column and names that stayed in view); the shared rows sit on top of it.
   The lines fall in the middle of the 28px gaps between four equal columns. */
.cols{--line:linear-gradient(var(--divider),var(--divider));background-image:var(--line),var(--line),var(--line);
  background-repeat:no-repeat;background-size:3px 100%;
  background-position:calc((100% - 84px) / 4 + 12.5px) 0,calc((100% - 84px) / 2 + 40.5px) 0,calc((100% - 84px) * 3 / 4 + 68.5px) 0}
/* three agents since 2026-10-01: two lines, in the middle of the two 28px gaps */
.cols[data-columns="3"]{background-image:var(--line),var(--line);
  background-position:calc((100% - 56px) / 3 + 12.5px) 0,calc((100% - 56px) * 2 / 3 + 40.5px) 0}
/* each cell names its agent, so the row of names above the columns is shown
   only after the answers are sent, when it carries each agent's tool and model */
.cols .head-cell{padding:8px 12px;border-bottom:1px solid var(--rule)}
.cols .head-cell:not(:has(.reveal-line)){display:none}
/* reading one step at a time: parts of later steps are not shown yet */
.later{display:none !important}
#columns [data-step]{scroll-margin-top:110px}
/* The note sits above the button it explains (owner, 2026-10-02). */
.next-row{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0 10px}
.next-row .btn{justify-self:center;padding:12px 26px;font-size:.95rem}
.diff-row p{margin:0}
.band-label{font-size:.78rem;font-weight:600;color:var(--soft)}
.start-row,.went-on-row{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px}
.start-row .you{margin-left:0;max-width:none}
.round-row{border-top:1px solid var(--rule);padding-top:12px;margin-top:6px}
.round-row .band-label{font-size:.9rem;color:var(--ink)}
.diff-row{background:var(--accent-soft);border-radius:14px;padding:10px 14px;font-size:.9rem}
.diff-row ul,.turn-lines{margin:0;padding-left:1.2em;display:grid;gap:3px}
.short-row{border-top:1px solid var(--rule);padding-top:14px;margin-top:6px}
.turn-lines{font-size:.9rem}
.agenttag{font-size:.8rem;font-weight:700;color:var(--agent,var(--accent))}
/* a colour for each agent's name (owner, 2026-09-30), by column; the columns'
   order is drawn at random per visit, so a colour says nothing about an agent */
.agenttag[data-col="0"]{--agent:#2563eb}
.agenttag[data-col="1"]{--agent:#c2410c}
.agenttag[data-col="2"]{--agent:#7c3aed}
.agenttag[data-col="3"]{--agent:#0f766e}
.agenttag .tagnote{font-weight:500;color:var(--soft)}
/* the reply names its agent only where the columns are stacked */
.to-agent{display:none}
@media (max-width:700px){
  .cols{grid-template-columns:1fr;min-width:0;background-image:none}
  .cols .head-cell,.cols .cell.empty{display:none}
  .to-agent{display:inline}
  .cols .reply-cell{padding:0 0 6px}
}
.rate-q{font-weight:600;font-size:.9rem}
.rate .item{display:grid;gap:6px}
.rate .item p{font-size:.88rem;line-height:1.4}
/* the agreement scale: five points on a line, each point's words under it,
   the answer beneath. The handle is 18px wide, so its centre at each stop is
   9px + (width - 18px) * stop/4. The slider is (80% + 18px) wide with a
   (10% - 9px) margin on each side, which puts the five stops at the centres
   of five equal columns: 10%, 30%, 50%, 70% and 90% of the scale's width.
   The line and the five points are the slider's own background, with no
   filled part: a browser's own slider fills the track up to the handle, so an
   unanswered one looked answered. */
.agree{display:grid;gap:4px;max-width:520px}
.agree-slider{-webkit-appearance:none;appearance:none;width:calc(80% + 18px);height:22px;margin:4px calc(10% - 9px) 0;cursor:pointer;
  --stop:radial-gradient(circle,var(--soft) 0 4px,transparent 4.5px);
  background:var(--stop) 0% 50%/18px 18px no-repeat,var(--stop) 25% 50%/18px 18px no-repeat,var(--stop) 50% 50%/18px 18px no-repeat,
    var(--stop) 75% 50%/18px 18px no-repeat,var(--stop) 100% 50%/18px 18px no-repeat,
    linear-gradient(var(--rule),var(--rule)) 50% 50%/calc(100% - 18px) 2px no-repeat}
.agree-slider::-webkit-slider-runnable-track{height:6px;background:transparent;border:0}
.agree-slider::-moz-range-track{height:6px;background:transparent;border:0}
.agree-slider::-moz-range-progress{background:transparent}
.agree-slider::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.agree-slider::-moz-range-thumb{box-sizing:border-box;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.agree-slider.untouched::-webkit-slider-thumb{opacity:0}
.agree-slider.untouched::-moz-range-thumb{opacity:0}
.agree-ticks{display:grid;grid-template-columns:repeat(5,1fr);font-size:.72rem;color:var(--soft);line-height:1.2}
.agree-ticks span{text-align:center}
.agree-words{color:var(--accent);font-weight:600;font-size:.8rem}
.summary-block #recap-again{white-space:pre-wrap}
.runs-layout{display:block}
.rank-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.rank-side{display:grid;gap:10px}
@media (max-width:900px){.rank-grid{grid-template-columns:1fr}}
.colbar{display:grid;gap:4px;padding:0 4px}
.colbar .name{font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:7px}
.colbar .dot{width:9px;height:9px;border-radius:50%;background:var(--chip);border:1px solid var(--rule)}
.seglabel{font-size:.74rem;color:var(--soft)}
.seg{display:flex;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.seg button{flex:1;text-align:center;font:inherit;font-size:.82rem;padding:5px 0;cursor:pointer;border:0;border-left:1px solid var(--rule);color:var(--soft);background:var(--surface)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:600}
summary.did{list-style:none}
summary.did::-webkit-details-marker{display:none}
summary.did::marker{content:""}
.did{background:var(--chip);border-radius:10px;padding:5px 9px;font:400 .78rem/1.45 ui-monospace,Menlo,monospace;color:var(--soft);cursor:pointer;border:0;text-align:left;width:100%;display:flex;gap:7px;align-items:baseline}
.did .chev{font-size:.64rem;opacity:.65;flex:none}
/* a real command runs long: it wraps to two lines and stops, because the whole
   of it is a click away and four columns of shell lines cannot be read */
.did .what{min-width:0;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.did .x{color:var(--bad);margin-left:auto;font-weight:500;flex:none}
.did-output{margin:0;padding:8px 10px;background:var(--chip);border-radius:10px;font:400 .76rem/1.5 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-x:auto;max-height:340px}
.said{font-size:.92rem;white-space:pre-wrap}
.said code{font:400 .84em ui-monospace,Menlo,monospace;background:var(--chip);border-radius:4px;padding:0 3px}
.said .md-code{margin:4px 0;padding:8px 10px;background:var(--chip);border-radius:8px;font:400 .78rem/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.said.clamped{max-height:10.5em;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 30%)}
.earlier-toggle,.more{justify-self:start;background:var(--chip);border:0;border-radius:999px;color:var(--soft);font:inherit;font-size:.78rem;padding:3px 11px;cursor:pointer;text-decoration:none}
.earlier-toggle:hover,.more:hover{color:var(--ink)}
.earlier{display:grid;gap:9px;border-left:2px solid var(--rule);padding-left:8px}
.done{color:var(--accent);font-weight:600}
.bottombar{position:sticky;bottom:0;z-index:6;margin:0 -14px -14px;background:var(--surface);border-top:1px solid var(--rule);
  padding:10px 14px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.bottombar .count{font-size:.85rem;color:var(--soft)}
/* the summary stays beside the conversations while they are read (owner, 2026-09-29) */
.runs-main{display:grid;gap:14px;min-width:0}
.field{display:grid;gap:4px}
.rank-pool{display:flex;gap:8px;flex-wrap:wrap;min-height:34px;align-items:center}
.rank-chip{border:1px dashed var(--accent);color:var(--accent);background:var(--surface);border-radius:999px;padding:5px 14px;font:inherit;font-weight:600;cursor:pointer}
.rank-item.dragging{opacity:.5}
.rank-pos{width:1.6em;height:1.6em;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.8rem}
.rank-name{font-weight:600;flex:1}
.rank-tools button{border:1px solid var(--rule);background:var(--bg);border-radius:7px;padding:1px 8px;font:inherit;cursor:pointer}
.rank-tools button[disabled]{opacity:.35;cursor:default}
.reveal-table-wrap{overflow-x:auto}
.reveal-table{border-collapse:collapse;width:100%;font-size:.88rem}
.reveal-table th,.reveal-table td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--rule)}
.reveal-table th{color:var(--soft);font-weight:600;font-size:.8rem}
.youtag{font-size:.7rem;color:var(--soft);text-align:right;margin-bottom:-5px}
.you{background:var(--you);color:var(--youink);border-radius:16px;padding:9px 12px;font-size:.92rem;margin-left:auto;max-width:92%;white-space:pre-wrap}
.ended{font-size:.85rem;color:var(--soft);font-style:italic}
.rate{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:12px;display:grid;gap:9px;font-size:.86rem}
.rate .q{color:var(--soft)}
.send{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sendnote{color:var(--soft);font-size:.84rem}
.reveal-line{font-size:.82rem;line-height:1.55;color:var(--soft)}
.reveal-line b{color:var(--ink);font-weight:600}
.widen{background:var(--flag-soft);color:var(--flag);border-radius:10px;padding:9px 12px;font-size:.88rem}
[hidden]{display:none !important}
/* one outline for everything a keyboard reaches: buttons, links, inputs, summary, select */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the developer's own controls; never shown to a participant */
.admin{position:static;background:#20232a;color:#e9eaee;padding:7px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.8rem;z-index:20}
.admin b{font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem;color:#9aa0ab}
.admin button{background:#2f333c;color:inherit;border:1px solid #3c414b;border-radius:7px;padding:3px 9px;font:inherit;cursor:pointer}
.admin input{background:#2f333c;color:inherit;border:1px solid #3c414b;border-radius:7px;padding:3px 7px;font:inherit;min-width:min(280px,100%)}
.admin select{max-width:100%}
.admin-agent{display:block;background:#20232a;color:#e9eaee;border-radius:8px;padding:5px 8px;font-size:.74rem;line-height:1.45}
.admin-agent b{color:#fff}
.rank-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rank-slot{display:grid;gap:4px;justify-items:start;border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--surface);min-height:74px}
.rank-slot.empty{border-style:dashed;background:var(--bg)}
.rank-item{cursor:grab}
.rank-slot .rank-pos{width:auto;height:auto;border-radius:6px;padding:0 6px;font-size:.72rem}
.rank-slot.empty .rank-pos{background:var(--chip);color:var(--soft)}
.realism-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#realism .item{display:grid;gap:6px}
@media (max-width:900px){.realism-grid{grid-template-columns:1fr}}
#columns{margin-bottom:4px}
.full-turn{display:grid;gap:9px;border-top:1px dashed var(--rule);padding-top:9px}
.fields{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:.88rem}
.fields dt{color:var(--soft);font-weight:600;font-size:.8rem;padding-top:1px}
.fields dd{margin:0}
.fields ul{margin:0;padding-left:1.1em}
.summary-block .fields{font-size:.92rem}

/* the step line in the header: which of the five steps this is */
.stepline{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.74rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.step-dots{display:flex;gap:5px}
.step-dots i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;font:700 .6rem/1 inherit;font-style:normal;color:#fff}
.step-dots i.done{background:var(--accent);border-color:var(--accent)}
.step-dots i.now{border-color:var(--accent);border-width:2px}

/* what we collect, on the "You can take part" page: short titled items, two columns */
.collect-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.collect-grid{grid-template-columns:1fr}}
.collect-item{padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--rule)}
.collect-title{font-weight:600;font-size:.9rem;margin-bottom:3px}
.collect-desc{font-size:.9rem;line-height:1.5}

/* choosing sessions */
.choose-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.bad{color:var(--bad)}

/* sending: one row per session with its share of the upload */
.upload-row{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:10px 14px;display:grid;gap:6px}
.upload-row .req{font-weight:500;overflow-wrap:anywhere}
.upload-row .meta{color:var(--soft);font-size:.84rem;display:flex;gap:10px;flex-wrap:wrap}
.progress.thin{height:4px}
.wide-btn{min-width:min(240px,100%);justify-self:start}

/* the waiting page: a mark beside each stage, and the stopped-visit card */
.stage{align-items:center}
.stage b{flex:1}
.stage-mark{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center;font-size:.66rem;font-weight:700;color:#fff}
.stage-mark.done{background:var(--accent);border-color:var(--accent)}
.stage-mark.spin{border:2px solid var(--rule);border-top-color:var(--accent);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stage-mark.spin{animation:none;border-color:var(--accent)}}
/* the running stage: a bar that moves without filling, as no share done is known */
.stage{flex-wrap:wrap}
.progress-line{flex-basis:100%;display:grid;gap:6px}
.progress-line p{margin:0;font-size:.88rem}
.fill{height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.fill span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .6s}
.busy{flex-basis:100%;height:6px;border-radius:3px;background:var(--rule);overflow:hidden;position:relative}
.busy span{position:absolute;inset:0 auto 0 0;width:30%;border-radius:3px;background:var(--accent);animation:busy 1.6s ease-in-out infinite}
@keyframes busy{from{left:-30%}to{left:100%}}
@media (prefers-reduced-motion:reduce){.busy span{animation:none;width:100%;opacity:.5}}
.stopped{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:14px}
.stopped .mark{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.1rem;background:var(--chip);color:var(--soft)}
.stopped .mark.ok{background:var(--accent);color:#fff}
.stopped-text{display:grid;gap:10px}
.copy-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* withdrawing: the button on the right of the header bar, and its confirmation under the bar */
.withdraw-open{font-size:.78rem;padding:5px 12px;white-space:nowrap}
dialog.withdraw-confirm{background:var(--surface);width:min(640px,92vw);max-height:86vh;overflow-y:auto;border-radius:16px;padding:22px 26px}
/* .confirm's display:grid would otherwise show the closed modal */
dialog.withdraw-confirm:not([open]){display:none}
.withdraw-confirm::backdrop{background:rgba(20,20,25,.45)}
.withdraw-confirm h2{margin-top:0}
.withdraw-confirm p,.withdraw-confirm .steps{color:var(--ink)}
.btn.danger{background:var(--bad);color:#fff}
.btn.quiet.danger{background:var(--surface);color:var(--bad);border-color:var(--bad)}
.confirm{border:1px solid var(--bad);border-radius:12px;padding:10px 12px;display:grid;gap:8px}
.confirm-actions{display:flex;gap:10px;flex-wrap:wrap}
#keep-link{overflow-wrap:anywhere}

/* about you: the six background questions */
.survey{display:grid;gap:14px}
.survey .check{gap:8px;cursor:pointer}
.survey .check input{margin:4px 0 0;accent-color:var(--accent)}

/* choosing: the sessions grouped by the folder each was recorded in */
.repo{font-size:.8rem;color:var(--soft);margin-top:6px;overflow-wrap:anywhere}
.path-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.path-row code{font-size:.95rem;padding:4px 8px}
.keys{font-size:1.02rem;padding:10px 12px;background:var(--chip, #f4f4f5);border-radius:10px}
.key-step{white-space:nowrap}
/* a completion code: the one string a participant needs to be paid */
.code-big{font:700 1.5rem/1.2 ui-monospace,Menlo,monospace;letter-spacing:.04em;overflow-wrap:anywhere}
.assure{background:#fdecec;border:2px solid #b91c1c;color:#7f1414;border-radius:12px;padding:12px 16px;font-size:1rem}
.assure b{color:#7f1414}
#study-intro{display:grid;gap:14px}

/* shown only on a narrow screen or a touch screen: the study needs a computer */
.only-small{display:none}
/* there the study can't be done, so the folder controls are not shown */
@media (max-width:700px),(pointer:coarse){.only-small{display:grid}#folder-card,#folder-note,#start-check{display:none !important}}
.final-note{font-size:.88rem;font-weight:600}
#back-to-choose{justify-self:start}
/* a way back to Prolific: the button, the line under it and the code, spaced (shared.js) */
.return-block{display:grid;gap:10px}
/* the payment part of an ending card, set apart from the line above it */
.pay-block{display:grid;gap:10px;border-top:1px solid var(--rule);padding-top:12px}
/* The tick is drawn, not typed: the glyph sat low and left in its circle. */
.step-dots i.done::after{content:"";width:3.5px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
/* the first page: plain sections under one another, split by a rule (owner, 2026-09-30) */
.landing{display:grid}
.landing section{display:grid;gap:10px;padding:18px 0;border-top:1px solid var(--rule)}
.landing section:first-child{border-top:0;padding-top:4px}
.big-btn{font-size:1rem;padding:12px 24px}

/* the line between the conversations and the questions about them (owner, 2026-10-01) */
.section-rule{border:0;border-top:2px solid var(--rule);margin:18px 0 4px}
.char-count{font-weight:400;color:var(--soft)}
/* the column lines stop behind this heading, as they do behind the shared rows */
.cols .short-row{background:var(--bg,#f7f7f8);padding-block:6px}
.compare-lines{margin:0;padding-left:1.2em;display:grid;gap:4px}
.turn-lines .who{font-weight:600}

/* what would be sent, as a conversation (owner, 2026-10-01) */
#reader-body pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:inherit;font-size:.9rem}
.reader-you{background:var(--you);color:var(--youink);border-radius:14px;padding:9px 12px;margin:10px 0 10px 18%;display:grid;gap:4px}
.reader-you.at-point{outline:2px solid var(--accent)}
.at-point-note{font-weight:600}
.reader-agent{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:9px 12px;margin:10px 18% 10px 0;display:grid;gap:4px}
.reader-fold{margin:4px 0;padding-left:8px;border-left:2px solid var(--rule)}
.reader-fold pre{font:400 .8rem/1.5 ui-monospace,Menlo,monospace!important}

/* the instructions at the top of the conversations, centred (owner, 2026-10-01) */
#step-runs .how-to-read{margin-inline:auto;width:min(920px,100%);box-sizing:border-box;border-color:var(--accent)}
/* each part fades in when Next opens it (owner, 2026-10-01), never typed out */
@keyframes fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#columns [data-step]:not(.later){animation:fade-in .5s ease}
@media (prefers-reduced-motion:reduce){#columns [data-step]:not(.later){animation:none}}

/* agent colours on chips: the round choices and the ranking (owner, 2026-10-01) */
.agent-chip[data-col="0"]{--agent:#2563eb}
.agent-chip[data-col="1"]{--agent:#c2410c}
.agent-chip[data-col="2"]{--agent:#7c3aed}
.agent-chip[data-col="3"]{--agent:#0f766e}
.choice-chips{display:flex;flex-wrap:wrap;gap:8px}
.choice-chips button{font:600 .88rem/1 inherit;padding:8px 14px;border-radius:999px;cursor:pointer;background:var(--surface);color:var(--agent,var(--soft));border:2px solid var(--agent,var(--rule))}
.choice-chips button.chosen{background:var(--agent,var(--soft));color:#fff}
.choice-chips button:disabled{cursor:default}
.rank-chip.agent-chip{color:var(--agent);border-color:var(--agent)}
.rank-name.agent-chip{color:var(--agent);font-weight:700}
/* the round's question is its own card, only as wide as it needs (owner, 2026-10-02) */
.cols .choice-row{justify-self:center;width:fit-content;max-width:min(920px,100%);box-sizing:border-box;background:var(--surface);border:1px solid var(--rule);padding:12px 18px;border-radius:14px;text-align:center}
.cols .choice-row .choose-btn{justify-self:center}

/* the cards after the conversations share the instructions' centred width (owner, 2026-10-02) */
#step-runs #realism,#step-runs #ranking,#step-runs #reveal-card,#step-runs #useful-card,#step-runs #done-card,#step-runs #after-columns{margin-inline:auto;width:min(920px,100%);box-sizing:border-box}

/* the round's choice in each agent's column (owner, 2026-10-02) */
.choose-btn{font:600 .84rem/1.2 inherit;padding:7px 12px;border-radius:999px;cursor:pointer;background:var(--surface);color:var(--agent,var(--soft));border:2px solid var(--agent,var(--rule));justify-self:start}
.choose-btn.chosen{background:var(--agent,var(--soft));color:#fff}
.choose-btn.none-chip.chosen{background:var(--soft);border-color:var(--soft)}
.choose-btn:disabled{cursor:default}
.cols .cell.chosen-cell{outline:3px solid var(--agent-line,var(--accent));outline-offset:2px}
.cols .cell.chosen-cell[data-col="0"]{--agent-line:#2563eb}
.cols .cell.chosen-cell[data-col="1"]{--agent-line:#c2410c}
.cols .cell.chosen-cell[data-col="2"]{--agent-line:#7c3aed}
.choice-done{font-weight:600;color:var(--accent)}

/* The prediction and the marks under each simulated-you reply (owner, 2026-10-02). */
.cols .predict-row{background:var(--surface);border:1px solid var(--rule);padding:12px 18px;border-radius:14px}
.marks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.mark-btn{font:500 .8rem/1.2 inherit;padding:5px 10px;border-radius:999px;cursor:pointer;background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
.mark-btn.chosen{background:var(--accent);border-color:var(--accent);color:#fff}
.mark-btn:disabled{cursor:default}

/* The two intro boxes, and round 1's two panels, side by side on a wide screen (owner, 2026-10-03). */
.intro-pair{display:grid;gap:14px;width:min(1200px,100%);margin-inline:auto;align-items:start}
#step-runs .intro-pair .how-to-read,#step-runs .intro-pair .summary-block{width:auto;margin:0}
.cols .round1-pair{display:grid;gap:14px;width:min(1200px,100%);margin-inline:auto;align-items:start}
.cols .round1-pair > div{display:grid;gap:14px;min-width:0}
@media (min-width:1000px){.intro-pair,.cols .round1-pair{grid-template-columns:1fr 1fr}}