/* CCNP ENCOR question pages — touch-friendly light UI */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.12);
}

.choice {
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.choice input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.answer-actions {
  width: 100%;
}

.answer-actions .nav-check,
.answer-side-actions .nav-show-answer {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 48px;
  padding: 12px 18px;
  box-sizing: border-box;
  touch-action: manipulation;
}

.review-mark-box {
  min-height: 48px;
  min-width: 48px;
  touch-action: manipulation;
}

.review-mark-box input {
  width: 22px !important;
  height: 22px !important;
}

.question-nav .nav-link,
.next-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body.encor-question-ui,
body.encor-static-sample,
body.encor-sample-guest-ui,
body.encor-dnd-ui {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  background: #ffffff !important;
  color: #1a3d6e;
  position: relative;
}

body.encor-question-ui .question-shell,
body.encor-static-sample .question-shell,
body.encor-dnd-ui .question-shell {
  width: min(900px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

body.encor-question-ui .question-shell .site-logo-corner,
body.encor-dnd-ui .question-shell .site-logo-corner {
  position: static !important;
  align-self: flex-end;
  margin: 0 0 2rem;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
body.encor-static-sample .site-logo-corner,
body.encor-sample-guest-ui .site-logo-corner,
body.bcc-sample-experience .site-logo-corner {
  display: inline-flex !important;
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top, 0px)) !important;
  left: max(12px, env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
  cursor: default !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}
body.encor-static-sample .question-shell .site-logo-corner,
body.encor-sample-guest-ui .question-shell .site-logo-corner,
body.bcc-sample-experience .question-shell .site-logo-corner {
  position: fixed !important;
}

body.encor-question-ui .page-logo-watermark,
body.encor-static-sample .page-logo-watermark,
body.encor-dnd-ui .page-logo-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.encor-question-ui .page-logo-watermark img,
body.encor-static-sample .page-logo-watermark img,
body.encor-dnd-ui .page-logo-watermark img {
  width: min(85vw, 720px);
  max-height: 85vh;
  height: auto;
  object-fit: contain;
  opacity: 0.16;
}

body.encor-question-ui .card,
body.encor-question-ui main.card,
body.encor-static-sample .card,
body.encor-static-sample main.card,
body.encor-dnd-ui .card,
body.encor-dnd-ui main.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #1a3d6e;
}

body.encor-question-ui h1,
body.encor-static-sample h1,
body.encor-sample-guest-ui h1,
body.encor-dnd-ui h1 {
  color: #1a3d6e;
}

/* Text on white / transparent question shell (matches SEC+ #1a3d6e) */
body.encor-question-ui .stem-after-exhibit,
body.encor-question-ui .stem-after-exhibit-list,
body.encor-question-ui .stem-after-exhibit-list li,
body.encor-question-ui .stem-after-exhibit-tail,
body.encor-question-ui .exhibit-ref,
body.encor-question-ui .exhibit-ref-spaced,
body.encor-question-ui .exhibit-section-caption,
body.encor-question-ui .instructions,
body.encor-static-sample .stem-after-exhibit,
body.encor-static-sample .stem-after-exhibit-list,
body.encor-static-sample .stem-after-exhibit-list li,
body.encor-static-sample .stem-after-exhibit-tail,
body.encor-static-sample .exhibit-ref,
body.encor-static-sample .exhibit-ref-spaced,
body.encor-static-sample .exhibit-section-caption,
body.encor-static-sample .instructions,
body.encor-sample-guest-ui .stem-after-exhibit,
body.encor-sample-guest-ui .stem-after-exhibit-list,
body.encor-sample-guest-ui .stem-after-exhibit-list li,
body.encor-sample-guest-ui .stem-after-exhibit-tail,
body.encor-sample-guest-ui .exhibit-ref,
body.encor-sample-guest-ui .exhibit-ref-spaced,
body.encor-sample-guest-ui .exhibit-section-caption,
body.encor-sample-guest-ui .instructions {
  color: #1a3d6e;
}

body.encor-question-ui .choice,
body.encor-static-sample .choice {
  background: #254b8a;
  border: 1px solid #3d6dbb;
  color: #e6edf3;
}

body.encor-question-ui .answer.correct,
body.encor-static-sample .answer.correct,
body.encor-sample-guest-ui .answer.correct,
body.encor-question-ui #answerBox.answer.correct,
body.encor-static-sample #answerBox.answer.correct,
body.encor-sample-guest-ui #answerBox.answer.correct,
.answer.correct {
  color: #ffffff;
}

body.encor-question-ui .answer.incorrect,
body.encor-static-sample .answer.incorrect,
body.encor-sample-guest-ui .answer.incorrect,
body.encor-question-ui #answerBox.answer.incorrect,
body.encor-static-sample #answerBox.answer.incorrect,
body.encor-sample-guest-ui #answerBox.answer.incorrect,
.answer.incorrect {
  color: #fecaca;
}

body.encor-question-ui .ccna-practice-progress,
body.encor-question-ui .question-topic-meta,
body.encor-static-sample .ccna-practice-progress,
body.encor-static-sample .question-topic-meta {
  color: #1a3d6e;
}

body.encor-question-ui .review-mark-box,
body.encor-static-sample .review-mark-box {
  background: transparent !important;
  border: 1px solid #3d6dbb;
  color: #1a3d6e;
}

body.encor-question-ui .review-mark-box input,
body.encor-static-sample .review-mark-box input {
  accent-color: #1a3d6e;
}

body.encor-question-ui .review-mark-box.is-flagged,
body.encor-static-sample .review-mark-box.is-flagged {
  background: transparent !important;
  border-color: #3d6dbb;
  color: #1a3d6e;
}

nav.sim-nav.encor-sample-sim-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 16, 32, 0.94);
  border-top: 1px solid #2d3b5a;
  backdrop-filter: blur(10px);
}

