/* MathFlu visual system. Shared by the live quiz and parent dashboards.
   No fonts, image requests, build step, or changes to the learning engines. */
:root {
  color-scheme: light;
  --mk-ink: #182c49;
  --mk-muted: #5d6d83;
  --mk-blue: #225de5;
  --mk-blue-dark: #1648bc;
  --mk-paper: #f3f6fb;
  --mk-line: #dce4ef;
  --mk-yellow: #ffce4a;
  --fluency-slow: #f9a825;
  --fluency-incorrect: #616161;
  --fluency-flagged: #ff9800;
  --mk-radius: 18px;
  --mk-shadow: 0 8px 28px #233d6510;
}
body.mk-app {
  margin: 0;
  color: var(--mk-ink);
  background: var(--mk-paper);
  font: 16px/1.5 "Avenir Next", Avenir, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mk-app *, .mk-app *::before, .mk-app *::after { box-sizing: border-box; }
.mk-app [hidden], .mk-app .hidden { display: none !important; }
.mk-app h1, .mk-app h2, .mk-app h3, .mk-app h4 { color: var(--mk-ink); line-height: 1.25; }
.mk-app button, .mk-app input, .mk-app select, .mk-app textarea { font-family: inherit; }
.mk-app button {
  border: 1px solid var(--mk-line); border-radius: 9px;
  padding: 9px 14px; background: #fff; color: var(--mk-ink);
  font-size: .875rem; font-weight: 600; line-height: 1.35;
  cursor: pointer; touch-action: manipulation;
}
.mk-app button:hover { background: #edf3ff; border-color: #a7bde8; }
.mk-app button:disabled { opacity: .48; cursor: not-allowed; }
.mk-app :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #e5a900; outline-offset: 3px;
}
.mk-app :where(input[type="text"], input[type="number"], input[type="search"], select, textarea) {
  border: 1px solid #bac9dd; border-radius: 8px; padding: 8px 10px;
  background: #fff; color: var(--mk-ink); font-size: .9375rem; max-width: 100%;
}
.mk-app input[type="checkbox"], .mk-app input[type="radio"], .mk-app input[type="range"] { accent-color: var(--mk-blue); }
.mk-app a { color: var(--mk-blue); }
.mk-app .muted { color: var(--mk-muted); }
.mk-header {
  position: relative;
  min-height: 78px; background: #fff; border-bottom: 1px solid var(--mk-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px max(24px, calc((100vw - 1320px) / 2)); gap: 20px;
}
body.mk-quiz .mk-header,
body.mk-analysis .mk-header,
body.mk-fluency .mk-header {
  /* FoF + Math Flu sit on the same left edge as Analysis and Fluency headings. */
  padding: 16px max(24px, calc((100vw - min(100vw, max(1368px, 80vw))) / 2 + 24px));
}
.mk-header-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fof-local-slot { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fof-local {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #d3dae3; font-size: 18px; font-weight: 700;
  letter-spacing: -.06em; cursor: default; user-select: none;
}
.mk-banner-tagline {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  margin: 0; max-width: min(28rem, calc(100% - 28rem));
  font-size: 1.15rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.25;
  text-align: center; color: var(--mk-ink);
}
.mk-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--mk-ink) !important; text-decoration: none; }
.mk-brand-mark {
  display: grid; place-items: center; width: 39px; height: 39px;
  background: var(--mk-blue); color: white; border-radius: 12px;
  font-size: 28px; font-weight: 700; line-height: 1; transform: rotate(-7deg);
}
.mk-brand-name { font-size: 1.5rem; letter-spacing: -.06em; font-weight: 800; }
.mk-brand-name span { color: var(--mk-blue); }
.mk-nav, .mk-header .navigation { display: flex; align-items: center; gap: 5px; margin: 0; }
.mk-nav a, .mk-nav > span, .mk-header .navigation button {
  padding: 9px 15px; margin: 0; border: 0; border-radius: 8px;
  font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: transparent; color: var(--mk-muted);
}
.mk-nav [aria-current="page"] { color: var(--mk-blue); background: #eaf0ff; }
@media (hover: hover) {
  .mk-nav a:hover, .mk-header .navigation button:hover { background: #f0f4fa; color: var(--mk-blue); }
}
.mk-page { max-width: 1368px; padding: 28px 24px 64px; margin: auto; }
body.mk-analysis .mk-page,
body.mk-fluency .mk-page { max-width: max(1368px, 80%); }
.mk-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 24px; }
.mk-page-title,
.mk-page-heading h1 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.25;
  margin: 3px 0 0;
}
.mk-analysis .mk-page-heading h1 { margin-top: 0; }
.mk-eyebrow { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mk-muted); }
.mk-page-note { font-size: .9375rem; color: var(--mk-muted); margin: 8px 0 0; }
.mk-audience { border: 1px solid var(--mk-line); border-radius: 99px; padding: 7px 12px; font-size: .75rem; color: var(--mk-muted); white-space: nowrap; }
.mk-footer { color: var(--mk-muted); font-size: .75rem; text-align: center; margin: 32px 0 8px; }

