/* Important layer comes before the legacy cosmetic layer. Shared exercise layout. */
@layer qualification-ui {
/* Non-interactive introduction above the answer keys; reading time + gentle exit. */
html body .sd-keyboard-help {
  position: fixed; z-index: 150; left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  display: grid; gap: 5px; padding: 14px 20px;
  background: var(--sd-card); color: var(--sd-ink);
  border: 1px solid var(--sd-line); border-top: 3px solid var(--sd-action);
  border-radius: 4px; box-shadow: 0 6px 24px #0002;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Yu Gothic', Meiryo, sans-serif;
  text-align: center; pointer-events: none; opacity: 1;
  transition: opacity 1500ms ease-out;
}
html body .sd-keyboard-help strong { font-size: 14px; font-weight: 700; }
html body .sd-keyboard-help kbd {
  font-family: inherit; font-size: 14px; line-height: 1.3; font-weight: 700;
  display: inline-block; min-width: 1.4em;
}
html body .sd-keyboard-help.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html body .sd-keyboard-help { transition: none; }
}
body.sd-quiz-active { --study-width: min(100vw, 960px); --reading-width: 840px; }
body.sd-quiz-active::before { display: none !important; }
body.sd-quiz-active .app {
  width: 100% !important; max-width: 960px !important; margin: 0 auto !important;
  padding: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
/* Floating controls only: no full-width banner or duplicate question counter. */
body.sd-quiz-active #counterWrap {
  position: fixed !important; top: calc(10px + env(safe-area-inset-top)) !important;
  right: max(12px,calc((100vw - 960px)/2 + 12px)) !important; left: auto !important;
  transform: none !important; z-index: 110 !important;
  width: min(280px,calc(100vw - 76px)) !important; max-width: none !important;
  min-height: 0 !important; box-sizing: border-box !important; padding: 0 !important;
  margin: 0 !important; display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: flex-end !important; gap: 8px !important;
  background: transparent !important; color: var(--sd-ink) !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  pointer-events: none !important;
}
body.sd-quiz-active #counter { display: none !important; }
body.sd-quiz-active #counterWrap .nav-row {
  display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 6px !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  pointer-events: auto !important;
}
body.sd-quiz-active #counterWrap .nav-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 0 !important; min-height: 44px !important; height: 44px !important;
  box-sizing: border-box !important; padding: 0 8px !important; margin: 0 !important;
  border: 1px solid var(--sd-line) !important; border-radius: 4px !important;
  background: var(--sd-card) !important; color: var(--sd-ink) !important;
  box-shadow: 0 2px 0 var(--sd-shadow) !important; text-decoration: none !important;
  font: 700 14px/1.2 -apple-system, BlinkMacSystemFont, 'Yu Gothic', Meiryo, sans-serif !important;
  white-space: nowrap !important; cursor: pointer !important;
}
body.sd-quiz-active #counterWrap .nav-btn:disabled { opacity: .42 !important; cursor: default !important; }
body.sd-quiz-active :is(#pageHistoryNav, #fixedPageNav) { display: none !important; }
/* Version stamps remain on the home/settings views, clear of answer hit areas. */
body.sd-quiz-active :is(.web-version, #appVersion) { display: none !important; }
/* The menu affordance remains visible on touch screens too. */
html body #appMenuButton {
  display: inline-flex !important; width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important; padding: 0 !important;
  border: 1px solid var(--sd-line) !important; border-radius: 4px !important;
  background: var(--sd-card) !important; color: var(--sd-ink) !important;
  font: 26px/1 Arial,sans-serif !important;
}
body.sd-quiz-active #appMenuButton {
  position: fixed !important; top: calc(10px + env(safe-area-inset-top)) !important;
  left: max(12px,calc((100vw - 960px)/2 + 12px)) !important; z-index: 120 !important;
}
/* Keep the header text clear of the floating buttons. */
html body #quizScreen .quiz-header {
  display: block !important; position: relative !important; margin: 0 !important;
  padding: calc(76px + env(safe-area-inset-top)) 16px 12px !important;
}
html body #quizScreen .quiz-title {
  font-size: 18px !important; line-height: 1.45 !important; margin: 0 !important;
  text-align: left !important; letter-spacing: 0 !important;
}
html body #quizScreen .quiz-sub { text-align: left !important; margin-top: 4px !important; }
html body #quizScreen .questionMeta {
  display: flex !important; flex-direction: column !important; gap: 6px !important;
  max-width: none !important; margin: 8px 0 0 !important;
}
html body #quizScreen .quiz-body {
  width: 100% !important; max-width: 840px !important; box-sizing: border-box !important;
  margin: 0 auto !important; padding-top: 12px !important; padding-left: 16px !important; padding-right: 16px !important;
  padding-bottom: var(--sd-dock-clearance,120px) !important;
}
html body #quizScreen .qText {
  margin: 0 !important; padding: 14px 16px !important; border-radius: 4px !important;
  border: 1px solid var(--sd-line) !important;
}
html body #quizScreen .feedbackArea:not(:has(.feedback.show)) { display: none !important; }
html body #quizScreen .feedbackArea { margin: 12px 0 !important; min-height: 0 !important; }
html body #quizScreen .topPillRow { margin: 12px 0 !important; padding: 0 !important; gap: 6px !important; }
html body #quizScreen .topPillRow .pill {
  min-height: 44px !important; padding: 8px 12px !important; border: 1px solid var(--sd-line) !important;
  font-size: 14px !important; line-height: 1.4 !important; border-radius: 4px !important;
}
html body #quizScreen .line { margin: 10px 0 0 !important; }
/* One row for every choice count. Visible borders, including the selected answer. */
html body #quizScreen .answerDock {
  width: min(100%,960px) !important; max-width: 100% !important; box-sizing: border-box !important;
  left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
  border: 0 !important; border-top: 1px solid var(--sd-line) !important; border-radius: 0 !important;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background: var(--sd-card) !important; color: var(--sd-ink) !important;
}
html body #quizScreen .dockTitle { margin: 0 0 6px !important; font-size: 12px !important; line-height: 1.4 !important; }
html body #dockList {
  display: grid !important; grid-template-columns: repeat(var(--sd-choice-count,5),minmax(0,1fr)) !important;
  gap: 8px !important;
}
html body #dockList > .dockRow {
  display: block !important; grid-column: auto !important; grid-row: auto !important;
  min-width: 0 !important; margin: 0 !important; padding: 0 !important;
}
html body #dockList .choice {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-width: 0 !important; height: 48px !important; min-height: 48px !important;
  box-sizing: border-box !important; margin: 0 !important; padding: 8px 4px !important;
  border: 1.5px solid var(--sd-muted) !important; border-radius: 4px !important;
  box-shadow: 0 2px 0 var(--sd-shadow) !important; cursor: pointer !important;
  font: 700 16px/1.2 -apple-system, BlinkMacSystemFont, 'Yu Gothic', Meiryo, sans-serif !important;
}
html body #dockList .choice[aria-pressed="true"] { outline: 2px solid currentColor !important; outline-offset: -4px !important; }
/* Plain explanation headings; keep all answer/correction highlights intact. */
html body :is(.blockTitle, .explainBlock .blockTitle) {
  display: block !important; background: transparent !important; color: var(--sd-muted) !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
  margin: 0 0 8px !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 700 !important;
}
html body .blockTitle:empty { display: none !important; }
html body :is(.explain-jump-btn, .guide-btn) {
  min-height: 44px !important; padding: 8px 12px !important; border: 1px solid var(--sd-line) !important;
  border-radius: 4px !important; background: var(--sd-card) !important; color: var(--sd-ink) !important;
  box-shadow: 0 2px 0 var(--sd-shadow) !important; font-size: 14px !important;
}
html body :is(.explain-jump-btn.active, .guide-btn.primary) {
  background: var(--sd-action) !important; color: var(--sd-on-action) !important;
  border-color: var(--sd-action) !important;
}
html body .modal { z-index: 300 !important; }
html body :is(.sheet, .app-menu-dialog) { box-shadow: 0 12px 40px #0003 !important; }
html body .sheetTop { box-shadow: none !important; border-bottom: 1px solid var(--sd-line) !important; }
html body .app-menu-dialog { z-index: 400 !important; }
html body .sd-portal-menu-link { color: var(--sd-action) !important; font-weight: 700 !important; }
body.sd-quiz-active:has(.modal.show) :is(#counterWrap, #appMenuButton) { visibility: hidden !important; }
@media (max-width:480px) {
  body.sd-quiz-active #counterWrap { right: 8px !important; }
  body.sd-quiz-active #counterWrap .nav-row { width: 100% !important; gap: 4px !important; }
  body.sd-quiz-active #counterWrap .nav-btn { padding: 0 4px !important; font-size: 12px !important; }
  body.sd-quiz-active #appMenuButton { left: 8px !important; }
  html body #quizScreen .quiz-title { font-size: 16px !important; }
  html body #quizScreen .quiz-body { padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; }
  html body #quizScreen .qText { padding: 12px !important; }
  html body #dockList { gap: 6px !important; }
  html body #quizScreen .answerDock { padding-left: 10px !important; padding-right: 10px !important; }
}
}

/* Both survey qualifications share their Web home presentation. */
@layer qualification-ui {
body[data-shared-home] #homeScreen>.hero{padding:78px 28px 28px!important;text-align:left!important}
body[data-shared-home] #homeScreen .hero-heading{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important}
body[data-shared-home] #homeScreen .hero-title{font:900 42px/1.12 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important;letter-spacing:0!important;text-shadow:none!important;min-width:0!important;flex:1}
body[data-shared-home] #homeScreen .hero-theme-toggle{position:static!important;display:flex!important;align-items:flex-end!important;flex-direction:column!important;gap:8px!important;margin:0!important;white-space:nowrap;font:700 11px/1.4 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important;flex:none}
body[data-shared-home] #homeScreen .hero .night-mode-controls{display:none!important}
body[data-shared-home] #homeScreen .hero-sales-badge{display:inline-block!important;margin:18px 0 8px!important;font:700 13px/1.6 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important}
body[data-shared-home] #homeScreen .hero-sales-note{font:500 13px/1.8 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important;white-space:pre-line;margin:0!important}
body[data-shared-home] #homeScreen .home-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;padding:22px 28px 28px!important}
body[data-shared-home] #homeScreen .home-buttons>.big-btn{grid-column:auto!important;width:100%!important;min-width:0!important;min-height:112px!important;margin:0!important;padding:22px 18px!important;border:1px solid var(--sd-ink)!important;border-radius:4px!important;font:800 20px/1.45 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important;text-align:left!important}
body[data-shared-home] #homeScreen :is(#openPastMenuBtn,#resumeYearBtn){grid-column:1/-1!important;background:var(--sd-action)!important;color:var(--sd-on-action)!important}
body[data-shared-home] #homeScreen .big-btn small{display:block!important;font-size:13px!important;font-weight:600!important;line-height:1.6!important;margin-top:12px!important}
body[data-shared-home] #homeScreen .footer-credit{grid-column:1/-1!important;font:12px/1.8 -apple-system,BlinkMacSystemFont,'Yu Gothic',Meiryo,sans-serif!important;background:var(--sd-tint)!important;color:var(--sd-muted)!important;padding:12px 14px!important;margin:0!important;border-radius:4px!important}
body[data-shared-home]:has(#homeScreen.active) :is(#fixedPageNav,#pageHistoryNav){background:transparent!important;box-shadow:none!important;border:0!important;width:auto!important;padding:0!important;right:12px!important;top:10px!important}
@media(min-width:1100px){body[data-shared-home] #homeScreen .home-buttons{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:480px){body[data-shared-home] #homeScreen>.hero{padding:76px 16px 24px!important}body[data-shared-home] #homeScreen .home-buttons{padding:16px!important;gap:10px!important}body[data-shared-home] #homeScreen .hero-title{font-size:36px!important}body[data-shared-home] #homeScreen .home-buttons>.big-btn{font-size:16px!important;padding:18px 14px!important;min-height:112px!important}body[data-shared-home] #homeScreen .big-btn small{font-size:12px!important}}
}

@layer qualification-ui {
body[data-shared-home] #homeScreen .home-buttons>.big-btn.web-locked{padding-right:42px!important}
body[data-shared-home] #homeScreen .big-btn .web-crown{position:absolute!important;right:12px!important;top:18px!important;width:21px!important;height:24px!important;font-size:16px!important;line-height:24px!important;text-align:center!important}
}