:root { --ink: #1c1c1a; --muted: #6b6a66; --line: #e2e1dc; --accent: #2a78d6; --bg: #fbfaf7; --card: #ffffff; --warn: #b3261e; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { font-weight: 600; }
.cp-logo { height: 46px; width: auto; display: block; margin: 0 auto 8px; opacity: .9; } .brand .sub { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }
nav a { margin-right: 14px; color: var(--accent); text-decoration: none; } nav a.active { font-weight: 600; }
nav #who { color: var(--muted); margin: 0 12px; font-size: 14px; }
main { max-width: 900px; margin: 0 auto; padding: 24px 20px 60px; }
.screen h1 { font-size: 22px; margin: 0 0 12px; } .screen h2 { font-size: 17px; margin: 28px 0 8px; }
label { display: block; margin: 10px 0 4px; }
input[type=email], input[type=password], input[type=number], textarea, select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); width: 100%; max-width: 480px; }
textarea { min-height: 70px; }
button { font: inherit; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: white; cursor: pointer; }
button.secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
button.link { background: none; border: none; color: var(--accent); padding: 0; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: default; }
.muted { color: var(--muted); font-size: 14px; } .error { color: var(--warn); }
.toolbar { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar label { display: inline-flex; gap: 8px; align-items: center; margin: 0; } .toolbar select { width: auto; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.rubric { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; max-height: 40vh; overflow: auto; font-size: 14px; white-space: pre-wrap; }
article#item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.item-text { white-space: pre-wrap; font-size: 17px; line-height: 1.6; margin: 6px 0 12px; }
.context { background: #f3f2ee; border-radius: 6px; padding: 10px 12px; color: var(--muted); font-size: 14px; white-space: pre-wrap; margin-bottom: 12px; }
fieldset { border: none; padding: 0; margin: 14px 0; } legend { font-weight: 600; margin-bottom: 4px; }
fieldset .opt { display: inline-block; margin: 2px 14px 2px 0; } fieldset .opt input { margin-right: 4px; }
fieldset.hidden-field { display: none; } .req::after { content: " *"; color: var(--warn); }
.actions { display: flex; gap: 12px; margin-top: 10px; }
.notice { background: #eef5ff; border: 1px solid #cfe0fb; border-radius: 8px; padding: 14px 16px; }
table { border-collapse: collapse; width: 100%; background: var(--card); font-size: 14px; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.revisit { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 10px 0; background: var(--card); }
.revisit .snippet { color: var(--muted); font-size: 14px; }
footer { text-align: center; padding: 28px 20px 36px; }
.brand-link { color: inherit; text-decoration: none; }
.secondary-link { color: var(--accent); text-decoration: none; margin-left: auto; font-size: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin: 10px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.card h3 { margin: 0 0 4px; font-size: 17px; } .card .meta { color: var(--muted); font-size: 14px; }
.instructions { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; margin: 12px 0 16px; white-space: pre-wrap; font-size: 15px; line-height: 1.55; max-height: 60vh; overflow: auto; }
.instructions h2 { font-size: 16px; margin: 14px 0 4px; }
.feedback { background: #eef5ff; border: 1px solid #cfe0fb; border-radius: 8px; padding: 12px 14px; margin: 12px 0; white-space: pre-wrap; }
.feedback.miss { background: #fff4ee; border-color: #f4cdb8; }
article#training-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }

.tabs { display: flex; gap: 6px; margin: 6px 0 14px; } .tab { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.tab.active { background: var(--accent); color: white; border-color: var(--accent); }
.bar { display: inline-block; height: 10px; background: #dfe8f7; border-radius: 5px; width: 160px; vertical-align: middle; position: relative; overflow: hidden; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.bar > span.full { background: #2f9e44; }
.small { font-size: 13px; } .tight button { padding: 3px 8px; font-size: 13px; } .tight input { width: 60px; padding: 3px 6px; }
.ok { color: #2f9e44; } .warn { color: var(--warn); }
.calitem { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.calitem .text { white-space: pre-wrap; margin: 6px 0 10px; font-size: 15px; }
.calitem table { width: auto; margin-bottom: 8px; }

/* login / password forms: label above a fixed-width field */
.auth-form { max-width: 380px; }
.auth-form label { display: block; margin: 14px 0 0; font-weight: 500; }
.auth-form label input { display: block; width: 100%; max-width: 380px; margin-top: 6px; font-weight: 400; }
.auth-form button[type=submit] { margin-top: 18px; }
.auth-form p { margin-top: 14px; }

/* v1.2.4: two-pane coding layout. On the work and training screens the item text sits on the left with its own
   scrollbar (sticky, at most one viewport tall) and the form on the right scrolls with the page, so a coder can keep
   a long report in view while answering. Narrow windows fall back to the stacked layout. */
main.wide { max-width: 1400px; }
article.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
article.split .pane-text { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; padding-right: 20px; border-right: 1px solid var(--line); }
article.split .pane-form fieldset:first-child { margin-top: 4px; }
@media (max-width: 960px) {
  article.split { display: block; }
  article.split .pane-text { position: static; max-height: none; overflow: visible; padding-right: 0; border-right: none; margin-bottom: 14px; }
}
/* markdown renderer additions (### headings, `code`) */
.instructions h3, .rubric h3 { font-size: 15px; margin: 12px 0 2px; }
.instructions code, .rubric code, .feedback code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f3f2ee; padding: 0 4px; border-radius: 4px; }