/* Quiz experience 1.4.0 — unique filename intentionally bypasses old theme,
   browser and CDN caches. */

/* Catalog filters */
.maq-standalone-portal .maq-catalog-heading {
  display: grid !important;
  grid-template-columns: minmax(230px, .55fr) minmax(0, 1.45fr);
  gap: clamp(1.25rem, 4vw, 3rem) !important;
  align-items: start !important;
}

.maq-standalone-portal .maq-catalog-controls {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--maq-border, #d7dde5);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(16, 43, 78, .07);
}

.maq-standalone-portal .maq-catalog-filters {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: .8rem;
  align-items: end;
}

.maq-standalone-portal .maq-catalog-filters label,
.maq-standalone-portal .maq-catalog-search {
  display: grid !important;
  gap: .42rem;
  margin: 0;
  color: var(--maq-text, #172033);
  font-weight: 800;
}

.maq-standalone-portal .maq-catalog-filter-note {
  margin: .8rem 0 0;
  color: var(--maq-muted, #637083);
  font-size: .78rem;
  line-height: 1.5;
}

.maq-standalone-portal .maq-catalog-filters select,
.maq-standalone-portal .maq-catalog-search input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px;
  margin: 0 !important;
  border: 1px solid #aeb9c8;
  border-radius: 10px;
  background: #fff;
}

.maq-standalone-portal .maq-catalog-search {
  margin-top: .9rem;
  padding-top: .9rem;
  border-top: 1px solid #e3e8ef;
}

.maq-standalone-portal .maq-filter-actions {
  display: flex;
  gap: .5rem;
}

/* Visible progress for both guest and authenticated identities */
.maq-active-attempts {
  padding: 1.1rem;
  margin: 0 0 2rem;
  border: 1px solid color-mix(in srgb, var(--maq-primary, #17365d) 22%, #d7dde5);
  border-radius: 20px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--maq-primary, #17365d) 5%, #fff), #fff);
}

.maq-active-attempts .maq-section-heading { margin: 0 0 1rem; }
.maq-active-attempts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .85rem; }

.maq-active-attempt {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1rem;
  border: 1px solid var(--maq-border, #d7dde5);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(16, 43, 78, .06);
}

.maq-active-attempt h3 { margin: .65rem 0 .3rem; font-size: 1.05rem; }
.maq-active-attempt p { margin: 0; color: var(--maq-muted, #637083); font-size: .88rem; }
.maq-active-attempt__progress { height: 10px; overflow: hidden; border-radius: 999px; background: #e7ecf2; }
.maq-active-attempt__progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--maq-primary, #17365d), var(--maq-accent, #c9a227)); }
.maq-active-attempt .maq-button { align-self: flex-start; margin-top: auto; }
.maq-button-compact { min-height: 38px; padding: .45rem .75rem; font-size: .8rem; }

/* Question review workflow */
.maq-standalone-portal .maq-quiz-layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 115px);
  overflow: hidden;
}

.maq-palette-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--maq-border, #d7dde5);
}

.maq-palette-heading h2 { margin: .1rem 0 0; }

.maq-palette-heading [data-review-count] {
  flex: 0 0 auto;
  padding: .3rem .58rem;
  border-radius: 999px;
  background: #fff3cd;
  color: #7a4b00;
  font-size: .72rem;
}

.maq-palette-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .42rem;
  margin: .8rem 0;
}

.maq-palette-filters button {
  min-height: 36px;
  padding: .35rem .5rem;
  border: 1px solid #b8c3d0;
  border-radius: 8px;
  background: #fff;
  color: #3f4f63;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
}

.maq-palette-filters button:first-child { grid-column: 1 / -1; }
.maq-palette-filters button.is-active { border-color: var(--maq-primary, #17365d); background: var(--maq-primary, #17365d); color: #fff; }

.maq-standalone-portal .maq-palette {
  flex: 1 1 auto;
  min-height: 120px;
  padding: .25rem .35rem .4rem .15rem;
  overflow-y: auto;
  scrollbar-color: #9aa8b8 #edf1f5;
}

.maq-palette button[hidden] { display: none !important; }
.maq-palette button.is-review { border: 2px solid var(--maq-warning, #b45309); background: #fff3cd; color: #754600; font-weight: 900; box-shadow: inset 0 0 0 1px #fff; }
.maq-palette button.is-current { outline: 3px solid color-mix(in srgb, var(--maq-primary, #17365d) 28%, transparent); outline-offset: 1px; }
.maq-palette-empty { margin: .4rem 0; padding: .75rem; border-radius: 9px; background: #f5f7fa; color: var(--maq-muted, #637083); font-size: .8rem; text-align: center; }

.maq-palette-legend {
  flex: 0 0 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: .75rem;
  border-top: 1px solid var(--maq-border, #d7dde5);
}

.maq-palette-legend .is-current:before { background: var(--maq-primary, #17365d); }

.maq-question-review-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: -.2rem 0 .75rem;
  padding: .32rem .68rem;
  border: 1px solid color-mix(in srgb, var(--maq-warning, #b45309) 45%, #d7dde5);
  border-radius: 999px;
  background: #fff3cd;
  color: #754600;
  font-size: .75rem;
  font-weight: 900;
}

.maq-question-review-badge[hidden] { display: none !important; }
.maq-review-toggle.is-active { border-color: var(--maq-warning, #b45309); background: #fff3cd; color: #754600 !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--maq-warning, #b45309) 13%, transparent); }

/* Consent checkbox independent from theme checkbox styling */
.maq-standalone-portal .maq-consent {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: .75rem !important;
}

body.maq-standalone-portal #maq-guest-consent.maq-consent__input {
  position: absolute !important;
  left: 1rem !important;
  top: 1rem !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  clip-path: inset(50%) !important;
}

.maq-consent__box {
  display: grid !important;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 2px solid #64748b;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}

.maq-consent__input:checked + .maq-consent__box {
  border-color: var(--maq-primary, #17365d);
  background: var(--maq-primary, #17365d);
}

.maq-consent__input:checked + .maq-consent__box::after {
  color: #fff;
  content: "✓";
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.maq-consent__input:focus-visible + .maq-consent__box {
  outline: 3px solid var(--maq-accent, #c9a227);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .maq-standalone-portal .maq-catalog-heading,
  .maq-standalone-portal .maq-quiz-layout { grid-template-columns: 1fr; }
  .maq-standalone-portal .maq-quiz-sidebar:not([hidden]) { position: static; max-height: 430px; }
}

@media (max-width: 680px) {
  .maq-standalone-portal .maq-catalog-filters { grid-template-columns: 1fr; }
  .maq-standalone-portal .maq-filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

/* Global quiz layout audit: clearer rhythm, bounded navigation and touch-ready responsive states. */
.maq-standalone-portal .maq-quiz-layout {
  align-items: start;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.maq-standalone-portal .maq-quiz-main {
  min-height: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: 0;
  border-radius: 20px;
}

.maq-standalone-portal .maq-question-block {
  min-width: 0;
}

.maq-standalone-portal .maq-question-block + .maq-question-block {
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--maq-border, #d7dde5);
}

.maq-standalone-portal .maq-question-block fieldset {
  min-width: 0;
  padding: 0;
  margin: 1.15rem 0 0;
  border: 0;
}

.maq-standalone-portal .maq-question-title,
.maq-standalone-portal .maq-answer span,
.maq-standalone-portal .maq-feedback p,
.maq-standalone-portal .maq-feedback li {
  overflow-wrap: anywhere;
}

.maq-standalone-portal .maq-question-title {
  max-width: 78ch;
  margin-bottom: .6rem;
}

.maq-standalone-portal .maq-question-block {
  scroll-margin-top: 104px;
}

body.admin-bar.maq-standalone-portal .maq-question-block {
  scroll-margin-top: 136px;
}

.maq-standalone-portal .maq-answer {
  min-height: 58px;
  margin: .75rem 0;
  padding: 1rem 1.05rem;
  line-height: 1.5;
}

.maq-standalone-portal .maq-feedback {
  margin-top: 1.35rem;
  padding: 1.15rem 1.25rem;
}

.maq-standalone-portal .maq-question-controls {
  align-items: center;
  gap: .75rem;
  padding-top: 1.15rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--maq-border, #d7dde5);
}

.maq-standalone-portal .maq-question-navigation {
  align-items: center;
  gap: 1rem;
  padding-top: 1.35rem;
  margin-top: 1.65rem;
  border-top: 1px solid var(--maq-border, #d7dde5);
}

.maq-standalone-portal .maq-question-navigation .maq-actions-group {
  flex: 1 1 0;
}

.maq-standalone-portal .maq-question-navigation .maq-actions-group:last-child {
  justify-content: flex-end;
}

.maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
  top: 88px;
  max-height: calc(100vh - 112px);
  margin-bottom: 0;
  border-radius: 18px;
}

body.admin-bar.maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
  top: 120px;
  max-height: calc(100vh - 144px);
}

.maq-standalone-portal .maq-palette button {
  min-width: 42px;
  min-height: 42px;
}

@media (max-width: 1050px) {
  .maq-standalone-portal .maq-quiz-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .maq-standalone-portal .maq-quiz-main { order: 1; }

  .maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
    position: static;
    order: 2;
    max-height: none;
  }

  body.admin-bar.maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
    max-height: none;
  }

  .maq-standalone-portal .maq-palette {
    flex: none;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    max-height: 300px;
  }
}

@media (max-width: 680px) {
	.maq-standalone-portal .maq-question-block,
	body.admin-bar.maq-standalone-portal .maq-question-block {
		scroll-margin-top: 18px;
	}
  .maq-standalone-portal .maq-hero h1 {
    overflow-wrap: anywhere;
  }

  .maq-standalone-portal .maq-quiz-main,
  .maq-standalone-portal .maq-quiz-sidebar:not([hidden]) {
    padding: 1rem;
    border-radius: 15px;
  }

  .maq-standalone-portal .maq-question-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: .45rem;
  }

  .maq-standalone-portal .maq-progress {
    margin: .8rem 0 1.25rem;
  }

  .maq-standalone-portal .maq-question-title {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
    line-height: 1.35;
  }

  .maq-standalone-portal .maq-answer {
    gap: .7rem;
    min-height: 54px;
    padding: .85rem;
  }

  .maq-standalone-portal .maq-answer:hover {
    transform: none;
  }

  .maq-standalone-portal .maq-feedback {
    padding: 1rem;
  }

  .maq-standalone-portal .maq-question-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maq-standalone-portal .maq-question-controls .maq-button {
    width: 100%;
    min-width: 0;
    padding-inline: .75rem;
  }

  .maq-standalone-portal .maq-question-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maq-standalone-portal .maq-question-navigation .maq-actions-group,
  .maq-standalone-portal .maq-question-navigation .maq-button {
    width: 100%;
    min-width: 0;
  }

  .maq-standalone-portal .maq-question-navigation .maq-button {
    padding-inline: .6rem;
    font-size: .9rem;
    text-align: center;
  }

  .maq-standalone-portal .maq-palette-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maq-standalone-portal .maq-palette {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-height: 270px;
  }
}

@media (max-width: 430px) {
  .maq-standalone-portal .maq-question-controls {
    grid-template-columns: 1fr;
  }

  .maq-standalone-portal .maq-palette {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
