/* Section: quiz_summary_panel — mockup EXALCO-Quiz "SIDE PANEL" + live recommendation (spec 08.1.5, proposal). */

.ex-quiz-summary-panel {
  padding: 20px 22px;
  border: .5px solid rgba(35, 31, 32, .2);
  background: var(--ex-tint);
  color: var(--ex-ink);
}
/* rendered as its own row (not next to the wizard) */
.ex-quiz-summary-panel-section .ex-quiz-summary-panel { max-width: 460px; }

.ex-quiz-summary-panel__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ex-quiz-summary-panel__title { margin: 0; font-size: 10.5px; font-weight: 700; line-height: normal; letter-spacing: .22em; color: var(--ex-ink); }
.ex-quiz-summary-panel__count { flex: none; margin-left: auto; font-size: 12px; font-weight: 800; color: var(--ex-red); }

.ex-quiz-summary-panel__list { margin: 0; font-size: 12.5px; }
.ex-quiz-summary-panel__row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: .5px solid rgba(35, 31, 32, .14); }
.ex-quiz-summary-panel__key { flex: none; width: 86px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--ex-text-muted); }
.ex-quiz-summary-panel__value { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; margin: 0; }
.ex-quiz-summary-panel__value-text { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.ex-quiz-summary-panel__edit {
  flex: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ex-red);
  /* Rendered value: the mockup's `font: … inherit` shorthand is invalid CSS and is dropped, so the control shows the default control font (13.33px / 400). */
  font-family: inherit;
  font-size: var(--ex-fs-control);
  font-weight: 400;
  line-height: normal;
  letter-spacing: .08em;
  cursor: pointer;
}
.ex-quiz-summary-panel__edit:hover,
.ex-quiz-summary-panel__edit:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* answered row: `.is-active` is set by JS; the design keeps the key muted on every row, so no style hangs on it */

/* ---- Live recommendation ---- */
.ex-quiz-summary-panel__reco { margin-top: 14px; padding: 12px 14px; border: var(--ex-border-w, 1.5px) solid var(--ex-line); background: var(--ex-white); }
.ex-quiz-summary-panel__reco:not([hidden]) { animation: ex-quiz-summary-fade .25s ease both; }
.ex-quiz-summary-panel__reco-label { margin: 0 0 8px; font-size: 10px; font-weight: 700; line-height: 1.3; letter-spacing: .2em; color: var(--ex-red); }
.ex-quiz-summary-panel__reco-link { display: flex; align-items: center; gap: 12px; color: var(--ex-ink); text-decoration: none; }
.ex-quiz-summary-panel__reco-media { flex: none; width: 56px; height: 56px; overflow: hidden; background: var(--ex-grey-img); }
.ex-quiz-summary-panel__reco-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex-quiz-summary-panel__reco-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ex-quiz-summary-panel__reco-name { font-size: 14px; font-weight: 800; line-height: 1.25; transition: color var(--ex-t-fast); }
.ex-quiz-summary-panel__reco-hint { font-size: 11px; line-height: 1.45; color: var(--ex-text-muted); }
.ex-quiz-summary-panel__reco-link[href]:hover .ex-quiz-summary-panel__reco-name,
.ex-quiz-summary-panel__reco-link[href]:focus-visible .ex-quiz-summary-panel__reco-name { color: var(--ex-red); }

.ex-quiz-summary-panel__note { margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--ex-red); font-size: 11.5px; line-height: 1.6; color: var(--ex-ink); }

@keyframes ex-quiz-summary-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Responsive (proposal — not designed) ---- */
@media (max-width: 899px) {
  .ex-quiz-summary-panel__row { align-items: center; min-height: var(--ex-touch); padding-block: 4px; }
  .ex-quiz-summary-panel__edit { min-height: var(--ex-touch); padding-inline: 6px 0; }
  .ex-quiz-summary-panel__reco-link { min-height: var(--ex-touch); }
}
@media (max-width: 599px) {
  .ex-quiz-summary-panel { padding: 18px 16px; }
  .ex-quiz-summary-panel__key { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-quiz-summary-panel__reco:not([hidden]) { animation: none; }
  .ex-quiz-summary-panel__reco-name { transition: none; }
}