/* The writing card page in the IELTS-on-computer shell (cdtest.css). Three steps (the teacher's
   design, 2026-10-12): Learn pages and one-page Practice exercises in a wide column, then the
   Write pages: the task on the left (the test's own prompt and chart, with marks the help can
   light), and on the right only four things: the TASK line, the report on one sheet of paper
   (the given paragraphs grey, the student's box the only white box, the parts named in the
   margin), one line of feedback under the paper, and a folded Help. The chart styles draw the
   Task 1 prompts from data (public/chart.js); the tokens they use are set here because this page
   does not load style.css. */
:root { --border: #cfcfcf; --border-2: #bdbdbd; --muted: #555555; --accent: #0b63ce; --accent-dk: #0b63ce; --text: #111111; --v: #6d28d9; --vsoft: #f4f0fc; --vline: #d9ccf5; }
html[data-cd-theme="dark"] { --border: #555; --border-2: #666; --muted: #bbb; --text: #fff; --vsoft: #1d1530; --vline: #4c3a80; }
.cd-q-text { font-size: 1.1em; font-weight: 700; margin: 0 0 8px; }
.cd-colloc { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.cd-colloc span { border: 1px solid var(--cd-line); padding: 2px 8px; font-weight: 700; }
.cd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.cd-tile { border: 1px solid var(--cd-line); background: var(--cd-box); padding: 10px; text-align: center; }
.cd-tile .n { font-size: 1.8em; font-weight: 800; line-height: 1.1; } .cd-tile .l { font-size: .85em; color: var(--muted); }
.cd-coach { margin: 8px 0 0; padding-left: 20px; }
.cd-detail { border: 1px solid var(--cd-line); background: var(--cd-box); margin: 10px 0; padding: 8px 12px; }
.cd-detail summary { cursor: pointer; font-weight: 800; }
i, .cd i { font-style: italic; }
/* the steps along the bottom bar: Learn · Practice · Write, numbered, the current one filled */
.cd-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.cd-steps .lab { font-weight: 800; font-size: 13px; color: var(--muted); margin: 0 4px 0 10px; }
.cd-steps .lab:first-child { margin-left: 0; }
/* Learn and Practice: one wide column */
.cd-wide { max-width: 1100px; margin: 0 auto; }
.cd-learn { border: 1px solid var(--cd-line); background: var(--cd-box); padding: 18px 24px 20px; }
.cd-learn h1 { margin: 0 0 10px; font-size: 1.35em; }
.cd-learn p, .cd-learn li { line-height: 1.55; } .cd-learn ul { padding-left: 20px; }
.cd-learn .bad { color: #b91c1c; } .cd-learn .good { color: #15803d; }
.cd-lex { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--cd-box); margin: 8px 0 12px; }
.cd-lex th { text-align: left; color: #15803d; border-bottom: 2px solid #15803d; padding: 6px 8px; }
.cd-lex td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--cd-line); line-height: 1.7; }
.cd-instr.labelled > b.t { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--v); margin-bottom: 6px; }
.cd-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cd-grid3 .one { border: 1px solid var(--cd-line); background: var(--cd-box); padding: 8px 10px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.cd-grid3 .one .n { font-weight: 800; font-size: 17px; margin-bottom: 2px; }
.cd-grid3 .one .vis { flex: 1; } .cd-grid3 .chart { margin: 0; } .cd-grid3 .chart-title { display: none; } .cd-grid3 .chart svg { max-height: 150px; } .cd-grid3 table.data { font-size: 12px; } .cd-grid3 .pie-wrap { grid-template-columns: 120px 1fr; } .cd-grid3 .map-grid { aspect-ratio: 3 / 2; }
.cd-grid3 .pick { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; text-align: center; }
.cd-grid3 .pick .cd-mark { white-space: normal; font-size: 14px; }
.cd-secondary:disabled { opacity: .5; cursor: default; }
.cd-ex select, .cd-ex input, .cd-grid3 select { font: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid #666; background: var(--cd-box); color: var(--cd-ink); border-radius: 0; }
.cd-ex input { width: 100%; box-sizing: border-box; }
.cd-ex { display: grid; gap: 10px; }
.cd-ex .row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; }
.cd-ex .row .n { font-weight: 800; }
.cd-ex .row.stack { grid-template-columns: 30px 1fr; } .cd-ex .row.stack .pr-ans { grid-column: 2; display: grid; gap: 6px; } /* not `.ans`: that is the Reading review's underlined answer mark in cdtest.css (it bled onto this box, 2026-10-15) */
.cd-ex .given { font-size: 13.5px; color: var(--v); font-weight: 700; }
.cd-ex u, .cd-sent u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cd-mark { font-weight: 800; white-space: nowrap; } .cd-mark.ok { color: #15803d; } .cd-mark.bad { color: #c81e1e; }
.cd-mark .key { font-weight: 600; color: #15803d; } .cd-mark .why { font-weight: 400; color: var(--muted); }
.cd-mark .fix { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; vertical-align: middle; margin-left: 6px; white-space: normal; font-weight: 500; font-size: 13px; color: #b45309; }
.cd-mark .fix > span { background: #fef3c7; border-radius: 6px; padding: 2px 8px; }
.cd-report { display: grid; gap: 18px; } /* Practice 4: one model report per cream sheet (.paper.model.wide below) */
.cd-chartq { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cd-chartq .chart { margin: 0; }
.cd-pstatus { margin: 12px 0 0; font-weight: 700; }
.cd-pstatus.ok { color: #15803d; } .cd-pstatus.bad { color: #c81e1e; }
/* Write: the split with the test's ratios and a draggable divider */
.cd-split.scaffold { grid-template-columns: var(--l, 42fr) 14px var(--r, 58fr); gap: 0 10px; }
.cd-split.scaffold.text { --l: 1fr; --r: 2fr; }
.cd-divider { align-self: stretch; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; }
.cd-divider i { width: 4px; height: 44px; border-radius: 2px; background: #c9c9c9; }
.cd-divider:hover i, .cd-divider.on i { background: var(--v); }
.cd-split.scaffold .cd-answer { max-height: calc(100vh - 150px); overflow: auto; padding-bottom: 8px; }
.cd-split.scaffold .cd-task { padding-bottom: 20px; }
/* the four things on the right */
.z-task { border: 1px solid var(--vline); border-left: 5px solid var(--v); background: var(--cd-box); padding: 10px 14px; display: flex; gap: 14px; align-items: baseline; }
.z-task .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--v); flex: none; }
.z-task p { margin: 0; font-size: 16px; font-weight: 700; flex: 1; }
.z-task .min { font-size: 13px; color: var(--muted); white-space: nowrap; font-weight: 700; }
.paper { position: relative; background: #fffefb; color: #111; border: 1px solid #e2ddd0; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); margin-top: 8px; padding: 20px 22px 14px 96px; background-image: repeating-linear-gradient(transparent 0 27px, #ebe7dd 27px 28px); background-origin: content-box; background-clip: content-box; }
.paper::before { content: ""; position: absolute; left: 80px; top: 0; bottom: 0; border-left: 1.5px solid #f1bcbc; }
.paper .pp { position: relative; margin: 0 0 28px; color: #858585; font-size: 15px; line-height: 28px; }
.paper .pp:last-child { margin-bottom: 0; }
.paper .pp .mg { position: absolute; left: -88px; width: 68px; text-align: right; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #a0a0a0; text-transform: uppercase; top: 7px; line-height: 1.15; }
.paper .pp .mg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.paper .pp.later { color: #b8b8b8; font-style: italic; }
.paper .pp.mine { color: #111; }
.paper .pp.mine .box { border: 2px solid var(--v); background: #fff; border-radius: 4px; padding: 20px 10px 8px; position: relative; margin: 4px 0 0 -6px; }
.paper .pp.mine .tag { position: absolute; top: -12px; left: 10px; background: var(--v); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.paper .pp.mine textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; line-height: 28px; border: 0; outline: 0; resize: vertical; background: transparent; color: #111; padding: 0; min-height: 84px; display: block; }
.paper .links { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--vline); font-size: 13px; line-height: 1.4; display: grid; gap: 6px; }
.paper .links .lk { display: grid; grid-template-columns: 82px 1fr auto 140px; gap: 8px; align-items: center; }
.paper .links .sn { font-weight: 800; color: var(--v); } .paper .links .txt { color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .paper .links .txt.muted { color: #999; font-style: italic; }
.paper .links select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--v); border-radius: 4px; background: #fff; color: #111; }
/* The model's sheet (the teacher's design, 2026-10-13): the same ruled paper, cream with a green
   margin, a title strip and a "Good model" stamp, so the exemplar is never mistaken for the
   student's sheet. Practice 4 uses the wide form (the part select sits in the margin); the result
   and the summary show the student's white sheet (the own paragraph in its box) above the model's. */
.paper.model { background: #fbf8ec; border-color: #e3d9b8; background-image: repeating-linear-gradient(transparent 0 27px, #eae1c4 27px 28px); padding-top: 50px; }
.paper.model::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: #f1ebd3; border-bottom: 1px solid #e3d9b8; }
.paper.model .stamp, .paper.model .title { z-index: 1; }
.paper.model::before { border-left-color: #8fc3a3; }
.paper.model .pp { color: #222; }
.paper.model .pp .mg { color: #2f855a; }
.paper .stamp { position: absolute; top: 7px; right: 16px; transform: rotate(-5deg); border: 2.5px solid #2f855a; color: #2f855a; font-weight: 900; letter-spacing: .12em; font-size: 12px; padding: 4px 10px; border-radius: 4px; background: rgba(255, 255, 255, .55); text-transform: uppercase; }
.paper .title { position: absolute; top: 13px; left: 22px; right: 150px; font-size: 12px; font-weight: 800; color: #2f855a; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.paper.wide { padding-left: 190px; } .paper.wide::before { left: 172px; }
.paper.wide .pp .mg { left: -182px; width: 160px; text-align: left; top: 0; text-transform: none; letter-spacing: 0; }
.paper.wide .pp .mg select { font: inherit; font-size: 13.5px; padding: 4px 6px; border: 1px solid #666; background: #fff; color: #111; width: 150px; }
.paper.wide .pp .mg .cd-mark { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; line-height: 1.3; }
.paper .q { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 2px solid #c9e4d3; margin-top: 4px; padding-top: 10px; font-weight: 700; font-size: 15px; color: #222; position: relative; }
.paper .q .qa { display: flex; gap: 8px; align-items: center; flex: none; }
.paper .q select { font: inherit; font-size: 13.5px; padding: 4px 6px; border: 1px solid #666; background: #fff; color: #111; }
.paper.student .pp.mine .own { border: 2px solid var(--v); background: #fff; border-radius: 4px; padding: 20px 10px 8px; position: relative; margin: 4px 0 0 -6px; color: #111; white-space: pre-wrap; }
.paper.model .s1, .cd-model .s1 { background: #dbe7ff; } .paper.model .s2, .cd-model .s2 { background: #ffe1d1; }
.cmp { display: grid; gap: 18px; }
.cmp h2 { margin: 0 0 -6px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #777; }
html[data-cd-theme="dark"] .paper.model { background: #26220f; border-color: #4a4320; background-image: repeating-linear-gradient(transparent 0 27px, #3a3520 27px 28px); } html[data-cd-theme="dark"] .paper.model::after { background: #2f2a14; border-color: #4a4320; } html[data-cd-theme="dark"] .paper.model .pp, html[data-cd-theme="dark"] .paper .q { color: #eee; } html[data-cd-theme="dark"] .paper.student .pp.mine .own { background: #000; color: #fff; } html[data-cd-theme="dark"] .paper.wide .pp .mg select, html[data-cd-theme="dark"] .paper .q select { background: #000; color: #fff; }
html[data-cd-theme="dark"] .paper { background: #1a1a1a; color: #eee; border-color: #444; background-image: repeating-linear-gradient(transparent 0 27px, #333 27px 28px); } html[data-cd-theme="dark"] .paper .pp.mine .box, html[data-cd-theme="dark"] .paper .links select { background: #000; color: #fff; } html[data-cd-theme="dark"] .paper .pp.mine textarea { color: #fff; }
.fb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13.5px; margin: 8px 2px 0; }
.fb b { font-weight: 800; } .fb .warn { color: #b91c1c; font-weight: 700; }
.fb .more { margin-left: auto; color: var(--v); font-weight: 700; cursor: pointer; background: none; border: 0; font: inherit; font-size: 13.5px; }
.dots { display: inline-flex; gap: 4px; vertical-align: middle; margin-right: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #999; box-sizing: border-box; display: inline-block; }
.dots i.on { background: #15803d; border-color: #15803d; }
.rules { border: 1px solid var(--vline); background: var(--vsoft); padding: 8px 12px; font-size: 14px; margin-top: 6px; }
.rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rules li { display: flex; gap: 8px; align-items: center; } .rules li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #999; box-sizing: border-box; flex: none; }
.rules li.on::before { background: #15803d; border-color: #15803d; }
.rules small { color: var(--muted); }
.help { margin-top: 16px; }
.help .hbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--v); background: var(--cd-box); color: var(--v); border-radius: 4px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.help .hbtn.on { background: var(--v); color: #fff; }
.help .tabs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.help .tabs button { font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 12px; border: 1px solid var(--vline); background: var(--cd-box); color: var(--v); border-radius: 4px 4px 0 0; cursor: pointer; }
.help .tabs button.on { background: var(--vsoft); border-bottom-color: var(--vsoft); }
.help .tabs .cnt { font-size: 12px; background: #ede9fe; color: var(--v); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.hp { border: 1px solid var(--vline); background: var(--vsoft); padding: 10px 12px; font-size: 14px; border-radius: 0 4px 4px 4px; margin-top: -1px; }
.hp select { font: inherit; font-size: 14px; height: 36px; padding: 0 10px; border: 1px solid var(--v); background: var(--cd-box); color: var(--cd-ink); border-radius: 4px; min-width: 240px; }
.hp .q { margin: 10px 0 6px; } .hp .pin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--v); color: #fff; font-size: 10px; font-weight: 800; text-align: center; line-height: 16px; margin-right: 6px; }
.hp .frame { background: var(--cd-box); border: 1px dashed #a78bfa; padding: 6px 8px; font-style: italic; }
.hp .blank { display: inline-block; min-width: 70px; border-bottom: 2px solid var(--v); margin: 0 2px; font-style: normal; color: var(--v); font-size: 12px; text-align: center; }
.hp .got { margin: 0 0 8px; } .hp .got b { color: var(--v); }
.hp .hint { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--v); background: var(--cd-box); color: var(--v); border-radius: 4px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.hp .hint:disabled { color: #888; border-color: #ccc; cursor: default; }
.hp table { border-collapse: collapse; width: 100%; } .hp td { padding: 4px 8px 4px 0; vertical-align: top; } .hp td:first-child { color: var(--muted); width: 140px; } .hp .bad { color: #b91c1c; }
.hp s { color: #777; }
/* the model's sentences coloured by the paragraph they announce (the result of a linked question) */
/* charts (public/chart.js) */
.chart { margin: 10px 0 0; }
.chart-title { font-size: 13.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.chart svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--border); border-radius: 12px; }
.chart .grid { stroke: #e2e8f0; stroke-width: 1; }
.chart .tick { font-size: 10px; fill: #64748b; font-family: inherit; }
.chart .val { font-size: 10px; fill: #0f172a; font-weight: 700; font-family: inherit; }
.chart .pie-val { font-size: 11px; fill: #fff; font-weight: 800; font-family: inherit; }
.chart-legend { display: flex; gap: 10px 14px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; color: var(--muted); }
.chart-legend.col { flex-direction: column; gap: 4px; }
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.chart-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.pie-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; }
.pie-wrap svg { border: 0; background: transparent; }
.charts { display: grid; gap: 12px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; border-radius: 12px; overflow: hidden; }
table.data th, table.data td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { background: #f1f5f9; color: var(--muted); font-size: 12px; }
table.data tr.marked th, table.data tr.marked td, table.data td.marked { background: #ede9fe; }
table.data .mark-n { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--v); color: #fff; font-size: 10px; font-weight: 800; text-align: center; line-height: 16px; }
ol.process { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
ol.process li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; position: relative; }
ol.process li + li::before { content: "↓"; position: absolute; left: 14px; top: -14px; color: var(--muted); font-size: 12px; }
.pstep-n { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.maps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.map-label { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; }
.map-grid { display: grid; gap: 3px; background: #cbd5e1; border: 2px solid #94a3b8; border-radius: 8px; padding: 3px; aspect-ratio: 4 / 3; }
.map-grid .cell { background: #fff; border-radius: 4px; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; text-align: center; padding: 2px; line-height: 1.15; }
.compass { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; font-weight: 700; }
@media (max-width: 900px) { .cd-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cd-chartq { grid-template-columns: 1fr; } }
@media (max-width: 799px) {
  .cd-split.scaffold { grid-template-columns: 1fr; } .cd-divider { display: none; } .cd-split.scaffold .cd-answer { max-height: none; overflow: visible; }
  .paper { padding-left: 16px; } .paper::before { display: none; } .paper .pp .mg { position: static; display: block; width: auto; text-align: left; margin-bottom: 2px; }
  .paper .links .lk { grid-template-columns: 1fr; gap: 4px; }
  .cd-grid3 { grid-template-columns: 1fr; } .paper.wide { padding-left: 16px; } .paper.wide .pp .mg { width: auto; margin-bottom: 4px; } .paper .title { right: 16px; position: static; display: block; margin: -30px 0 18px; }
  .pie-wrap { grid-template-columns: 1fr; } .maps { grid-template-columns: 1fr; } .charts { gap: 8px; }
}