/* Learner surface: confident type, a graph-paper canvas, and tactile controls. */
body.mk-quiz { background-image: radial-gradient(#c6d3e4 1px, transparent 1px); background-size: 24px 24px; }
.mk-quiz .wrap { max-width: 790px; padding: 38px 24px 48px; }
.mk-quiz .card { border: 1px solid var(--mk-line); border-radius: 24px; padding: 30px; box-shadow: var(--mk-shadow); margin-top: 16px; }
.mk-quiz #anchor-landing { position: relative; border-top: 5px solid var(--mk-yellow); text-align: left; }
.mk-quiz #anchor-landing > p:first-child { font-weight: 700; font-size: 1.3rem !important; margin-bottom: 22px; }
.mk-quiz .landing-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mk-quiz .landing-names .landing-name {
  display: flex; align-items: center; gap: 14px; min-height: 86px; width: 100%;
  margin: 0; padding: 18px; background: #f0f5ff; color: var(--mk-ink);
  border: 1px solid #d8e3f7; border-bottom: 4px solid #c3d3f0;
  border-radius: 16px; font-size: 1.2rem; text-align: left; font-weight: 700;
}
.mk-quiz .landing-learner { position: relative; min-width: 0; }
.mk-quiz .landing-names .landing-name { min-width: 0; padding-left: 76px; }
.mk-quiz .landing-learner:nth-child(4n+2) .landing-name { background: #fff9e8; border-color: #eddfb6; }
.mk-quiz .landing-learner:nth-child(4n+3) .landing-name { background: #eff9f6; border-color: #c9e2d9; }
.mk-quiz .learner-avatar { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; margin: 0; padding: 0; background: #dce7ff; border: 1px solid #c3d3f0; border-radius: 13px; font-size: 1.8rem; }
.mk-quiz .learner-avatar:hover { background: #c9d9ff; }
#learner-avatar-dialog { width: min(380px, calc(100% - 32px)); box-sizing: border-box; max-height: calc(100% - 32px); overflow: auto; border: 1px solid #c3d3f0; border-radius: 18px; padding: 22px; color: var(--mk-ink); }
#learner-avatar-dialog::backdrop { background: #15243b66; }
#learner-avatar-dialog h2 { margin: 0 0 8px; font-size: 1.2rem; }
.learner-avatar-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mk-quiz .learner-avatar-options button { min-width: 0; height: 56px; margin: 0; padding: 4px; font-size: 2rem; background: #f0f5ff; border: 2px solid transparent; border-radius: 12px; }
.mk-quiz .learner-avatar-options button[aria-pressed=true] { border-color: var(--mk-blue); background: #dce7ff; }
#learner-avatar-status { color: #b3261e; font-size: .9rem; }
.mk-quiz .landing-names .landing-name:hover { border-color: var(--mk-blue); background: #e7efff; }
.mk-quiz button { font-size: .9375rem; }
.mk-quiz button.secondary { background: #eef2f8; color: #42556e; border: 1px solid var(--mk-line); }
.mk-quiz :is(#anchor-start, #anchor-practice-ready, #anchor-practice-skip, #anchor-pause-continue, #anchor-do-another, #anchor-continue-20, #anchor-correct-continue, #anchor-enter, #anchor-quit-save) { color: white; background: var(--mk-blue); border-color: var(--mk-blue); }
.mk-quiz :is(#anchor-start, #anchor-do-another):hover { background: var(--mk-blue-dark); }
.mk-quiz #anchor-start { min-width: 170px; font-size: 1.15rem; padding: 13px 28px; box-shadow: 0 4px 0 #1646a9; }
.mk-quiz #anchor-kid-modal { max-width: none; margin-top: 14px; border: 1px solid var(--mk-line); padding: 24px; border-radius: 24px; box-shadow: var(--mk-shadow); }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) #anchor-landing { padding: 16px 20px; }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) #anchor-landing > p:first-child { font-size: .9375rem !important; margin-bottom: 10px; }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) .landing-names { display: flex; justify-content: flex-start; gap: 8px; margin: 0; }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) .landing-name { min-width: 0; width: auto; min-height: 40px; padding: 8px 13px; font-size: .9375rem; border-radius: 9px; border-bottom-width: 2px; box-shadow: none; }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) .learner-avatar { display: none; }
.mk-quiz .wrap:has(#anchor-kid-modal:not(.hidden)) #landing-status:empty { min-height: 0 !important; margin: 0; }
.mk-quiz #kid-modal-title { font-size: 1.4rem; letter-spacing: -.025em; margin: 0 0 20px; text-align: left; }
.mk-quiz #kid-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-quiz .kid-mode-row { margin: 0; min-width: 0; }
.mk-quiz .kid-mode-row:has(#kid-mode-auto), .mk-quiz .kid-mode-resume-row, .mk-quiz #kid-mode-quick { grid-column: 1 / -1; }
.mk-quiz .kid-mode-btn { background: #f1f5fb !important; color: var(--mk-ink) !important; border: 1px solid var(--mk-line); border-bottom-width: 3px; min-height: 52px; border-radius: 12px; text-align: left; padding: 12px 40px 12px 16px; }
.mk-quiz #kid-mode-auto { background: var(--mk-blue) !important; color: white !important; border-color: #1d4bb3; font-size: 1.2rem; min-height: 66px; }
.mk-quiz #kid-mode-auto::after { content: "Pick my next practice →" / ""; display: block; font-size: .8125rem; font-weight: 500; opacity: .85; margin-top: 3px; }
.mk-quiz #kid-mode-auto.auto-starter::after { visibility: hidden; }
.mk-quiz #kid-mode-feast { background: #fff5d6 !important; border-color: #efd68e; }
.mk-quiz .kid-mode-btn:hover { border-color: #86a3d2; }
.mk-quiz .kid-mode-tip { border: 1px solid #bdcce1; color: #4f6585; background: #fff; width: 25px; height: 25px; font-size: .8125rem; padding: 0; right: 10px; }
.mk-quiz #kid-mode-quick { border-top: 1px solid var(--mk-line); margin-top: 8px; padding-top: 16px; }
.mk-quiz .kid-quick-quiz-label { justify-content: flex-start; margin-bottom: 10px; min-height: 28px; }
.mk-quiz .kid-quick-op { margin: 0; padding: 12px; font-size: 1.6rem; color: var(--mk-blue); background: #eaf0ff; border-color: #cedcfb; }
.mk-quiz .setup-intro { margin: 0 0 18px; }
.mk-quiz .setup-section { padding: 18px; border-color: var(--mk-line); border-radius: 14px; background: #fbfcff; }
.mk-quiz .setup-section > h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px; color: var(--mk-muted); }
.mk-quiz .setup-advanced { background: #f6f8fc; border-color: var(--mk-line); border-radius: 12px; }
.mk-quiz .setup-advanced > summary { padding: 14px; }
.mk-quiz #anchor-summary { border-top: 5px solid var(--mk-yellow); }
.mk-quiz #anchor-summary-title { font-size: 1.7rem; letter-spacing: -.04em; margin-top: 0; }
.mk-quiz #anchor-fluency-readout { color: var(--mk-blue); }
.mk-quiz #anchor-save-box { border: 1px solid var(--mk-line); border-radius: 12px; background: #f6f8fc; margin: 16px 0; }
.mk-quiz #anchor-save-box:has(> #anchor-save-details.hidden):has(> #anchor-audio-status.hidden) { display: none; }
.mk-quiz #anchor-audio-status { padding: 0 14px 12px; }
.mk-quiz #anchor-audio-details > summary { cursor: pointer; font-weight: 600; }
.mk-quiz #anchor-save-details > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
.mk-quiz #anchor-save-details > div { padding: 0 14px 4px; }
.mk-quiz #anchor-quiz { --quiz-card-padding: 30px; border-radius: 26px; padding: var(--quiz-card-padding); }
.mk-quiz #anchor-problem { font-weight: 750; font-size: 4rem; letter-spacing: -.02em; }
.mk-quiz #anchor-problem .log-base { font-size: 0.55em; line-height: 1; position: relative; top: 0.28em; }
.mk-quiz #anchor-answer { border: 2px solid #a5bee9; border-radius: 15px; height: 66px; background: #f5f8ff; font-weight: 650; }
.mk-quiz #anchor-go { background: var(--mk-blue); color: #fff; border-radius: 28px; box-shadow: 0 7px 0 #163da0, 0 14px 24px #235de527; }
.mk-quiz .keypad { max-width: 350px; gap: 10px; }
.mk-quiz #anchor-keypad button { margin: 0; background: #f4f7fc; border: 1px solid #d4dfed; border-bottom: 4px solid #c4d1e4; color: var(--mk-ink); font-size: 1.65rem; border-radius: 13px; }
.mk-quiz #anchor-keypad button.op { color: var(--mk-blue); background: #e4edff; }
.mk-quiz #anchor-keypad button:active { transform: translateY(2px); border-bottom-width: 2px; }
.mk-quiz button.skipflag { background: #fff3d8; color: #895300; border-color: #e6d3a8; }
.mk-quiz button.flagprev { background: #e8f5f1; color: #21644f; border-color: #bddbce; }
.mk-quiz button.lightbulb { background: #fff2bf; border-color: #e7cf7b; }
/* Keep the bulb's slot during answer feedback so adjacent controls never reflow. */
.mk-quiz #anchor-lightbulb.hidden { display: inline-block !important; visibility: hidden; pointer-events: none; }
.mk-quiz.in-quiz .mk-banner-tagline, .mk-quiz.in-quiz .mk-nav, .mk-quiz.in-quiz .mk-footer,
.mk-quiz.in-quiz .fun-mode-setup { display: none; }
.mk-quiz .more-quiz-settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 8px 0; }
.mk-quiz .feedback-delay-revert { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: 0 0 0 4px; padding: 0; vertical-align: middle; }
.mk-quiz.in-quiz .mk-header { min-height: 58px; padding-top: 9px; padding-bottom: 9px; }
.mk-quiz.in-quiz .wrap { max-width: 700px; padding-top: 16px; }
.mk-quiz #anchor-quit-card, .mk-quiz #kid-choice-tip-card { border: 1px solid var(--mk-line); border-radius: 22px; box-shadow: 0 20px 90px #142b4c33; }

/* Parent workspace: quiet surfaces and visible, compact controls. */
.mk-parent #file-upload-section { border: 1px solid var(--mk-line); background: #fff; border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.mk-parent #choose-load-file, .mk-parent #import-file { background: var(--mk-blue); color: white; border: 1px solid var(--mk-blue); padding: 9px 14px; border-radius: 8px; }
.mk-parent #revert-import { border-radius: 8px; }
.mk-parent #refresh-loaded-file { background: transparent; color: var(--mk-muted); border: 1px solid var(--mk-line); padding: 8px 12px; border-radius: 8px; }
.mk-parent #analysis-session-details > summary { display: list-item; }
.mk-parent .session-summary-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; vertical-align: middle; }
.mk-parent .session-summary-selected { color: var(--mk-muted); }
.mk-parent .problem-matrix-title { color: inherit; }
.mk-parent .analysis-detail, .mk-parent details.settings-box { border: 1px solid var(--mk-line); background: #fff; border-radius: 12px; margin: 12px 0; }
.mk-parent .analysis-detail > summary, .mk-parent details.settings-box > summary { color: var(--mk-ink); background: #fff; border-radius: 12px; padding: 15px 18px; font-size: .9375rem; font-weight: 600; }
.mk-parent .analysis-section > summary { font-size: 20px; font-weight: 700; line-height: 1.2; }
.mk-parent .analysis-detail[open] > summary { border-radius: 12px 12px 0 0; background: #f9fbff; border-bottom: 1px solid var(--mk-line); }
.mk-parent #analysis-problem-matrix .visualization-container { margin-top: 0; }
.mk-parent .analysis-problem-matrix-body { padding: 12px 14px 16px; }
.mk-parent .session-expand-toggle { color: var(--mk-muted); }
.mk-parent .session-expand-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.mk-parent .session-expand-slider {
  position: relative;
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #c5d0e0;
}
.mk-parent .session-expand-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px #182c4940;
  transition: transform .15s ease;
}
.mk-parent .session-expand-toggle input[type="checkbox"]:checked + .session-expand-slider { background: var(--mk-blue); }
.mk-parent .session-expand-toggle input[type="checkbox"]:checked + .session-expand-slider::after { transform: translateX(14px); }
.mk-parent .session-expand-toggle:hover { background: transparent; color: var(--mk-ink); }
.mk-parent .analysis-detail:not([open]) > .analysis-detail-body { display: none; }
.mk-parent .analysis-detail-body { padding: 14px 18px; }
.mk-parent .control-element { font-size: .875rem; line-height: 1.6; }
.mk-parent #controls { line-height: 2.4; }
.mk-parent .file-load-line button, .mk-parent .analysis-controls-actions button { font-size: .875rem; border-radius: 8px; padding: 8px 12px; }
.mk-parent .session-org-sidebar { background: #f6f8fc; border-color: var(--mk-line); }
.mk-parent .session-org-block h4 { text-transform: uppercase; letter-spacing: .06em; font-size: .75rem; color: var(--mk-muted); }
.mk-analysis .session-org-block h4 { color: #2c3440; }
.mk-analysis .session-summary-selected,
.mk-analysis .session-expand-toggle { color: #22272f; }
.mk-analysis .session-org-list label.session-type-disabled { color: #c5ccd6; }
.mk-parent .session-mode-btn.is-active { background: #e9f0ff; color: var(--mk-blue); border-color: #b0c7f4; }
.mk-parent .session-tag {
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
}
.mk-parent .session-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--mk-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.mk-parent .session-tag button:hover {
  background: #d8e2f2;
  border-color: transparent;
  color: var(--mk-ink);
}
.mk-parent .session-table { font-size: .8125rem; }
.mk-parent .session-table-wrap { display: block; width: 100%; }
.mk-parent .session-table { min-width: 100%; }
.mk-parent .session-table.session-table-sized { min-width: 0; }
.mk-parent .session-table th { background: #f0f4fa; color: #526582; }
.mk-parent .session-col-label { display: block; padding-right: 30px; }
.mk-parent .session-col-sort { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; font-size: 11px; line-height: 1; background: transparent; }
.mk-parent .session-table tbody tr:hover { background: #f1f6ff; }
.mk-parent .visualization-container { margin-top: 20px; gap: 20px; }
.mk-parent .heatmap-wrapper { min-width: 0; background: #fff; padding: 18px; border: 1px solid var(--mk-line); border-radius: 16px; box-shadow: var(--mk-shadow); }
.mk-parent .threshold-plot-panel { border-color: var(--mk-line); border-radius: 10px; }
.mk-parent .analysis-summary-row .analysis-detail { margin: 0; }
.mk-parent .analysis-summary-row .analysis-detail > summary { padding: 10px 12px; }
.mk-parent .problem-list-wrapper, .mk-parent #sequence-controls { border-color: var(--mk-line); border-radius: 12px; background: #fff; }
.mk-parent .problem-list-header { background: #f2f6fc; border-color: var(--mk-line); }
.mk-parent .problem-list-wrapper { width: 270px; max-width: 100%; min-width: 0; transition: box-shadow .3s ease, border-color .3s ease; }
.mk-parent .problem-list-wrapper .sort-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.mk-parent .problem-list-wrapper .sort-btn { padding: 5px 7px; font-size: .75rem; }
.mk-parent .problem-list-scale { font-size: .75rem; color: var(--mk-muted); margin: 10px 0 0; }
.mk-parent .problem-item { overflow-wrap: anywhere; }
.mk-parent .problem-main { column-gap: 10px; }
.mk-parent .problem-text { min-width: 0; }
.mk-parent .problem-end { flex-shrink: 0; }
.mk-parent .problem-status { flex-shrink: 0; white-space: nowrap; }
.mk-parent .problem-answers { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mk-parent .problem-answers > span { white-space: nowrap; }
.mk-parent .time-value { min-width: 3.5em; font-variant-numeric: tabular-nums; }
.mk-parent .time-bar-container { min-width: 0; max-width: none; }
.mk-parent .problem-list-wrapper .flag-edit-toggle, .mk-parent .problem-list-wrapper .flag-close-btn { padding: 5px 8px; font-size: .75rem; }
.mk-parent .problem-list-wrapper .flag-edit-section.expanded { max-height: none; }
.mk-parent #sequence-controls .seq-header { padding: 12px; }
.mk-parent .sort-btn.active { background: var(--mk-blue); color: white; }
.mk-parent .global-controls { box-shadow: none; margin-bottom: 0; padding: 10px 18px 18px; }
.mk-parent .controls-grid label { font-size: .875rem; color: var(--mk-muted); }
.mk-parent .controls-grid input, .mk-parent .controls-grid select { padding: 9px; border: 1px solid #bdcbe0; border-radius: 8px; }
.mk-parent .settings-box .settings-note { font-size: .8125rem; color: var(--mk-muted); }
.mk-parent .status-legend { background: transparent !important; padding: 14px 0 !important; border: 0 !important; font-size: .8125rem; color: var(--mk-muted); gap: 12px 20px !important; }
.mk-parent .legend-item { display: inline-flex; align-items: center; white-space: nowrap; }
.mk-fluency .legend-color.blue { background: #2873d2; }
.mk-fluency .legend-color.green { background: #a9e4c7; border: 1px solid #85cfa9; }
.mk-fluency .legend-color.yellow { background: #ffe49a; border: 1px solid #edcb6c; }
.mk-fluency .legend-color.status-red { background: #ffbdb4; border: 1px solid #ed9f95; }
.mk-fluency .legend-color.status-gray { background: #8e9bae; }
.mk-parent .fluency-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-parent .fo-card { padding: 20px; border-color: var(--mk-line); box-shadow: none; border-radius: 16px; }
.mk-parent .fo-title { font-size: 1.05rem; }
.mk-parent .fo-pct { font-size: 1.75rem; color: var(--mk-blue); letter-spacing: -.05em; }
.mk-parent .fo-chips { gap: 7px; }
.mk-parent .fo-chip { font-size: .75rem; padding: 5px 8px; background: #f6f8fc; border-color: var(--mk-line); }
.mk-parent .fo-chip > span:last-child { color: var(--mk-muted) !important; }
.mk-parent .fo-row-label { color: var(--mk-muted); font-size: .75rem; }
.mk-parent .fo-note { color: var(--mk-muted); font-size: .8125rem; }
.mk-operation-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 18px; }
.mk-operation-nav a { border: 1px solid var(--mk-line); background: #fff; border-radius: 99px; padding: 9px 17px; text-decoration: none; font-size: .875rem; font-weight: 600; }
.mk-operation-nav a:hover { border-color: var(--mk-blue); background: #eaf0ff; }
.mk-parent .operation-section { border: 1px solid var(--mk-line); padding: 26px; border-radius: 20px; box-shadow: var(--mk-shadow); scroll-margin-top: 20px; }
.mk-parent .operation-title { font-size: 1.4rem; letter-spacing: -.025em; }
.mk-parent .operation-header { padding-bottom: 20px; border-bottom: 1px solid var(--mk-line); align-items: flex-start; }
.mk-parent .fluency-percentage { flex-wrap: wrap; gap: 10px 15px; }
.mk-parent .fluency-percentage-value { font-size: 2rem; letter-spacing: -.04em; }
.mk-parent .fluency-progress-bar { width: 110px; height: 8px; }
.mk-parent .fluency-percentage-caption { font-size: .875rem; }
.mk-parent .fluency-tried { font-size: .75rem; }
.mk-parent .charts-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mk-parent .chart-card { border: 0; background: #f7f9fc; border-radius: 14px; padding: 18px; min-width: 0; }
.mk-parent .chart-card h4 { font-size: .9375rem; color: var(--mk-ink); margin-bottom: 6px; }
.mk-chart-note { color: var(--mk-muted); font-size: .75rem; margin: 0 0 14px; }
.mk-parent .summary-stats { margin-top: 20px; gap: 20px 28px; }
.mk-parent .stat-item { text-align: left; }
.mk-parent .stat-value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.mk-parent .stat-label { font-size: .75rem; color: var(--mk-muted); }
.mk-parent .problem-list-section { border: 1px solid #d5e0f1; border-radius: 12px; overflow: visible; }
.mk-parent .problem-list-section .problem-list-header { padding: 13px 16px; border-radius: 12px 12px 0 0; gap: 10px; }
.mk-parent .problem-list-section h4 { font-size: .9375rem; }
.mk-parent .problem-list-clear-overrides { font-size: .75rem; }
.mk-parent .problem-item { font-size: .9375rem; padding: 10px 8px; border-radius: 8px; }
.mk-parent .no-data-message { font-size: .875rem; color: var(--mk-muted); font-style: normal; grid-column: 1 / -1; padding: 30px 16px; }
.mk-parent .dialog-content { border-radius: 20px; padding: 28px; box-shadow: 0 20px 90px #142b4c33; max-height: 90dvh; overflow-y: auto; }
.mk-parent .dialog-content h3 { font-size: 1.35rem; }
.mk-parent .btn-save { background: var(--mk-blue); color: #fff; }

/* Native fact maps: actual cells, usable without Plotly or a network request. */
.mk-parent .fluency-plot { min-height: 0; overflow-x: auto; }
.fact-matrix { display: grid; gap: 4px; grid-template-columns: 24px repeat(var(--fact-columns), minmax(28px, 1fr)); min-width: max-content; }
.fact-axis { display: grid; place-items: center; font-size: .75rem; font-weight: 650; color: #5a6d88; }
.mk-app .fact-cell { position: relative; min-width: 28px; width: 100%; aspect-ratio: 1; min-height: 28px; margin: 0; padding: 0; border: 1px solid #dce3ed; border-radius: 5px; font-size: .75rem; line-height: 1; font-weight: 700; }
.fact-cell.nodata { background: #eef1f6; color: #8995a5; }
.fact-cell.outside { border: 0; background: transparent; }
.mk-app .fact-cell.blue { background: #2873d2; color: white; border-color: #2166be; }
.mk-app .fact-cell.green { background: #a9e4c7; color: #16513c; border-color: #85cfa9; }
.mk-app .fact-cell.yellow { background: #ffe49a; color: #694b08; border-color: #edcb6c; }
.mk-app .fact-cell.red { background: #ffbdb4; color: #8a2d29; border-color: #ed9f95; }
.mk-app .fact-cell.gray { background: #8e9bae; color: #fff; border-color: #7d8ba0; }
.mk-app button.fact-cell:hover { outline: 2px solid var(--mk-ink); outline-offset: 1px; }
.fact-cell.recheck { box-shadow: inset 0 0 0 2px #225de5; }
.fact-cell.manual-override::after { content: "*"; position: absolute; top: 1px; right: 3px; font-size: 12px; }
.fact-axis-note { font-size: .75rem; color: var(--mk-muted); margin: 10px 0 0; }
.fact-list-fallback { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.fact-list-fallback .fact-cell { aspect-ratio: auto; padding: 12px 6px; }

/* The classic quiz remains reachable through the established dashboard links. */
.mk-legacy #container.quiz-container { max-width: 740px; margin: 32px auto; padding: 30px; border: 1px solid var(--mk-line); border-radius: 22px; box-shadow: var(--mk-shadow); }
.mk-legacy .welcome { color: var(--mk-ink); font-weight: 700; letter-spacing: -.04em; }
.mk-legacy button.btn { border-radius: 10px; padding: 12px 18px; font-size: 1rem; }
.mk-legacy .btn-primary, .mk-legacy .btn-submit { background: var(--mk-blue); color: white; }
.mk-legacy .btn-clear { background: #fff0ed; color: #972f25; }
.mk-legacy .btn-download { background: #eaf1ff; color: var(--mk-blue); }
.mk-legacy .problem { font-weight: 700; color: var(--mk-ink); }

@media (max-width: 1040px) {
  .mk-banner-tagline {
    position: static; transform: none; flex: 1 0 100%; max-width: none; order: 3;
    font-size: 1.05rem;
  }
  .mk-header:has(.mk-banner-tagline) { flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 600px) {
  .mk-header { padding: 13px 16px; gap: 12px; flex-wrap: wrap; }
  .mk-brand-name { font-size: 1.3rem; }
  .mk-brand-mark { width: 33px; height: 33px; font-size: 24px; border-radius: 10px; }
  .mk-nav a, .mk-nav > span, .mk-header .navigation button { padding: 8px 10px; font-size: .8125rem; }
  .mk-page { padding: 24px 14px 40px; }
  .mk-page-heading { margin-bottom: 20px; }
  .mk-audience { display: none; }
  .mk-quiz .wrap { padding: 26px 16px; }
  .mk-quiz .card, .mk-quiz #anchor-kid-modal { padding: 20px; border-radius: 18px; }
  .mk-quiz .landing-names { gap: 10px; }
  .mk-quiz .landing-names .landing-name { padding: 13px 10px; gap: 8px; font-size: 1rem; min-height: 76px; }
  .mk-quiz .landing-names .landing-name { padding-left: 60px; }
  .mk-quiz .learner-avatar { left: 8px; }
  .mk-quiz #kid-mode-options { gap: 8px; }
  .mk-quiz .kid-mode-btn { font-size: .875rem; padding-left: 10px; }
  .mk-parent .operation-section { padding: 16px; border-radius: 16px; }
  .mk-parent .chart-card { padding: 12px; }
  .mk-parent .analysis-detail-body { padding: 12px; }
  .mk-parent .heatmap-wrapper { padding: 8px; }
  .mk-parent .problem-list-section .problem-list-header { flex-wrap: wrap; padding: 12px; }
  .mk-parent .summary-stats { gap: 14px 22px; }
  .mk-parent .fluency-percentage { gap: 10px; }
  .mk-parent .fluency-percentage-caption { flex-basis: 100%; }
  .mk-legacy #container.quiz-container { margin: 20px 12px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-app *, .mk-app *::before, .mk-app *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.anchor-summary-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.anchor-summary-actions button { margin: 0; }

/* Shared "?" circle. Must beat .mk-app button (padding / pill radius), which
   otherwise turns classifier help buttons into ovals with the mark outside. */
.mk-app .info-tip {
  display: inline-block;
  position: relative;
  margin-left: 4px;
  vertical-align: middle;
}
.mk-app .info-tip > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #6b7280;
  color: #374151;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.mk-app .info-tip > summary::-webkit-details-marker { display: none; }
.mk-app .info-tip-body {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 28em;
  max-width: min(28em, 90vw);
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  font-size: 12px;
  font-weight: 400;
  color: #1f2937;
  line-height: 1.45;
  text-align: left;
}
.mk-app .info-tip.info-tip-end .info-tip-body { left: auto; right: 0; }
.mk-app .info-tip.info-tip-above .info-tip-body { top: auto; bottom: calc(100% + 6px); }
.mk-app .info-tip-body p { margin: 0 0 6px; }
.mk-app .info-tip-body p:last-child { margin-bottom: 0; }
.mk-app .fc-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid #6b7280;
  background: #fff;
  color: #374151;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
}
.mk-app .fc-info-btn:hover {
  background: #fff;
  border-color: #1565c0;
  color: #1565c0;
}

/* Unified quiz choices retain the shared palette; Feast is a regular quiz type. */
.mk-quiz.unified-landing #kid-mode-feast { background: #f1f5fb !important; color: var(--mk-ink) !important; border-color: var(--mk-line); }
.mk-quiz.unified-landing .kid-mode-settings { right: 40px; font-size: 1.5rem; color: #607d8b; padding: 0; background: transparent; border: 0; }
.mk-quiz.unified-landing .kid-mode-settings[aria-expanded="true"] { background: #e5e7eb; }
.mk-quiz.unified-landing .kid-mode-row:has(.kid-mode-settings) .kid-mode-btn { padding-right: 78px; }
.mk-quiz.unified-landing .wrap:has(#anchor-kid-modal:not(.hidden)) #anchor-source-mode-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; margin: 16px 0 0; text-align: left; }
.mk-quiz.unified-landing #anchor-source-mode-row .source-mode-current { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.mk-quiz.unified-landing #anchor-source-mode-row .source-mode-new { display: inline-flex; align-items: center; }
.mk-quiz #anchor-landing .info-tip > summary,
.mk-quiz #anchor-targeted-config .info-tip > summary {
  width: 25px; height: 25px; min-width: 25px; min-height: 25px;
  border-radius: 9px; border: 1px solid #bdcce1; color: #4f6585;
  background: #fff; font-size: .8125rem; font-weight: 700;
}
.mk-quiz #anchor-filler-text {
  width: 100%; box-sizing: border-box; margin-top: 6px;
  font-family: monospace; font-size: 1rem; line-height: 1.5;
  padding: 8px; height: calc(4.5em + 18px); min-height: calc(4.5em + 18px);
  overflow-y: auto; resize: none;
}
.mk-quiz #anchor-filler-text.filler-expanded { height: calc(18em + 18px); }
.mk-quiz.unified-landing #anchor-current-file { font-size: .85rem; word-break: break-all; }
.mk-quiz.unified-landing #anchor-go-back { color: white; border-radius: 28px; background: #607d8b; }
.mk-quiz.unified-landing #landing-dev-panels summary { cursor: pointer; font-weight: 650; }
@media (max-width: 699px) {
  .mk-quiz.unified-landing #kid-mode-options { grid-template-columns: minmax(0, 1fr); }
  .mk-quiz.unified-landing #anchor-kid-modal { padding: 14px; }
}

body.hosted-child-account #anchor-landing.learner-load-error { display: block !important; }
body.hosted-child-account #anchor-landing.learner-load-error > :not(#landing-status) { display: none !important; }

/* The local home uses the compact learner strip even before a file finishes loading. */
.mk-quiz.unified-landing #anchor-landing { padding: 16px 20px; }
.mk-quiz.unified-landing .landing-names { display: flex; justify-content: flex-start; gap: 8px; margin: 0; }
.mk-quiz.unified-landing .landing-name { min-width: 0; width: auto; min-height: 40px; padding: 8px 13px; font-size: .9375rem; border-radius: 9px; border-bottom-width: 2px; box-shadow: none; }

/* One gear drawing and size for quiz choices and in-quiz settings. */
.mk-quiz .kid-mode-settings svg { display: block; width: 24px; height: 24px; margin: auto; }
.mk-quiz #anchor-settings-toggle { color: #607d8b; }

/* Root mark: one drawn radical, sized and weighted like the other op glyphs. */
.op-sym-root {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: -0.08em;
  line-height: 1;
}
.op-sym-root-ch {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.op-sym-root svg {
  display: block;
  width: 1em;
  height: 1em;
}
.op-sym-root path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.05;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* ---- In-quiz screen fit (phones) ----------------------------------------------------
   This block alone owns the phone quiz screen. The card is a column as tall as the
   visible screen (100svh = the height with Safari's toolbars showing, so nothing jumps
   when they collapse). Rows above and below the keypad take what they need and the
   keypad gets the rest, so the learner always sees problem, answer, and every key.
   Anything extra (the targets board) goes in the strip at the top and the problem and
   feedback rows shrink to pay for it. Sizes are fluid: tune the --qf-* values rather
   than adding device breakpoints. The one width condition marks where the targets board
   stops fitting beside the card (its counterpart is the min-width: 700px rule in
   index.html). Layout conventions: apps/focusonfoundations/web/browser-tests/responsive/README.md */
@media (max-width: 699px) {
  .mk-quiz.in-quiz {
    --qf-pad: 8px;
    --qf-gap: clamp(6px, 1.2svh, 10px);
    --qf-problem-h: clamp(52px, 13svh, 110px);
    --qf-problem-font: clamp(2.25rem, 8svh, 3.75rem);
    --qf-answer-h: clamp(44px, 7.5svh, 60px);
    --qf-answer-font: clamp(1.6rem, 5svh, 2.5rem);
    --qf-feedback-h: clamp(30px, 5.5svh, 52px);
    --qf-key-min: 46px;
    --qf-key-max: 88px;
    --qf-key-font: clamp(1.6rem, 5svh, 2.6rem);
  }
  .mk-quiz.in-quiz.anchor-targets-board-on {
    --qf-problem-h: clamp(44px, 9svh, 80px);
    --qf-problem-font: clamp(2rem, 6.5svh, 3rem);
    --qf-feedback-h: clamp(26px, 4.5svh, 44px);
  }
  /* Nothing but the quiz card is on screen during a quiz. */
  .mk-quiz.in-quiz .mk-header,
  .mk-quiz.in-quiz h1,
  .mk-quiz.in-quiz #hosted-guest-notice,
  .mk-quiz.in-quiz #anchor-problem-list-editor { display: none; }
  .mk-quiz.in-quiz .wrap { padding: var(--qf-pad); }
  .mk-quiz.in-quiz #anchor-quiz.card:not(.hidden) {
    --quiz-card-padding: 10px;
    display: flex; flex-direction: column; box-sizing: border-box;
    min-height: calc(100svh - 2 * var(--qf-pad));
    margin: 0; padding: var(--quiz-card-padding) 12px; border-radius: 18px;
  }
  .mk-quiz.in-quiz #anchor-quiz-main { flex: none; }
  .mk-quiz.in-quiz .anchor-problem-stack { width: 100%; }
  .mk-quiz.in-quiz #anchor-quiz .anchor-problem-stack:not(.animated) #anchor-problem { height: var(--qf-problem-h); font-size: var(--qf-problem-font); margin: 0; }
  .mk-quiz.in-quiz #anchor-answer { width: min(200px, 60%); height: var(--qf-answer-h); font-size: var(--qf-answer-font); }
  .mk-quiz.in-quiz #anchor-feedback { height: var(--qf-feedback-h); margin-top: 2px; font-size: calc(var(--qf-feedback-h) * .8); }
  .mk-quiz.in-quiz #anchor-correction-answer { height: var(--qf-feedback-h); }

  /* Targets: a compact strip above the problem, six to a row, centered when fewer. */
  .mk-quiz.in-quiz.anchor-targets-board-on .anchor-keypad-sidebar {
    order: -1; position: relative; inset: auto; display: block; width: auto; height: auto;
    margin: 0 0 var(--qf-gap); padding: 4px; overflow: visible;
    border: 1px solid #d4dfed; border-radius: 12px; background: #fff;
  }
  .mk-quiz.in-quiz #anchor-targets-board:not(.hidden) { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .mk-quiz.in-quiz .anchor-target-tile { position: relative; flex: 0 0 calc((100% - 15px) / 6); box-sizing: border-box; min-width: 0; padding: 3px 1px; border-radius: 8px; }
  .mk-quiz.in-quiz .anchor-target-tile svg { width: clamp(24px, 4.4svh, 34px); height: clamp(24px, 4.4svh, 34px); }
  .mk-quiz.in-quiz .anchor-target-tile .tile-face { margin-top: 1px; font-size: .75rem; letter-spacing: -.01em; }
  .mk-quiz.in-quiz .anchor-target-tile .tile-check { position: absolute; top: 0; right: 3px; font-size: .75rem; line-height: 1.2; }
  .mk-quiz.in-quiz #anchor-reward-burst:not(.hidden) { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border-radius: 12px; background: #fffffff2; }
  .mk-quiz.in-quiz #anchor-reward-burst img, .mk-quiz.in-quiz #anchor-reward-burst video { max-height: 100%; }

  /* The keypad absorbs the leftover height, between a tappable minimum and a comfortable maximum. */
  .mk-quiz.in-quiz .anchor-keypad-area { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; margin-top: var(--qf-gap); }
  .mk-quiz.in-quiz .anchor-entry-row {
    --key-gap: var(--qf-gap);
    flex: 1 1 auto; width: min(420px, 100%); height: auto;
    min-height: calc(var(--anchor-key-rows, 4) * var(--qf-key-min) + (var(--anchor-key-rows, 4) - 1) * var(--key-gap));
    max-height: calc(var(--anchor-key-rows, 4) * var(--qf-key-max) + (var(--anchor-key-rows, 4) - 1) * var(--key-gap));
  }
  .mk-quiz.in-quiz .anchor-keypad-area #anchor-keypad:not(.hidden) { position: absolute; inset: 0; width: auto; height: auto; max-width: none; }
  .mk-quiz.in-quiz #anchor-keypad button { min-height: 0; margin: 0; padding: 0; font-size: var(--qf-key-font); line-height: 1; }
  .mk-quiz.in-quiz #anchor-teach:not(.hidden) { position: absolute; inset: 0; height: auto; }
  .mk-quiz.in-quiz .anchor-action-row { flex: none; width: min(420px, 100%); margin-top: var(--qf-gap); }
  .mk-quiz.in-quiz .anchor-action-row button { font-size: .95rem; }

  /* Status lines under the keys: one tight line each, and no empty rows. */
  .mk-quiz.in-quiz .anchor-session-controls:not(:has(button:not(.hidden))) { display: none; }
  .mk-quiz.in-quiz #anchor-targets-disclosure { margin-top: 4px; font-size: .85rem; }
  .mk-quiz.in-quiz #anchor-progress { min-height: 1.3em; margin-top: 4px !important; font-size: .85rem; }
  .mk-quiz.in-quiz #anchor-order { min-height: 0; margin-top: 0 !important; font-size: .8rem; }
  .mk-quiz.in-quiz #anchor-go { width: 210px; height: 210px; font-size: 3rem; border-radius: 22px; }
}

/* ---- Touch baseline -----------------------------------------------------------------
   Keyed on the pointer, not on a screen width. Form text stays at 16px or more (below
   that, iPhone Safari zooms the page when the field is focused) and disclosure rows are
   tall enough for a finger. */
@media (pointer: coarse) {
  .mk-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .mk-app select,
  .mk-app textarea { font-size: max(16px, 1em); }
  /* The adult pages set many dense 12-13px controls with specific selectors; on touch the
     16px floor has to win over all of them. */
  .mk-parent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .mk-parent select,
  .mk-parent textarea,
  .mk-quiz #anchor-flag-comment,
  .mk-quiz .fun-mode-setup select,
  .mk-quiz #kid-settings-panel select,
  .mk-quiz #kid-settings-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: max(16px, 1em) !important; }
  .mk-quiz #anchor-flag-comment { height: 34px; }
  .mk-app summary { min-height: 32px; align-content: center; }
  .mk-app .info-tip > summary, .mk-app .fc-info-btn { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 14px; }
  .mk-app input[type="checkbox"], .mk-app input[type="radio"] { width: 20px; height: 20px; }
  .mk-app label:has(> input[type="checkbox"]), .mk-app label:has(> input[type="radio"]) { padding-block: 6px; }
  .mk-app #copy-loaded-file-path { min-width: 32px; min-height: 32px; }
  .mk-quiz #anchor-targets-summary { min-height: 28px; }
  .mk-quiz .fun-mode-setup a, .mk-quiz #anchor-settings-menu a { display: inline-block; padding-block: 8px; }
  #hosted-guest-notice a, #hosted-onboarding-dashboard, #hosted-onboarding-exit { display: inline-block; padding-block: 8px; }
}

/* Learner and file controls share one compact row on every current page. */
.learner-page-heading { display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0; flex:1; position:relative; }
.learner-page-heading h1 { margin:0; }
.learner-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; font:16px/1.4 Inter,system-ui,sans-serif; }
.learner-controls[hidden] { display:none; }
.learner-picker { min-width:0; max-width:100%; }
.learner-controls .learner-picker select { font:inherit; font-size:16px; font-weight:600; min-height:40px; max-width:min(22rem,100%); padding:7px 30px 7px 10px; border:1px solid #a6bdb2; border-radius:8px; color:#203c30; background-color:#fff; cursor:pointer; }
.learner-file-settings { font-size:16px; }
.learner-file-settings > summary { cursor:pointer; color:#385e4e; padding:8px 4px; min-height:24px; }
.learner-file-settings-body { position:absolute; inset-inline-start:0; top:calc(100% + 6px); z-index:50; width:max-content; max-width:min(44rem, 100%, calc(100vw - 1.5rem)); box-sizing:border-box; padding:16px; border:1px solid #cbd8d0; border-radius:10px; background:white; box-shadow:0 5px 18px #0002; max-height:70svh; overflow:auto; overflow-wrap:anywhere; text-align:left; }
.learner-file-settings-body #hosted-file-tools { padding:0; border:0; margin:12px 0; }
.learner-file-settings-body #hosted-practice-files { display:flex; flex-wrap:wrap; gap:10px; }
.learner-file-settings-body label { display:inline-flex; align-items:center; gap:6px; }
#quiz-learner-controls, #hosted-practice-launch { position:relative; margin:0 0 16px; }
body.in-quiz #quiz-learner-controls, body.in-quiz #hosted-practice-launch { display:none; }
body.unified-landing #anchor-landing { margin:0; padding:0; border:0; background:none; }
body.unified-landing #anchor-landing > p:first-child { display:none; }
body.hosted-practice-launch #anchor-landing, body.hosted-practice-launch #legacy-setup-link { display:none !important; }
.learner-file-settings-body #anchor-source-mode-row { margin:12px 0; }
.learner-file-settings-body #anchor-source-mode-row label { flex-wrap:wrap; }
.file-settings-current-file, .learner-file-settings-body .file-settings-current-file-row { display:block; line-height:1.5; margin:0 0 10px; }
#file-settings-current-file-name, #local-current-file-name { min-width:0; overflow-wrap:anywhere; }
#copy-loaded-file-path {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin:0; padding:0; flex:0 0 auto;
  color:#4b5563; background:transparent; border:1px solid #d1d5db; border-radius:8px; cursor:pointer;
}
#copy-loaded-file-path[hidden] { display:none !important; }
#copy-loaded-file-path:hover { background:#f3f6fb; color:#1f2937; }
#copy-loaded-file-path.is-copied { color:#0d6e4f; border-color:#86c8b0; }
#copy-loaded-file-path .copy-check-icon { display:none; }
#copy-loaded-file-path.is-copied .copy-file-icon { display:none; }
#copy-loaded-file-path.is-copied .copy-check-icon { display:block; }
#file-upload-section #loaded-file-label,
#file-upload-section #copy-loaded-file-path { display:none !important; }
.learner-file-settings-body #copy-loaded-file-path { display:inline-flex !important; }
body.unified-landing #quiz-learner-controls,
body.unified-landing #anchor-kid-modal,
body.unified-landing #landing-dev-panels,
body.unified-landing #anchor-advanced {
  width:min(620px, 100%);
  max-width:620px;
  margin-left:0;
  margin-right:auto;
  box-sizing:border-box;
}
body.unified-landing #quiz-learner-controls.learner-controls {
  display:flex; flex-direction:column; align-items:stretch;
}
body.unified-landing #quiz-learner-controls .learner-picker,
body.unified-landing #quiz-learner-controls .learner-picker select {
  width:100%; max-width:none;
}
@media (pointer:coarse) {
  .learner-controls .learner-picker select, .learner-file-settings > summary { min-height:44px; box-sizing:border-box; }
  .learner-file-settings-body input, .learner-file-settings-body select { font-size:16px; }
}

/* A shared, readable flag in cards, legends and problem lists. */
.fluency-flag-icon { width: 24px; height: 24px; vertical-align: middle; flex: 0 0 auto; margin-right: 4px; }

/* One compact file/sync presentation on local and hosted pages. */
.learner-sync-status-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.learner-sync-status-row > p { margin:0; }
#local-learner-sync { margin:16px 0; padding-top:12px; border-top:1px solid #d8e3de; }
#local-learner-sync[hidden] { display:none; }
#local-learner-sync button { font:inherit; padding:8px 12px; }
#local-sync-conflict-banner { margin: 0 0 8px; }
#local-sync-choice-overlay { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); }
#local-sync-choice-overlay.hidden { display:none; }
#local-sync-choice-card { position:relative; width:calc(100% - 40px); max-width:420px; padding:22px 26px; border-radius:14px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.3); text-align:left; }
#local-sync-choice-text { margin:0 28px 0 0; font-size:1.05rem; line-height:1.45; }
#local-sync-choice-error { min-height:1.2em; margin:8px 0 0; color:#c62828; font-weight:600; }
#local-sync-choice-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
#local-sync-choice-close { position:absolute; top:10px; right:10px; width:32px; height:32px; margin:0; padding:0; border:none; border-radius:50%; background:#607d8b; color:#fff; font-weight:700; cursor:pointer; }
.current-file-activity { color:#64748b; font-size:.9rem; }
body.unified-landing:not(.hosted-account) #anchor-current-file { display:none; }
.learner-file-settings-body #copy-loaded-file-path[hidden] { display:none !important; }

.file-settings-current-file #copy-loaded-file-path, #hosted-current-file #copy-loaded-file-path { margin:0 6px; vertical-align:middle; }