/* Sampling Arcade — shared activity design system (UI Pass 2)
   These rules are presentation-only: mathematical answers and progress never change here. */
:root {
  --activity-border:#bfd2c7;
  --activity-border-strong:#91b3a3;
  --activity-surface:#ffffff;
  --activity-soft:#f2f7f3;
  --activity-ink:#1a3f39;
  --activity-radius:18px;
  --activity-control-radius:11px;
  --activity-shadow:0 4px 18px rgba(22,63,52,.055);
}
.activity-page { color:var(--ink); }
.activity-page .activity-intro { margin-bottom:16px; }
.activity-page .activity-description { max-width:720px; line-height:1.6; }
.activity-page .activity-topic {
  border:1px solid #b9d8c6; background:#e3f2e9; color:#245d4c;
  border-radius:12px; padding:9px 14px; font-size:.77rem;
}
.activity-page .activity-scope {
  display:inline-flex; width:fit-content; max-width:100%; padding:8px 12px;
  margin-bottom:4px; border-radius:10px; background:#eaf4ee;
  border-color:#c6ddd0; font-weight:650; font-size:.8rem;
}
.activity-page .back-link { min-height:44px; text-underline-offset:3px; }
.activity-page .round-controls {
  margin:18px 0 10px; gap:15px; align-items:center;
}
.activity-page .round-progress progress { height:9px; }
.practice-guide {
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.35fr);
  gap:0; margin:17px 0 19px; border:1px solid #b8d5c5;
  border-left:4px solid #277b62; border-radius:14px;
  background:#eaf4ed; box-shadow:0 2px 8px rgba(23,69,48,.025);
}
.practice-guide-part { min-width:0; padding:13px 19px; }
.practice-guide-part + .practice-guide-part { border-left:1px solid #cadfd2; }
.practice-guide-label, .question-kicker, .ui-feedback-badge {
  display:block; font-size:.67rem; font-weight:850;
  letter-spacing:.1em; line-height:1.4; text-transform:uppercase;
}
.practice-guide-label { color:#216450; margin:0 0 6px; }
.practice-guide-copy { font-size:.85rem; line-height:1.55; color:#294b42; margin:0; }
.question-preamble { margin:20px 3px 14px; }
.question-kicker { color:#2c7660; }
.question-preamble-title { font-size:1.25rem; letter-spacing:-.025em; line-height:1.3; margin:5px 0 0; }
.activity-page .flash-overline,
.activity-page .cloze-panel>.eyebrow,
.activity-page .classification-panel>.eyebrow,
.activity-page .recall-panel>.eyebrow,
.activity-page .exam-workspace>.eyebrow,
.activity-page .sim-question>.eyebrow {
  color:#216b57; font-size:.67rem; font-weight:850; letter-spacing:.105em;
}
.activity-page :is(.cloze-panel,.classification-panel,.recall-panel,.exam-workspace,.sim-question,.sim-landing,.sim-report-head,.completed-screen) {
  background:var(--activity-surface); border:1px solid var(--activity-border);
  border-radius:var(--activity-radius); box-shadow:var(--activity-shadow);
}
.activity-page :is(.cloze-panel,.classification-panel,.recall-panel,.exam-workspace,.sim-question) {
  margin-top:12px; padding:clamp(20px,3.3vw,32px);
}
.activity-page :is(.cloze-title,.classification-title,.recall-title,.exam-heading,.sim-question-title) {
  font-size:clamp(1.3rem,2.7vw,1.82rem);
  line-height:1.32; letter-spacing:-.035em; margin:8px 0 21px;
}
.activity-page :is(.cloze-sentence,.classification-statement,.recall-definition,.exam-scenario,.sim-context) {
  background:#ecf5ef; color:#1a4036; border-left:4px solid #27816a;
  border-radius:11px; padding:clamp(17px,2.8vw,24px);
  font-size:clamp(1rem,2vw,1.17rem); line-height:1.7;
  font-weight:650; overflow-wrap:anywhere;
}
.activity-page .sim-task { color:#244b41; font-size:.95rem; }
.activity-page .game-settings {
  background:var(--activity-surface); border:1px solid var(--activity-border);
  box-shadow:var(--activity-shadow); border-radius:14px;
  padding:15px 18px; margin-top:15px; gap:14px;
}
.activity-page .game-settings-label,
.activity-page :is(.typed-label,.sim-field-label,.classroom-feedback-comment-label) {
  font-size:.85rem; font-weight:780; color:#254e42;
}
.activity-page :is(.game-select,.typed-input,.sim-number-input,.sim-draft-input,#reason-written) {
  color:#1b3932; background:#fff; border:1px solid #92b6a4;
  border-radius:var(--activity-control-radius); font-family:inherit;
  font-size:.95rem; min-height:48px;
}
.activity-page :is(.game-select,.typed-input,.sim-number-input,.sim-draft-input,#reason-written):focus-visible {
  outline:3px solid #83c3ab; outline-offset:2px; border-color:#267e61;
}
.activity-page :is(.btn,.option-button,.match-tile,.exam-choice,.exam-arrow) {
  border-radius:var(--activity-control-radius);
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.activity-page .btn {
  min-height:46px; font-size:.87rem; font-weight:760;
}
.activity-page .btn-primary { background:#156e5b; border-color:#156e5b; color:#fff; }
.activity-page .btn-primary:hover { background:#0f584b; border-color:#0f584b; color:#fff; }
.activity-page .btn-quiet { background:#f1f7f3; border-color:#b4cebf; color:#205647; }
.activity-page .btn-quiet:hover { background:#e3f0e8; border-color:#7eae96; }
.activity-page :is(.option-button,.match-tile,.exam-choice,.sim-check-row) {
  background:#fcfefd; border:1px solid #bcd1c6; color:#24443a;
}
.activity-page .term-tile { background:#e7f3eb; }
.activity-page :is(.option-button,.match-tile,.exam-choice):not(:disabled):hover {
  background:#ebf6ef; border-color:#528f74;
}
.activity-page .option-button.is-correct { background:#d9f1e3; border-color:#65a78a; color:#155640; }
.activity-page .option-button.is-incorrect { background:#fff0e7; border-color:#d3a183; color:#7a4330; }
.activity-page .match-tile.is-selected { background:#176d5b; color:#fff; border-color:#176d5b; }
.activity-page .exam-choice:has(input:checked),.activity-page .sim-check-row:has(input:checked) {
  background:#e2f1e8; border-color:#60a285;
}
.activity-page .exam-arrow { background:#edf7f0; color:#185e4b; }
.activity-page .exam-arrow:disabled { opacity:.38; }
.activity-page .sim-number-row,
.activity-page .sim-worked-row,
.activity-page .sim-choice,
.activity-page .sim-report-row,
.activity-page .sim-resume,
.activity-page .sim-target-panel {
  border:1px solid var(--activity-border); border-radius:14px;
  background:#fff; box-shadow:0 2px 10px rgba(17,53,39,.025);
}
.activity-page .sim-number-row { background:#f7faf7; }
.activity-page .sim-number-row .sim-field-help { line-height:1.55; }
.activity-page .sim-written-work { margin-top:18px; }
.activity-page .sim-paper-choices { gap:12px; }
.activity-page .flash-area { margin-top:16px; }
.activity-page .flashcard {
  border:1px solid #8ebaa4; background:#e3f2e9; border-radius:var(--activity-radius);
}
.activity-page .flashcard:hover { background:#daf0e2; }
.activity-page .flash-answer { border:1px solid #bacfc1; border-top:0; }
.ui-feedback {
  align-items:flex-start; gap:13px; padding:16px 19px; margin-top:20px;
  border-radius:14px; border:1px solid #b1cfbc; background:#e8f5eb; color:#1d5140;
}
.ui-feedback .icon-mark {
  width:30px; height:30px; min-width:30px; display:grid; place-items:center;
  border-radius:50%; background:#c9e8d5; color:#155740;
  font-family:inherit; font-size:1.1rem; line-height:1; font-weight:900;
}
.ui-feedback-body { min-width:0; flex:1; }
.ui-feedback-badge { color:#346e55; margin:0 0 4px; }
.ui-feedback .feedback-heading { font-size:1.02rem; line-height:1.4; color:inherit; margin:0; }
.ui-feedback p { margin:7px 0 0; font-size:.86rem; line-height:1.64; color:inherit; }
.ui-feedback.incorrect { border-color:#e2c49e; background:#fff5e8; color:#70451f; }
.ui-feedback.incorrect .icon-mark { background:#f3e0c2; color:#8a511f; }
.ui-feedback.incorrect .ui-feedback-badge { color:#835521; }
.ui-feedback.review { border-color:#b8cadc; background:#eff5fa; color:#284b66; }
.ui-feedback.review .icon-mark { background:#d8e6f3; color:#2e6485; }
.ui-feedback.review .ui-feedback-badge { color:#3e6684; }
.ui-feedback .feedback-contrast { border-top:1px solid currentColor; padding-top:12px; opacity:.9; }
.activity-page .next-row { margin-top:18px; }
.activity-page :is(.sim-written-review,.sim-feedback) .ui-feedback { margin-bottom:19px; }
.activity-page :is(.completed-screen,.sim-report-head) { padding:clamp(23px,4vw,37px); }
.activity-page .sim-model-list, .activity-page .exam-model-list { line-height:1.72; }
.activity-page .sim-hints { padding-block:9px; }
.activity-page .sim-hint-list { background:#edf5f8; border-left-color:#83a5c5; }
@media(max-width:580px) {
  .activity-page .activity-intro { margin-bottom:12px; }
  .activity-page .round-controls { margin:16px 0 10px; }
  .practice-guide { grid-template-columns:1fr; margin:15px 0 16px; }
  .practice-guide-part { padding:12px 14px; }
  .practice-guide-part + .practice-guide-part { border-left:0; border-top:1px solid #cadfd2; }
  .activity-page :is(.cloze-panel,.classification-panel,.recall-panel,.exam-workspace,.sim-question) { padding:20px 15px; }
  .activity-page :is(.cloze-sentence,.classification-statement,.recall-definition,.exam-scenario,.sim-context) { padding:16px 14px; }
  .activity-page .game-settings { padding:13px 14px; }
  .activity-page :is(.sim-form-actions,.sim-report-actions,.exam-buttons) .btn { max-width:100%; }
  .ui-feedback { padding:14px; gap:10px; }
  .ui-feedback .icon-mark { width:26px; height:26px; min-width:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .activity-page :is(.btn,.match-tile,.option-button,.exam-choice,.exam-arrow) { transition:none; }
}
@media print {
  .practice-guide { display:none!important; }
  .activity-page :is(.cloze-panel,.classification-panel,.recall-panel,.exam-workspace,.sim-question,.sim-report-head) {
    background:#fff; box-shadow:none; border-color:#bbb;
  }
  .ui-feedback { box-shadow:none; border-color:#888!important; background:#fff!important; color:#111!important; }
}


/* UI Pass 3 — accessibility and viewport safeguards.
   Widths, focus and touch targets apply across all ten activities and reports. */
#main { scroll-margin-top:94px; }
#home-heading,#view-heading,#sim-question-heading,#exam-heading,
.cloze-title,.classification-title,.recall-title,.completed-screen .completion-title {
  scroll-margin-top:110px;
}
.nav-group > a { min-height:44px; display:flex; align-items:center; }
.nav-group-description { color:#526c61; }
.site-nav > .nav-primary-link,.activities-trigger,.mobile-menu-toggle { min-height:44px; }
.activity-page :is(button,.btn,a,select,input,textarea):focus-visible,
.page-home :is(button,.btn,a,select,input,textarea):focus-visible,
.site-header :is(button,summary,a):focus-visible,
.skip-link:focus-visible {
  outline:3px solid #b47719;
  outline-offset:3px;
}
.activity-page :is(.sim-revision-link,.text-button,.back-link) { min-height:44px; }
.activity-page .exam-arrow { min-width:44px; min-height:44px; }
.classroom-feedback-choice,.sim-check-row,.sim-level-choice,.exam-choice { min-height:44px; }
.activity-page :is(.exam-workspace,.sim-question,.sim-report-row,.sim-model-text,.sim-preserved-text,
.sim-context,.classification-statement,.cloze-sentence,.recall-definition,.exam-scenario,
.match-tile,.exam-choice,.sim-worked-row,.sim-draft-compare,.game-settings,
.typed-form,.sim-number-row) {
  min-width:0;
  overflow-wrap:anywhere;
}
.activity-page .sim-model-text,.activity-page .sim-preserved-text { white-space:pre-wrap; }
.activity-page .sim-form-actions,.activity-page .next-row,
.activity-page .exam-buttons,.activity-page .sim-inline-actions { min-width:0; flex-wrap:wrap; }
.activity-page input:where([type="text"],[type="number"]),
.activity-page textarea,.activity-page select { max-width:100%; }
.activity-page .sim-number-input[aria-invalid="true"] {
  border-color:#a7472b; background:#fff7f2;
  box-shadow:0 0 0 1px #a7472b;
}
.activity-page .ui-feedback:focus { outline:3px solid #b47719; outline-offset:3px; }
@media(max-width:760px){
  #main,#home-heading,#view-heading,#sim-question-heading,#exam-heading,
  .cloze-title,.classification-title,.recall-title { scroll-margin-top:22px; }
}
@media(max-width:580px){
  .activity-page .sim-report-row,.activity-page .sim-draft-compare { padding:16px 14px; }
  .activity-page .sim-report-row-head { align-items:flex-start; }
  .activity-page .sim-form-actions > .btn,
  .activity-page .next-row > .btn { min-height:46px; }
  .activity-page .flash-front,.activity-page .exam-step-copy { overflow-wrap:anywhere; }
  .activity-page .flash-detail-item { min-width:0; }
}
@media(prefers-reduced-motion:reduce){
  html { scroll-behavior:auto; }
  .activities-trigger .nav-chevron,.game-card,.hero .btn,
  .activity-page .btn,.activity-page .match-tile,.activity-page .option-button,
  .activity-page .flashcard { transition:none!important; transform:none!important; }
}
@media print {
  .site-header,.site-footer,.skip-link,.activity-page .text-button,
  .activity-page .btn,.activity-page .exam-step-actions { display:none!important; }
  .ui-feedback { background:#fff!important; box-shadow:none!important; color:#111!important; }
  .ui-feedback-badge { color:#111!important; }
  .activity-page :is(.exam-workspace,.sim-question,.sim-report-row) { break-inside:avoid; }
}

/* Site-wide audit: present assessment boundaries plainly, without a new card. */
.completed-screen .completion-credit-note{max-width:64ch;margin:9px auto 0;color:#466154;font-size:.83rem;line-height:1.6;text-wrap:pretty}