nav.sim-nav.encor-sample-sim-nav .sim-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #254b8a;
  border: 1px solid #3d6dbb;
  color: #e6edf3;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  min-width: 5.5rem;
  min-height: 48px;
  text-align: center;
  box-sizing: border-box;
  touch-action: manipulation;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}

nav.sim-nav.encor-sample-sim-nav .sim-nav-home {
  background: #1a3d6e;
}

nav.sim-nav.encor-sample-sim-nav .sim-nav-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 760px) {
  body.encor-question-ui,
  body.encor-static-sample {
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }

  .answer-actions .nav-check,
  .answer-side-actions .nav-show-answer {
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

body.encor-question-ui .sample-subjects-footer {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26, 61, 110, 0.22);
}

body.encor-question-ui .sample-subjects-footer__title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a3d6e;
}

body.encor-question-ui .sample-subjects-footer__list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #1a3d6e;
}

body.encor-question-ui .sample-subjects-footer__list li + li {
  margin-top: 0.2rem;
}

/* Drag-and-drop: short touch hint above the exercise (phones / tablets) */
.dragdrop-touch-hint {
  display: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #1a3d6e;
  font-weight: 400;
}

@media (max-width: 900px), ((hover: none) and (pointer: coarse)) {
  .dragdrop-touch-hint {
    display: block;
  }
}

/* Drag-and-drop exercise */
body.dragdrop-exercise .token {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 14px 14px;
  box-sizing: border-box;
  width: 100%;
  touch-action: manipulation;
  cursor: pointer;
}

body.dragdrop-exercise .token.is-picked {
  outline: 3px solid #4d89ff;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(77, 137, 255, 0.35);
}

body.dragdrop-exercise .drop-slot,
body.dragdrop-exercise .slot {
  box-sizing: border-box;
  touch-action: manipulation;
  cursor: pointer;
}

body.dragdrop-exercise .match-row .drop-slot,
body.dragdrop-exercise .match-row .slot,
body.dragdrop-exercise .row .drop-slot,
body.dragdrop-exercise .category-box .drop-slot {
  min-height: 48px;
  height: auto;
  padding: 8px 10px;
}

body.dragdrop-exercise pre .drop-slot,
body.dragdrop-exercise pre .slot,
body.dragdrop-exercise .code .drop-slot,
body.dragdrop-exercise .code .slot {
  min-height: 1.35em;
  padding: 2px 6px;
}

body.dragdrop-exercise button,
body.dragdrop-exercise .home-link,
body.dragdrop-exercise .next-link {
  min-height: 48px;
  padding: 12px 18px;
  box-sizing: border-box;
  touch-action: manipulation;
}

body.dragdrop-exercise .panel h2 {
  user-select: none;
}