/* The assessment site (assess.dailygcse.com): a desktop layout on top of the app's styles (css/styles.css), which it
   shares for buttons, tags and how questions and diagrams look. */
body { background: #f3f2ee; min-width: 320px; }
.as { min-height: 100vh; display: flex; flex-direction: column; }
.as-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.as-main { flex: 1; padding: 28px 0 64px; }

/* ---------- top bar ---------- */
.as-top { background: #fff; border-bottom: 2px solid var(--ink); }
.as-top .as-wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.as-brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: -.01em; }
.as-brand img { width: 30px; height: 30px; }
.as-brand .sub { font-weight: 700; color: var(--ink-2); padding-left: 10px; border-left: 2px solid var(--rule); }
.as-who { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--ink-2); }
.as-who b { color: var(--ink); }

/* ---------- headings and layout ---------- */
.as-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.as-head h1 { margin: 0; font-size: 30px; }
.as-head .grow { flex: 1; }
.as-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; margin-bottom: 12px; color: var(--ink-2); }
.as-back:hover { color: var(--ink); }
.as-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start; }
.as-stack > * + * { margin-top: 20px; }
.as-card { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 22px; }
.as-card h2 { font-size: 19px; margin: 0 0 4px; }
.as-card .lead { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }
.as-step { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; align-items: center; justify-content: center; margin-right: 8px; vertical-align: 2px; }
.as-sticky { position: sticky; top: 20px; }
.as-empty { text-align: center; padding: 48px 20px; color: var(--ink-2); }
.as-empty h2 { color: var(--ink); }
.as-note { background: var(--yellow); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0; }
.as-err { color: var(--bad); font-weight: 700; font-size: 14px; margin: 10px 0 0; }

