/* Compact quick-placement chooser. All styles are scoped to the intro only. */
.qp-path-picker {
  margin-block: 16px 24px;
  text-align: start;
}
.qp-path-rows { display: grid; gap: 11px; }
.qp-path-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 62px;
  gap: 5px;
  padding: 5px 10px 5px 6px;
  border: 1px solid #e3dcfa;
  border-radius: 16px;
  background: linear-gradient(110deg, #fbfaff, #f5f1ff);
  box-shadow: 0 3px 10px rgba(75, 54, 125, .045);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.qp-path-row:hover, .qp-path-row:focus-within {
  background: #f5f1ff;
  border-color: #b7a5f5;
  box-shadow: 0 7px 18px rgba(92, 66, 175, .1);
}
.qp-path-form { flex: 1 1 auto; margin: 0; min-width: 0; }
.qp-path-action {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  width: 100%;
  min-height: 50px;
  padding: 8px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-weight: 800;
  font-size: .96rem;
  line-height: 1.6;
  text-align: start;
  color: #3c2c69;
  text-decoration: none;
  cursor: pointer;
}
.qp-path-action:hover { color: #6242d9; text-decoration: none; }
.qp-path-action:active { transform: scale(.99); }
.qp-path-action:focus-visible, .qp-path-hint summary:focus-visible {
  outline: 3px solid #aa94ff;
  outline-offset: 1px;
}
.qp-path-action:disabled { opacity: .5; cursor: not-allowed; }
.qp-path-hint { flex: 0 0 46px; position: relative; display: flex; align-items: center; justify-content: center; }
.qp-path-hint summary {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  color: #7e68bb;
  cursor: pointer;
  list-style: none;
}
.qp-path-hint summary::-webkit-details-marker { display: none; }
.qp-path-hint summary svg { width: 30px; height: 30px; }
.qp-path-hint summary:hover, .qp-path-hint[open] summary {
  background: #eee8ff;
  color: #6043cf;
}
.qp-path-hint-content {
  position: absolute;
  z-index: 15;
  inset-inline-end: 0;
  bottom: calc(100% + 9px);
  width: min(260px, calc(100vw - 52px));
  padding: 11px 13px;
  border-radius: 11px;
  background: #352d4d;
  color: #fff;
  box-shadow: 0 8px 24px rgba(29, 19, 56, .23);
  line-height: 1.8;
  font-size: .84rem;
  font-weight: 400;
  text-align: start;
  overflow-wrap: anywhere;
}
.qp-path-hint:not([open]) .qp-path-hint-content { display: none; }
.qp-path-fallback { font-size: .75rem; }
@media (max-width: 600px) {
  .qp-path-picker { margin-block: 14px 18px; }
  .qp-path-rows { gap: 8px; }
  .qp-path-row { min-height: 58px; }
}

/* Short introduction and clearly separated educational summary. */
.qp-choice-intro {
  max-width: 510px;
  margin: 0 auto 15px;
  color: #59506e;
  line-height: 1.9;
  font-size: .95rem;
}
.qp-choice-intro span { display: block; margin-top: 5px; color: #775eb9; font-size: .87rem; }
/* Visual reference to the same 30px info icon used next to each path. */
.qp-choice-intro .qp-choice-inline-info {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-inline: 2px;
  color: #7e68bb;
}
.qp-test-overview {
  padding-top: 17px;
  margin-top: 19px;
  border-top: 1px solid #eee9f7;
  text-align: start;
}
.qp-test-overview-heading { color: #403755; font-weight: 800; font-size: 1rem; margin: 0 0 8px; }
.qp-test-overview > p:last-child { color: #625b72; font-size: .9rem; line-height: 1.95; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .qp-path-row { transition: none; }
  .qp-path-action { transition: none; }
}

/* Match the Home/Books page gutters without changing question/result panels.
   Both authenticated pages already have padding on .app-content. */
.qp-page--intro {
  padding-inline: var(--space-6, 32px);
  padding-top: 24px;
}
.qp-page--intro .qp-shell { width: min(100%, 1040px); }
.qp-page--intro .qp-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.app-content > .qp-page--intro {
  padding-inline: 0;
  padding-top: 0;
}

/* Reuse the brand image already displayed in the Home navigation. */
.qp-mark--brand { background: transparent; }
.qp-mark--brand img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

@media (max-width: 720px) {
  /* On phones Home and Books use a 14px gutter rather than the app shell's 24px. */
  .app-content > .qp-page--intro {
    margin-inline: calc(14px - var(--space-5, 24px));
  }
}
@media (max-width: 480px) {
  /* Public Books use --space-4 here; authenticated gutters remain shell-owned. */
  .qp-page--intro { padding-inline: var(--space-4, 16px); }
  .app-content > .qp-page--intro { padding-inline: 0; }
}
@media (max-width: 380px) {
  .app-content > .qp-page--intro {
    margin-inline: calc(10px - var(--space-5, 24px));
  }
}