/* =========================================================================
   Kuis Minat, version 2 (15 Oct 2026): the parts the six-type quiz added.
   Loaded after app.css on the quiz's pages only; the shared quiz styles
   (.qz-panel, .qz-list, .qz-verdict, the options) stay in app.css. Every
   colour is a token, so dark is right by construction.
   ========================================================================= */

/* The stem the thirty rating questions share, over the activity itself. */
.qz-stem { margin: 0 0 0.35rem; font-size: 0.92rem; font-weight: 600; color: var(--muted); }

/* -- Intro ---------------------------------------------------------------- */

.qz-start-note { margin: 0.8rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); max-width: 30rem; }
.qz-prev-label--sub { font-weight: 600; color: var(--muted); }
/* Ten rumpun, some of them three words long: they wrap rather than lose
   their ends to an ellipsis. */
.qz-cluster > span:last-child { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* What the questions are adapted from, and the profiles: owed, kept small. */
.qz-source { margin: 1.5rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--muted); max-width: 40rem; }
.qz-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qz-source a:hover { color: var(--ink); }

/* -- Result: the type ------------------------------------------------------
   No coloured stripe along the top edge: a card is not marked with an accent
   stripe on this site (14 Oct 2026, the Jelajahi cards). */
.qz-type::before { display: none; }
/* The card used to sit in .qz-verdicts, which gave the gap below it. */
.qz-type { margin-bottom: 1.25rem; }
.qz-type .qz-eyebrow { display: block; margin-bottom: 0.45rem; }
.qz-type .qz-title { margin-bottom: 0.85rem; }

.qz-type-what { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; }
.qz-type-what li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.95rem; line-height: 1.55; color: var(--muted); }
.qz-type-what i { color: var(--accent-ink); flex: none; transform: translateY(0.12em); }
.qz-type-what b { color: var(--ink); font-weight: 700; }

.qz-types { display: grid; gap: 0.55rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.qz-type-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0.8rem; }
.qz-type-name { font-size: 0.85rem; color: var(--muted); }
.qz-type-row.is-lead .qz-type-name { color: var(--ink); font-weight: 700; }
.qz-type-row.is-lead .qz-bar-fill { background: var(--primary); }

/* -- Result: the families -------------------------------------------------- */

.qz-fams { list-style: none; margin: 0; padding: 0; }
.qz-fam {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.qz-fam:first-child { border-top: 0; padding-top: 0; }
.qz-fam-rank { font-size: 0.9rem; font-weight: 800; color: var(--muted); text-align: right; line-height: 1.4; }
.qz-fam:first-child .qz-fam-rank { color: var(--accent-ink); }
.qz-fam-main { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.qz-fam-name { font-weight: 700; font-size: 0.98rem; line-height: 1.4; color: var(--ink); text-decoration: none; }
.qz-fam-name:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.qz-fam-mapel { font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.qz-fam-mapel b { color: var(--ink); font-weight: 700; }