/* ---------- form controls ---------- */
.as-field { display: block; margin-bottom: 14px; }
.as-field > span { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.as-in, .as-sel { height: 42px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; font: inherit; font-size: 15px; font-weight: 600; width: 100%; outline: none; }
.as-in:focus, .as-sel:focus { box-shadow: 0 0 0 3px var(--tag); }
.as-in.sm { width: 110px; }
.as-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.as-row > .as-field { flex: 1; min-width: 140px; }
.as-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; font-size: 15px; }
.as-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.as-check small { display: block; color: var(--ink-2); font-size: 13px; }
.as-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.as-opt-h { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; margin: 16px 0 2px; }
.as-opt-h:first-child { margin-top: 0; }
.as-tabs { display: flex; flex-wrap: wrap; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; width: fit-content; margin-bottom: 18px; }
.as-tabs button { padding: 9px 16px; font-weight: 800; font-size: 14px; background: #fff; }
.as-tabs button + button { border-left: 2px solid var(--ink); }
.as-tabs button.on { background: var(--ink); color: #fff; }
.as-tabs .ct { font-weight: 700; opacity: .6; margin-left: 4px; }
.btn.as-sm { height: 36px; padding: 0 16px; font-size: 12px; }
.as-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; font-size: 14px; }
.as-link.bad { color: var(--bad); }

/* ---------- tables ---------- */
.as-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.as-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); padding: 0 12px 8px; border-bottom: 2px solid var(--ink); }
.as-table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.as-table tr.go { cursor: pointer; }
.as-table tr.go:hover td { background: #faf8f3; }
.as-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-table .nm { font-weight: 800; }
.as-table .sub { display: block; font-size: 13px; color: var(--ink-2); font-weight: 400; }
.st { display: inline-block; padding: 3px 9px; font-size: 12px; font-weight: 800; border-radius: 4px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.st.upcoming { background: var(--blue); }
.st.open { background: var(--green); }
.st.finished { background: var(--beige); }
.st.cancelled { background: var(--bad-bg); color: var(--bad); }

/* ---------- question picking ---------- */
.as-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 2px; }
.as-paper { text-align: left; border: 2px solid var(--rule); border-radius: 8px; padding: 8px 10px; background: #fff; font-size: 14px; }
.as-paper:hover { border-color: var(--ink-3); }
.as-paper.on { border-color: var(--ink); background: var(--yellow); }
.as-paper b { display: block; }
.as-paper span { color: var(--ink-2); font-size: 13px; }
.as-qlist { border: 2px solid var(--rule); border-radius: 8px; max-height: 420px; overflow: auto; }
.as-q { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.as-q:last-child { border-bottom: 0; }
.as-q .qn { font-weight: 800; width: 44px; flex: none; }
.as-q .tp { flex: 1; min-width: 0; }
.as-q .mk { color: var(--ink-2); white-space: nowrap; }
.as-q input { width: 17px; height: 17px; accent-color: var(--ink); }
.as-q.used { background: #fbfaf6; }
.as-topics { columns: 2; column-gap: 24px; max-height: 340px; overflow: auto; border: 2px solid var(--rule); border-radius: 8px; padding: 6px 12px; }
.as-topics .as-check { break-inside: avoid; padding: 4px 0; font-size: 14px; }
.as-topics .strand { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 10px 0 2px; break-after: avoid; }
.as-topics .strand:first-child { margin-top: 4px; }

/* ---------- the chosen questions ---------- */
.as-chosen { margin: 0 -22px; border-top: 1px solid var(--rule); max-height: 52vh; overflow: auto; }
.as-chosen .as-q { padding: 9px 22px; }
.as-chosen .ix { width: 22px; color: var(--ink-3); font-weight: 700; flex: none; text-align: right; }
.as-chosen .from { display: block; color: var(--ink-2); font-size: 12px; }
.as-ib { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none; }
.as-ib:hover { background: var(--beige); color: var(--ink); }
.as-ib[disabled] { opacity: .25; pointer-events: none; }
.as-ib svg { width: 16px; height: 16px; }
.as-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 0; border-top: 2px solid var(--ink); font-weight: 800; }
.as-total .big { font-size: 22px; }

/* ---------- details page ---------- */
.as-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.as-fact { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 14px 16px; }
.as-fact .k { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.as-fact .v { font-size: 20px; font-weight: 800; margin-top: 4px; }
.as-fact .s { font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.as-code { font-size: 34px; font-weight: 900; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.as-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.as-pill { background: var(--beige); border-radius: 99px; padding: 4px 11px; font-size: 13px; font-weight: 700; }
.as-late { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.as-late .as-in { width: auto; height: 34px; font-size: 14px; }

/* ---------- question preview ---------- */
.as-modal-bg { position: fixed; inset: 0; background: rgba(27, 27, 27, .45); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto; }
.as-modal { background: #fff; border: 2px solid var(--ink); border-radius: 12px; width: 100%; max-width: 760px; padding: 26px 28px; }
.as-modal .q-stem { font-size: 17px; }
.as-part { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; }
.as-part .pl { display: flex; justify-content: space-between; gap: 12px; }
.as-part .ans { margin-top: 8px; font-size: 14px; background: var(--good-bg); border-radius: 6px; padding: 8px 12px; }
.as-part .ans b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; margin-right: 6px; }

/* ---------- sign in ---------- */
.as-auth { max-width: 440px; margin: 60px auto; }
.as-auth h1 { font-size: 28px; margin-bottom: 4px; }

.as-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; z-index: 50; }

@media (max-width: 1000px) {
  .as-grid { grid-template-columns: minmax(0, 1fr); }
  .as-sticky { position: static; }
  .as-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-opts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .as-wrap { padding: 0 16px; }
  .as-brand .sub, .as-who .role { display: none; }
  .as-topics { columns: 1; }
  .as-table .hide-sm { display: none; }
}
@media print { .as-top, .no-print { display: none !important; } body { background: #fff; } }

/* ---------- students: before starting, and after ---------- */
.as-rules { margin: 14px 0 0; padding-left: 20px; }
.as-rules li { margin: 6px 0; }
.as-done-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; margin: 0 auto 12px; border: 2px solid var(--ink); }

/* ---------- the exam ---------- */
.ex { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.ex-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 2px solid var(--ink); }
.ex-name { font-weight: 900; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; }
.ex-time { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ex-track { flex: 1; height: 12px; border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; background: var(--beige); }
#ex-bar { height: 100%; background: var(--green-d); transition: width 1s linear; }
#ex-bar.amber { background: var(--yellow-d); }
#ex-bar.red { background: var(--pink-d); }
#ex-clock { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 92px; }
.ex-top .btn.on { background: var(--yellow); }
.ex-body { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.ex-side { border-right: 2px solid var(--rule); padding: 20px; background: #faf8f3; }
.ex-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ex-n { height: 36px; border: 2px solid var(--ink-3); border-radius: 6px; font-weight: 800; font-size: 14px; background: #fff; position: relative; }
.ex-n.some { background: linear-gradient(135deg, var(--green) 50%, #fff 50%); }
.ex-n.all { background: var(--green); border-color: var(--ink); }
.ex-n.on { outline: 3px solid var(--ink); outline-offset: 1px; }
.ex-n.flag::after { content: ''; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink-d); border: 2px solid #fff; }
.ex-key { display: grid; gap: 6px; font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.ex-key span { display: flex; align-items: center; gap: 8px; }
.ex-key i { width: 14px; height: 14px; border-radius: 3px; border: 2px solid var(--ink-3); display: inline-block; }
.ex-key i.all { background: var(--green); border-color: var(--ink); }
.ex-key i.some { background: linear-gradient(135deg, var(--green) 50%, #fff 50%); }
.ex-key i.flag { background: var(--pink-d); border-radius: 50%; border-color: var(--pink-d); width: 10px; height: 10px; margin: 0 2px; }
.ex-main { padding: 28px 40px 120px; max-width: 900px; width: 100%; }
.ex-qhead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ex-qhead h2 { margin: 0; font-size: 24px; }
.ex-flag { margin-left: auto; text-decoration: none; }
.ex-part { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ex-part:first-of-type { border-top: 0; }
.ex-prompt { display: flex; justify-content: space-between; gap: 14px; font-size: 17px; margin-bottom: 12px; }
.ex-answer { margin-top: 6px; }
.ex-hint { margin-top: 12px; background: var(--yellow); border-radius: 8px; padding: 10px 14px; font-size: 15px; }
.ex-hint ol { margin: 8px 0 0; padding-left: 20px; }
.ex-foot { display: flex; justify-content: space-between; margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--ink); }
.as-calc { left: auto; right: 24px; bottom: 24px; width: 380px; border-radius: 14px; z-index: 30; }
@media (max-width: 800px) {
  .ex-body { grid-template-columns: 1fr; }
  .ex-side { border-right: 0; border-bottom: 2px solid var(--rule); }
  .ex-grid { grid-template-columns: repeat(10, 1fr); }
  .ex-main { padding: 20px 16px 100px; }
  .ex-name { display: none; }
  .as-calc { right: 0; left: 0; bottom: 0; width: auto; border-radius: 14px 14px 0 0; }
}
.as-left { font-weight: 800; color: var(--bad); font-size: 14px; }
.as-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .as-grid2 { grid-template-columns: minmax(0, 1fr); } }
.as-mk { display: inline-block; min-width: 64px; text-align: center; padding: 3px 8px; border-radius: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.as-mk.good { background: var(--good-bg); }
.as-mk.part { background: var(--yellow); }
.as-mk.bad { background: var(--bad-bg); }

/* ---------- results: question-level analysis ---------- */
.as-gbars { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; height: 76px; }
.as-gbars .gb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.as-gbars .bar { width: 22px; background: var(--lilac); border: 1.5px solid var(--ink); border-radius: 3px 3px 0 0; }
.as-gbars .n { font-weight: 800; }
.as-gbars .g { color: var(--ink-2); }
.as-pbar { height: 10px; background: var(--beige); border-radius: 99px; overflow: hidden; min-width: 80px; }
.as-pbar span { display: block; height: 100%; }
.as-pbar .good { background: var(--green-d); }
.as-pbar .part { background: var(--yellow-d); }
.as-pbar .bad { background: var(--pink-d); }
.as-qla td.good { background: var(--good-bg); }
.as-qla td.part { background: var(--yellow); }
.as-qla td.bad { background: var(--bad-bg); }
.as-topic { padding: 12px 0; border-top: 1px solid var(--rule); }
.as-topic:first-of-type { border-top: 0; padding-top: 0; }
button.as-pill.as-rec { background: #fff; border: 1.5px solid var(--ink); }
button.as-pill.as-rec:hover { background: var(--yellow); }
.as-gridwrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: 8px; }
.as-qla { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; width: 100%; }
.as-qla th, .as-qla td { border: 1px solid var(--rule); padding: 6px 7px; text-align: center; min-width: 32px; }
.as-qla thead th { background: var(--beige); font-weight: 800; cursor: help; }
.as-qla .who { text-align: left; position: sticky; left: 0; background: #fff; min-width: 150px; font-weight: 700; z-index: 1; }
.as-qla thead .who, .as-qla tfoot .who { background: var(--beige); }
.as-qla .who .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 11px; }
.as-qla .tot { font-weight: 800; background: #faf8f3; white-space: nowrap; }
.as-qla .none { color: var(--ink-3); text-align: left; }
.as-qla tfoot td { font-weight: 800; font-size: 12px; }

/* ---------- feedback sheets (printed two to a page of A4) ---------- */
.as-sheets { display: grid; gap: 16px; }
.sheet { background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 16px 18px; break-inside: avoid; page-break-inside: avoid; }
.sh-top { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
.sh-top span { display: block; font-size: 12px; color: var(--ink-2); }
.sh-name { font-size: 18px; }
.sh-score { text-align: right; }
.sh-score b { font-size: 22px; }
.sh-qs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.sh-q { width: 46px; border: 1.5px solid var(--ink); border-radius: 4px; text-align: center; font-size: 11px; line-height: 1.25; padding: 2px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sh-q .qn, .sh-q .mk { display: block; }
.sh-q .tk { display: block; font-size: 15px; font-weight: 900; }
.sh-q.good { background: var(--good-bg); } .sh-q.part { background: var(--yellow); } .sh-q.bad { background: var(--bad-bg); }
.sh-topics { columns: 2; column-gap: 18px; margin: 4px 0 10px; font-size: 12px; }
.sh-t { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px dotted var(--rule); break-inside: avoid; }
.sh-t .nm { flex: 1; min-width: 0; font-weight: 700; }
.sh-t .qq { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }
.sh-mark { font-size: 10.5px; padding: 0 4px; border-radius: 3px; border: 1px solid var(--ink-3); white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sh-t .mk { width: 40px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 3px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sh-mark.good, .sh-t .mk.good { background: var(--good-bg); } .sh-mark.part, .sh-t .mk.part { background: var(--yellow); } .sh-mark.bad, .sh-t .mk.bad { background: var(--bad-bg); }
.sh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; }
.sh-cols ol { margin: 4px 0 0; padding-left: 18px; }
.sh-cols li span { color: var(--ink-2); }
.sh-cols p { margin: 4px 0 0; }
.sh-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-top: 8px; }
.sh-note { font-size: 11px; color: var(--ink-2); }
.sh-lines span { display: block; height: 26px; border-bottom: 1px solid var(--ink-3); }
@media print {
  @page { size: A4; margin: 10mm; }
  .as-main { padding: 0; }
  .as-wrap { max-width: none; padding: 0; }
  .as-back, .as-head, .as-facts, .as-toast { display: none !important; }
  .as-sheets { gap: 0; }
  .sheet { min-height: 130mm; border-radius: 0; margin: 0 0 6mm; }
  .sh-topics { font-size: 11px; }
}