/* Standard quiz frame styles */

.qf {
  display: grid;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  min-width: 0;
}

.qf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.qf-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.qf-tab,
.qf-return,
.qf-start-over {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.qf-tab[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border-color: var(--accent);
}

.qf-save {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border: 1px solid var(--accent);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 650;
}

.qf-save[disabled] {
  opacity: .6;
  cursor: default;
}

.qf-save,
.qf-start-over,
.qf-return {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qf .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.qf-head {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .qf-head {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  }
}

.qf-head h1 {
  margin: 0 0 6px;
  font-size: 1.8rem;
}

.qf-description {
  margin: 0;
  color: var(--muted);
}

.qf-how {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.qf-how h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.qf-how p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

.qf-body {
  min-width: 0;
}

.qf-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.qs {
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  gap: 14px;
}

.qs-count {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

.qs-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2, var(--line));
  overflow: hidden;
}

.qs-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.qs-question {
  margin: 8px 0 0;
  text-align: left;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.qs-row { min-width: 0; margin: 0; padding: 0; border: 0; }

.qs-hint {
  margin: 0;
  text-align: center;
  color: var(--muted);
}

.qs-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.qs-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 46px;
  padding: 8px 6px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.qs-choice.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.qs-choice input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.qs-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.qs-back,
.qs-next {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.qs-next {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border-color: var(--accent);
}

.qs-back[disabled],
.qs-next[disabled] {
  opacity: .5;
  cursor: default;
}

@media (max-width: 600px) {
  .qf-actions {
    margin-left: 0;
    width: 100%;
  }
  .qs {
    padding: 14px;
  }
  .qs-question {
    font-size: 1rem;
  }
  .qs-choices { gap: 4px; }
  .qs-choice { gap: 3px; padding: 6px 3px; font-size: .72rem; }
  .qs-choice input { width: 13px; height: 13px; }
}

/* The quizzes inside the frame use its width, not their old 760px column */
.pew-estimate:has(> .qf), .ideology:has(> .qf), .personality:has(> .qf) { max-width: none; padding: 0; margin: 0; }
.qf-body > * + * { margin-top: 12px; }
.rank-body { display: grid; gap: 12px; }
.rank-body > * + * { margin-top: 0; }

/* The quizzes' own button style (.pew-estimate button) must not override the frame's: Save results is always
   highlighted, the chosen quiz tab filled. */
.qf button.qf-save, .qf button.qs-next { background: var(--accent); color: var(--accent-ink, #fff); border: 1px solid var(--accent); }
.qf button.qf-tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.qf button.qf-tab, .qf button.qf-return, .qf button.qf-start-over, .qf button.qs-back { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.qf button.qf-tab[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); border-color: var(--accent); }
.qf .qf-bar button { padding: 7px 14px; border-radius: 8px; }