/* Glue between the shell (shell.css, from the design prototype) and the capture module (styles.css). Only what neither file already provides. */ /* shell.css makes the flex row; the app wrapper has to continue it so the sidebar and main column still sit side by side inside it. */ .app { display: flex; width: 100%; min-height: 100vh; } /* One type system across the app. styles.css was written for the standalone capture tool and points these at Plus Jakarta Sans / JetBrains Mono; repoint them at the shell's families so capture components match everything else instead of shipping two typefaces in one screen. */ :root { --sans: 'Inter', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; } .qcard h4, .wsform-head h2, .upload-box h2 { font-family: 'Space Grotesk', system-ui, sans-serif; } /* ---------- sign-in ---------- */ .login-brand .lb-mark { width: 34px; height: 34px; border-radius: 10px; margin-right: 10px; background: linear-gradient(135deg, #6C5CE7, #8B7BFF 55%, #12B5A5 130%); color: #fff; font-weight: 700; display: inline-grid; place-items: center; } .login-brand { display: flex; align-items: center; } /* ---------- capture step chips ---------- */ .wsteps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .wstep { font-size: 12.5px; font-weight: 500; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; } .wstep.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; } /* ---------- question bank drill-down ---------- */ .bank-chapter { border-bottom: 1px solid var(--line-2, #eef0f3); padding: 6px 0; } .bank-chapter:last-child { border-bottom: 0; } .bank-row { display: grid; grid-template-columns: 1fr 70px 70px 140px; align-items: center; gap: 10px; padding: 9px 4px; font-size: 13.5px; } .bank-row .nm { font-weight: 600; } .bank-row .qn { color: var(--primary); font-weight: 600; } .bank-row .sub { color: var(--muted); } .bank-row .bar { height: 7px; border-radius: 20px; background: var(--line, #e7e9ee); overflow: hidden; } .bank-row .bar i { display: block; height: 100%; background: var(--primary); } .bank-sub { display: flex; justify-content: space-between; gap: 10px; padding: 5px 4px 5px 22px; font-size: 12.5px; color: var(--muted); } /* Syllabus is styled entirely by shell.css (.syl-chap / .syl-chap-h / .syl-del / .syl-sub-row) — deliberately nothing here, so the accent header, chevron rotation and trash buttons stay identical to the design. */ /* ---------- settings ---------- */ .set-row .txt p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); max-width: 52ch; } .numin { width: 90px; padding: 7px 9px; border: 1px solid var(--field, #d4d8df); border-radius: 8px; font: inherit; font-size: 13.5px; text-align: center; } .sw { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; } .sw input { opacity: 0; width: 0; height: 0; } .sw span { position: absolute; inset: 0; border-radius: 20px; cursor: pointer; background: #d4d8df; transition: .18s; } .sw span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .18s; } .sw input:checked + span { background: var(--primary, #6C5CE7); } .sw input:checked + span::before { transform: translateX(20px); } /* ---------- misc ---------- */ .empty.err { color: var(--coral-dk, #dc2626); } .side-foot .who { flex: 1; min-width: 0; } .side-foot .who b { color: #fff; font-size: 13px; display: block; } .side-foot .who small { color: #B9B8D8; font-size: 11.5px; text-transform: capitalize; } /* The capture module's panels were full-page sections in the old standalone app; inside the shell the content column already provides the padding. */ #v-builder .toolbar { margin-top: 0; } /* The design prototype hid the sidebar outright below 900px, which is fine for a demo reel and useless in a real app — it leaves no way to navigate on a laptop-sized window. Lay it out as a horizontal strip instead. */ @media (max-width: 900px) { .app { flex-direction: column; } .sidebar { display: flex !important; flex-direction: row; align-items: center; gap: 14px; width: 100%; height: auto; position: static; padding: 10px 16px; overflow-x: auto; overflow-y: visible; } .sidebar .brand { padding: 0; flex-shrink: 0; } .sidebar nav { display: flex; gap: 6px; flex: 1; } .sidebar .nav-label { display: none; } .sidebar .nav-item { width: auto; white-space: nowrap; margin-bottom: 0; } .sidebar .nav-item.active::before { display: none; } .side-foot { margin: 0; padding: 0; border: 0; flex-shrink: 0; } .side-foot .who { display: none; } } /* ---------- Organisation setup ---------- */ .org-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (max-width: 900px) { .org-grid { grid-template-columns: 1fr; } } .org-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .org-add input, .org-add select { flex: 1 1 120px; min-width: 0; padding: 8px 10px; border: 1px solid var(--field, #d4d8df); border-radius: 8px; font: inherit; font-size: 13px; } .org-add .btn { flex: 0 0 auto; } .inline-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; } .inline-check input { flex: 0 0 auto; } .org-list { max-height: 240px; overflow-y: auto; } .org-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; font-size: 13.5px; font-weight: 500; border-bottom: 1px solid var(--line-2, #eef0f3); } .org-item:last-child { border-bottom: 0; } .org-item .meta { font-size: 12px; font-weight: 400; color: var(--muted); } /* ---------- Worksheets library ---------- */ .ws-name { display: flex; align-items: center; gap: 11px; } .ws-ic { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; } .ws-name b { font-weight: 600; } .ws-actions { white-space: nowrap; } .ws-actions .mini-btn + .mini-btn { margin-left: 6px; } /* "1 Aug 2026" must stay on one line — it wrapped to three in a narrow column. */ .ws-date { white-space: nowrap; color: var(--muted); } /* ---------- Students: class mapping ---------- */ .map-row { display: grid; grid-template-columns: 1fr 260px 90px; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-2, #eef0f3); font-size: 13.5px; } .map-row:last-child { border-bottom: 0; } .map-row .nm { font-weight: 600; } .map-row select { padding: 8px 10px; border: 1px solid var(--field, #d4d8df); border-radius: 8px; font: inherit; font-size: 13px; width: 100%; } .map-state { font-size: 11.5px; font-weight: 600; text-align: right; color: var(--faint); } .map-state.ok { color: var(--teal-dk, #0E9C8E); } @media (max-width: 760px) { .map-row { grid-template-columns: 1fr; } } /* ---------- OMR processing ---------- */ .omr-step { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--coral, #FB5E7B); font-weight: 600; font-family: var(--mono); } .omr-h2 { font-size: 26px; margin: 7px 0 6px; } .omr-lead { margin: 0 0 18px; color: var(--muted); max-width: 62ch; font-size: 13.5px; } .omr-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); } .omr-count { font-family: var(--mono); font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--primary-soft, #EDEAFF); color: var(--primary); } .omr-pill { font-family: var(--mono); font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: #FBF0DC; color: #B26A05; font-weight: 600; } .omr-drop { border: 1.5px dashed var(--line-2, #CDD2E4); border-radius: 10px; padding: 34px 20px; text-align: center; background: #fff; transition: .15s; } .omr-drop:hover { border-color: var(--primary); background: var(--primary-soft, #EDEAFF); } .omr-drop h4 { font-size: 15px; margin: 0 0 5px; } .omr-drop p { margin: 0 0 16px; color: var(--muted); font-size: 13px; } /* A scanner bar sweeping the page — the one bit of motion that says "reading". */ .omr-scanner { width: 52px; height: 38px; margin: 0 auto 14px; border: 2px solid var(--text, #191833); border-radius: 5px; position: relative; overflow: hidden; } .omr-scanner::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--coral, #FB5E7B); top: 6px; animation: omrscan 2.2s ease-in-out infinite; } @keyframes omrscan { 0%,100% { top: 5px } 50% { top: 29px } } .omr-bar { height: 5px; border-radius: 99px; background: var(--line, #e7e9ee); overflow: hidden; } .omr-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--coral, #FB5E7B)); transition: width .35s; } /* One dot per sheet: the batch's shape at a glance. */ .omr-strip { display: flex; flex-wrap: wrap; gap: 4px; padding: 12px 0 4px; } .omr-strip i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-2, #CDD2E4); display: block; transition: .2s; } .omr-strip i.ok { background: var(--teal-dk, #0F7A57); border-color: var(--teal-dk, #0F7A57); } .omr-strip i.rev { background: #B26A05; border-color: #B26A05; } .omr-strip i.rej { background: var(--coral-dk, #C42F3E); border-color: var(--coral-dk, #C42F3E); } .omr-stats, .omr-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } .omr-tiles { margin: 0 0 18px; } .omr-stats .stat, .omr-tiles .stat { border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; background: #fff; } .omr-stats .k, .omr-tiles .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-family: var(--mono); } .omr-stats .v, .omr-tiles .v { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin-top: 4px; line-height: 1; } .omr-stats .v.ok { color: var(--teal-dk, #0F7A57); } .omr-stats .v.warn { color: #B26A05; } .omr-stats .v.bad { color: var(--coral-dk, #C42F3E); } .omr-tiles .sub2 { font-size: 13px; color: var(--faint); font-weight: 500; } @media (max-width: 760px) { .omr-stats, .omr-tiles { grid-template-columns: 1fr; } } .omr-note { display: flex; gap: 11px; padding: 13px 15px; border-radius: 9px; font-size: 13px; line-height: 1.45; margin-bottom: 18px; background: #FBF0DC; border: 1px solid #EDD6A8; color: #6C4304; } .omr-rev-grid { display: grid; grid-template-columns: 1fr 300px; gap: 18px; } @media (max-width: 900px) { .omr-rev-grid { grid-template-columns: 1fr; } } /* Graph-paper backing so the crop reads as a piece of a scanned sheet. */ .omr-cropbox { background: #FBFBFE; border: 1px solid var(--line); border-radius: 9px; padding: 22px; display: flex; align-items: center; justify-content: center; min-height: 150px; overflow: auto; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px; } .omr-cropbox img { max-width: 100%; background: #fff; border: 1px solid var(--line-2, #CDD2E4); border-radius: 6px; box-shadow: 0 1px 3px rgba(16,24,40,.10); } .omr-croplbl { margin-top: 12px; font-size: 12.5px; color: var(--muted); } .omr-meta { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; } .omr-meta:last-of-type { border-bottom: none; } .omr-meta .k { color: var(--muted); } .omr-meta .v { font-weight: 600; font-family: var(--mono); } .omr-judge { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .omr-judge button { padding: 12px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1.5px solid; background: #fff; } .omr-judge .yes { border-color: var(--teal-dk, #0F7A57); color: var(--teal-dk, #0F7A57); background: var(--teal-soft, #E4F4EE); } .omr-judge .yes:hover { background: var(--teal-dk, #0F7A57); color: #fff; } .omr-judge .no { border-color: var(--coral-dk, #C42F3E); color: var(--coral-dk, #C42F3E); background: var(--coral-soft, #FCEAEC); } .omr-judge .no:hover { background: var(--coral-dk, #C42F3E); color: #fff; } .omr-opts { display: flex; gap: 8px; margin-top: 14px; } .omr-opts .ansbtn { flex: 1; height: 40px; font-size: 15px; } .omr-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; } .omr-in { width: 100%; padding: 9px 11px; border: 1px solid var(--field, #d4d8df); border-radius: 8px; font: inherit; font-size: 13.5px; } /* A sheet the reader scored but the session left out — shown, but muted, so nobody hunts for a student whose marks are not in the results. */ .omr-out td { opacity: .55; } /* ---------- inputs inside filter pills ---------- */ /* shell.css makes .pick a pill with the label inside and a borderless select. A text input kept its own border, so it rendered as a box inside a box. Match the select: let the pill be the control, and light the whole pill on focus rather than a rectangle within it. */ .pick input[type=text], .pick input[type=email], .pick input[type=password], .pick input[type=number], .pick input[type=date], .pick input:not([type]) { border: none; background: none; outline: none; box-shadow: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--text); padding: 0; min-width: 0; width: 100%; } .pick input::placeholder { color: var(--faint); font-weight: 400; } .pick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft, #EDEAFF); } /* The pills sit in a row; let the free-text ones take the slack rather than staying stubbornly narrow while the row has space. */ .usr-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .usr-form .pick { flex: 1 1 190px; } .usr-form .pick:last-of-type { flex: 0 0 auto; } .usr-form .btn { flex: 0 0 auto; } /* Step 1: what the chosen paper actually contains. */ .ws-paper-summary{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px} .ws-paper-summary .wps{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);background:var(--canvas);border:1px solid var(--line);border-radius:9px;padding:7px 11px} .ws-paper-summary .wps b{font-size:12.5px;color:var(--text)} .ws-paper-summary .wps.total{background:var(--primary-soft);border-color:transparent} /* Capture: one tab per subject block, with its own progress. */ .subj-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .subj-tab{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:13px;font-weight:600;color:var(--muted);transition:.15s} .subj-tab:hover{border-color:var(--primary);color:var(--primary)} .subj-tab.on{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)} .subj-tab.done span{color:var(--teal-dk)} .subj-tab span{font-family:'IBM Plex Mono';font-size:11.5px;font-weight:600;color:var(--faint)} /* Printed paper: subject headings, and the instruction that makes the non-contiguous numbering safe in an exam hall. */ .ws-subject{margin:18px 0 8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid #000;padding-bottom:3px} .ws-note{font-size:11.5px;font-style:italic;margin:0 0 12px} /* ---------- Printing the worksheet ---------- The printed sheet must be the worksheet and nothing else. Two things used to leak into it: 1. The shell. `.sidebar` is `.no-print`, and styles.css/shell.css both hide it — but the rule 100 lines up re-shows it with `display:flex !important` below 900px, and a print viewport IS narrower than 900px. Same weight, later stylesheet, so it won. Undoing it has to happen here, after it. 2. The page background. `.app`/`.main`/`.content` paint the indigo shell chrome and pad the content column; on paper that came out as coloured margins around the sheet. The worksheet is laid out into explicit A4 pages by layoutPages() in app.js, so what the preview shows is what the printer is given. */ @media print { .sidebar, .topbar, .no-print, .wsteps { display: none !important; } html, body, .app, .main, .content, .view { background: #fff !important; margin: 0 !important; padding: 0 !important; display: block !important; box-shadow: none !important; border: 0 !important; } #printArea { margin: 0 !important; padding: 0 !important; max-width: none !important; box-shadow: none !important; border-radius: 0 !important; } /* No @page margin: the sheet's margin is padding INSIDE .ws-page, so the preview shows the same white border the printer leaves. Splitting it between the two is what made the preview and the PDF disagree. */ @page { size: A4; margin: 0; } } /* Once paginated, #printArea is just a stack of sheets — the paper, the padding and the shadow all belong to the pages inside it. */ #printArea.paged { background: transparent; box-shadow: none; padding: 0; margin: 26px auto; max-width: none; border-radius: 0; } /* An explicit page box, so the preview paginates exactly as the printer will. A whole A4 sheet, with the margin as padding inside it — the preview then shows the real white border, and the printed page is the same box. 12mm clears the unprintable edge every office printer has. */ .ws-page { width: 210mm; height: 297mm; margin: 0 auto 20px; padding: 14mm 12mm; background: #fff; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-md); border-radius: 4px; } .ws-page + .ws-page { margin-top: 0; } /* Two columns of fixed width beat CSS multi-column here: multicol re-flows and re-balances when it is fragmented across printed pages, which is exactly why the preview and the PDF disagreed about which question started column two. */ .ws-cols { display: flex; gap: 8mm; flex: 1 1 auto; min-height: 0; align-items: stretch; } .ws-cols.ruled > .ws-col + .ws-col { border-left: 1px solid #ccc; padding-left: 8mm; } .ws-col { flex: 1 1 0; min-width: 0; overflow: hidden; } .ws-page .ws-body { column-count: initial; } @media print { /* Same box on paper as on screen — only the screen chrome comes off. */ .ws-page { margin: 0; box-shadow: none; border-radius: 0; break-inside: avoid; page-break-inside: avoid; } .ws-page + .ws-page { break-before: page; page-break-before: always; } } /* A student already committed to the other stream: shown, named, and not selectable. Hiding them would read as "the search is wrong"; the whole point is that the coordinator sees where that student already is. */ .co-row.is-taken { opacity: .6; cursor: not-allowed; } .co-row.is-taken:hover { background: transparent; } .co-row.is-taken .co-meta { color: var(--coral-dk, #b3261e); font-weight: 600; } .co-lock { flex: 0 0 auto; width: 34px; text-align: center; color: var(--muted); } /* Attaching a sheet to a student by hand, where the bubbled roll could not. Sits in the match table's action column, so it is sized like the pills it replaces rather than like a form field. */ select.omr-assign { padding: 5px 9px; border: 1px solid var(--field, #d4d8df); border-radius: 7px; font: inherit; font-size: 12.5px; background: var(--surface); max-width: 200px; } select.omr-assign:focus-visible { border-color: var(--primary); outline: none; } /* ---------- Printed header: the institute's masthead ---------- */ /* Without a logo the header stays centred, as it always was; with one it becomes logo-then-text so the sheet reads like the school's own paper. */ .ws-header.with-logo { display: flex; align-items: center; gap: 14px; text-align: left; } .ws-header.with-logo .ws-head-txt { flex: 1; min-width: 0; } .ws-logo { height: 16mm; width: auto; max-width: 34mm; object-fit: contain; flex: 0 0 auto; } /* Instructions typed on Setup the paper, printed once above the questions. */ .ws-guide { margin: 0 0 14px; padding: 8px 11px; border: 1px solid #999; } .ws-guide h5 { margin: 0 0 5px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .ws-guide p { margin: 3px 0; font-size: .92em; } /* The per-section rubric under each subject heading — generated from the paper's own counts and marks, never typed, so it cannot disagree with what the system scores. */ .ws-secnote { margin: 0 0 12px; font-size: .88em; font-style: italic; text-align: center; break-after: avoid; page-break-after: avoid; } /* Campus logo, set beside the campus it belongs to. */ .org-item .logo-cell { display: flex; align-items: center; gap: 8px; margin-left: auto; } .logo-thumb { height: 26px; width: auto; max-width: 70px; object-fit: contain; } .logo-none { font-size: 12px; color: var(--faint, #9aa0ac); } .org-item .logo-cell .linkbtn { cursor: pointer; } /* Paper instructions: a stacked field — label, hint, then the box. */ .pd-notes { margin-top: 16px; } .pd-notes label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); } .pd-notes .hint { margin: 3px 0 8px; font-size: 12px; line-height: 1.45; color: var(--muted); max-width: 76ch; } #pdNotes { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--field, #d4d8df); border-radius: 9px; font: inherit; font-size: 13.5px; line-height: 1.5; resize: vertical; background: var(--surface); color: var(--text); } #pdNotes:focus-visible { outline: none; border-color: var(--primary); } /* ---------- Question bank: the questions behind a count ---------- */ /* The count is the affordance — it is what the user already reads to judge coverage, so it is what they reach for to check it. */ .qcount { font: inherit; font-family: var(--mono); font-size: inherit; background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--primary); font-weight: 600; /* Underlined at rest, not only on hover: a number that reveals something on click has to look clickable before the pointer is on it. */ border-bottom: 1px dashed currentColor; } .qcount:hover { border-bottom-style: solid; } /* A zero opens nothing, so it must not carry the affordance. */ .qcount.none { color: var(--faint, #9aa0ac); cursor: default; font-weight: 400; border-bottom-color: transparent; } .qdrawer { position: fixed; inset: 0; z-index: 70; } .qdrawer-back { position: absolute; inset: 0; background: rgba(15, 18, 32, .45); } .qdrawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 92vw); background: var(--surface, #fff); display: flex; flex-direction: column; box-shadow: -18px 0 50px rgba(0, 0, 0, .22); } .qdrawer-panel > header { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); } .qdrawer-panel > header h3 { margin: 0; font-family: 'Space Grotesk'; font-size: 20px; } .qdrawer-panel > header .sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); } .qdrawer-panel > header .mini-btn { margin-left: auto; flex: 0 0 auto; } .qdrawer-count { margin: 0; padding: 10px 22px; font-size: 12.5px; color: var(--muted); background: var(--surface-2, #f6f7fb); } .qdrawer-body { flex: 1; overflow-y: auto; padding: 16px 22px 26px; } .qd-card { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; margin-bottom: 12px; background: var(--surface); } .qd-card > header { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; } .qd-n { font-size: 11px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: 6px; } .qd-id { font-size: 11px; color: var(--faint, #9aa0ac); } .qd-stem { font-size: 14px; line-height: 1.5; } .qd-img { max-width: 100%; border-radius: 8px; display: block; } .qd-opts { list-style: none; margin: 9px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 16px; font-size: 13px; color: var(--muted); counter-reset: qdopt; } .qd-opts li::before { counter-increment: qdopt; content: '(' counter(qdopt) ') '; color: var(--faint, #9aa0ac); } .qd-card > footer { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); display: flex; justify-content: flex-end; font-size: 12.5px; } .qd-ans { color: var(--muted); } .qd-ans b { display: inline-block; margin-left: 6px; min-width: 22px; text-align: center; background: var(--teal-soft, #e6f7f4); color: var(--teal-dk, #0b7a68); border-radius: 6px; padding: 2px 7px; font-family: var(--mono); } /* A near match — same question, differently transcribed. Amber rather than the red of a confirmed duplicate: this one is a question for the reviewer, not a verdict. */ .dupwarn.near { background: #fff8e6; border: 1px solid #e6c34d; color: #7a5a00; } .dupwarn.near .nearprev { margin: 7px 0; padding: 8px 10px; background: rgba(255, 255, 255, .7); border-radius: 7px; font-size: 12.5px; line-height: 1.45; max-height: 92px; overflow: hidden; color: #6b5200; } .dupwarn.near .linkbtn { margin-right: 12px; }