/* Quiz ServiceNow CAD: stiluri proprii paginii, peste style.css + palettes.css.
   Folosește aceleași token-uri de rol (--bg, --ink, --accent etc.). */

/* Verde/roșu de corectură, independente de paleta aleasă. */
:root{ --quiz-ok:oklch(0.52 0.15 150); --quiz-ok-soft:oklch(0.95 0.05 150); --quiz-bad:oklch(0.55 0.2 27); --quiz-bad-soft:oklch(0.95 0.04 27); }
html[data-theme="dark"]{ --quiz-ok:oklch(0.75 0.15 150); --quiz-ok-soft:oklch(0.3 0.06 150); --quiz-bad:oklch(0.72 0.17 27); --quiz-bad-soft:oklch(0.32 0.08 27); }

.quiz-page{ padding-top:7rem; padding-bottom:4rem; min-height:100vh; }
.quiz-container{ max-width:52rem; }
.quiz-screen[hidden]{ display:none; }

/* ---------- Start ---------- */
#screen-start h1{ font-size:clamp(2.25rem, 5vw, 3.5rem); font-weight:700; line-height:1.05; margin-top:0.75rem; }
#screen-start h1 em{ font-style:italic; color:var(--primary); }
.quiz-lead{ margin-top:1.5rem; max-width:38rem; color:var(--muted-foreground); line-height:1.7; }
.quiz-setup{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.quiz-setup-label{
  font-family:var(--font-mono); font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:0.625rem;
}
.quiz-choice-row{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.quiz-chip{
  border:1px solid var(--line); background:var(--card); color:var(--foreground);
  border-radius:var(--radius-md); padding:0.5rem 0.875rem; font-size:0.875rem; font-weight:500;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
  -webkit-appearance:none; appearance:none;
}
.quiz-chip:hover{ border-color:var(--muted-foreground); }
.quiz-chip.is-active{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }
.quiz-chip[disabled]{ opacity:.45; cursor:not-allowed; }
.quiz-mode-note{ margin-top:0.625rem; font-size:0.875rem; color:var(--muted-foreground); line-height:1.6; max-width:38rem; }
.quiz-mode-note[hidden]{ display:none; }
.quiz-setup-block[hidden]{ display:none; }
.quiz-pause[hidden]{ display:none; }
.quiz-bank-info{ margin-top:1.5rem; font-family:var(--font-mono); font-size:0.8125rem; color:var(--ink-faint); }
#screen-start .hero-actions{ margin-top:1.25rem; }

/* ---------- Întrebare ---------- */
.quiz-topbar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.quiz-progress-text{ font-family:var(--font-mono); font-size:0.875rem; color:var(--ink-soft); display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.quiz-domain-tag{
  font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:0.2rem 0.5rem; color:var(--ink-faint);
}
.quiz-timer{
  font-family:var(--font-mono); font-size:1.125rem; font-weight:600; letter-spacing:0.04em;
  border:1px solid var(--line); border-radius:var(--radius-md); padding:0.375rem 0.75rem; background:var(--card);
  font-variant-numeric:tabular-nums;
}
.quiz-timer.is-low{ color:var(--primary); border-color:var(--primary); }
.quiz-timer.is-off{ opacity:.5; }
.quiz-topbar-right{ display:flex; align-items:center; gap:0.5rem; }
.quiz-pause{
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft); border-radius:var(--radius-md);
  padding:0.4375rem 0.75rem; font-size:0.8125rem; font-weight:500; -webkit-appearance:none; appearance:none;
}
.quiz-pause:hover{ border-color:var(--muted-foreground); }
.quiz-paused-card{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.quiz-paused-card[hidden]{ display:none; }
.quiz-paused-card p{ color:var(--muted-foreground); }
.quiz-paused-card .stamp{ font-size:1.25rem; padding:0.4em 0.7em; }
.quiz-card[hidden]{ display:none; }
.quiz-progress{ margin-top:0.875rem; height:3px; background:var(--line); border-radius:9999px; overflow:hidden; }
.quiz-progress-bar{ height:100%; width:0; background:var(--primary); transition:width .3s ease; }

.quiz-card{
  margin-top:1.75rem; padding:2rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card);
}
.quiz-multi-hint{ font-family:var(--font-mono); font-size:0.75rem; color:var(--primary); font-weight:600; margin-bottom:0.75rem; }
.quiz-multi-hint[hidden]{ display:none; }
.quiz-question{ font-size:1.25rem; font-weight:600; line-height:1.45; }
.quiz-options{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.625rem; }
.quiz-option{
  display:flex; align-items:flex-start; gap:0.875rem; width:100%; text-align:left;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg);
  padding:0.875rem 1rem; font-size:0.9875rem; line-height:1.5; color:var(--foreground);
  transition:border-color .15s ease, background-color .15s ease;
  -webkit-appearance:none; appearance:none;
}
.quiz-option:hover{ border-color:var(--muted-foreground); }
.quiz-option .quiz-option-key{
  flex-shrink:0; width:1.75rem; height:1.75rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:0.8125rem; font-weight:600; color:var(--ink-soft);
}
.quiz-option[aria-pressed="true"]{ border-color:var(--primary); background:var(--accent-soft); }
.quiz-option[aria-pressed="true"] .quiz-option-key{ background:var(--primary); border-color:var(--primary); color:var(--primary-foreground); }

.quiz-actions{ margin-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; }
.quiz-actions .btn{ padding:0.75rem 1.5rem; }
.quiz-actions .btn[disabled], .quiz-flag[disabled], .quiz-finish-row .btn[disabled]{ opacity:.4; cursor:not-allowed; }
.quiz-flag{
  background:none; border:1px dashed var(--line); border-radius:var(--radius-md); color:var(--ink-soft);
  padding:0.625rem 0.875rem; font-size:0.8125rem; font-weight:500; -webkit-appearance:none; appearance:none;
}
.quiz-flag:hover{ border-color:var(--muted-foreground); }
.quiz-flag[aria-pressed="true"]{ border-style:solid; border-color:var(--primary); color:var(--primary); }

.quiz-nav-grid{ margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fill, minmax(2.25rem, 1fr)); gap:0.375rem; }
.quiz-nav-dot{
  height:2.25rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card);
  font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-soft); -webkit-appearance:none; appearance:none;
}
.quiz-nav-dot.is-answered{ background:var(--secondary); color:var(--foreground); }
.quiz-nav-dot.is-flagged{ border-color:var(--primary); color:var(--primary); }
.quiz-nav-dot.is-current{ outline:2px solid var(--ink); outline-offset:1px; }
.quiz-finish-row{ margin-top:1.5rem; display:flex; justify-content:flex-end; }

/* ---------- Rezultate ---------- */
.quiz-result-head{ display:grid; gap:1.5rem; }
.quiz-result-card{ width:100%; max-width:none; }
.quiz-result-card .cert-body{ padding:1.5rem 0; gap:1rem; }
.quiz-score{ font-family:var(--font-mono); font-size:3rem; font-weight:600; line-height:1; color:var(--primary); }
.quiz-domain-breakdown{ display:flex; flex-direction:column; gap:0.75rem; }
.quiz-domain-row{ display:grid; grid-template-columns:1fr auto; gap:0.5rem 1rem; align-items:center; font-size:0.875rem; }
.quiz-domain-row .name{ font-weight:500; }
.quiz-domain-row .val{ font-family:var(--font-mono); color:var(--ink-soft); }
.quiz-domain-row .bar{ grid-column:1 / -1; height:4px; background:var(--line); border-radius:9999px; overflow:hidden; }
.quiz-domain-row .bar span{ display:block; height:100%; background:var(--primary); }

.quiz-review-head{ margin-top:3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.quiz-review-head h2{ font-size:1.5rem; font-weight:700; }
.quiz-review{ margin-top:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.quiz-review-item{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); padding:1.25rem 1.5rem; }
.quiz-review-item[hidden]{ display:none; }
.quiz-review-meta{ display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-faint); }
.quiz-review-meta .stamp{ font-size:0.6875rem; padding:0.2em 0.5em; }
.quiz-review-q{ margin-top:0.625rem; font-size:1rem; font-weight:600; line-height:1.45; }
.quiz-review-opts{ margin:0.875rem 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:0.375rem; }
.quiz-review-opts li{
  display:flex; gap:0.625rem; align-items:flex-start; font-size:0.9rem; line-height:1.45;
  padding:0.5rem 0.75rem; border-radius:var(--radius-sm); border:1px solid transparent; color:var(--ink-soft);
}
.quiz-review-opts li .k{ font-family:var(--font-mono); font-size:0.75rem; font-weight:600; flex-shrink:0; width:1.25rem; }
.quiz-review-opts li.is-correct{ border-color:var(--quiz-ok); background:var(--quiz-ok-soft); color:var(--foreground); font-weight:500; }
.quiz-review-opts li.is-correct .k{ color:var(--quiz-ok); }
.quiz-review-opts li.is-wrong{ border-color:var(--quiz-bad); background:var(--quiz-bad-soft); color:var(--quiz-bad); }
.quiz-review-opts li.is-wrong .t{ text-decoration:line-through; }
.quiz-review-opts li .tag{ margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:0.6875rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; padding-left:0.5rem; align-self:center; }
.quiz-review-opts li.is-correct .tag{ color:var(--quiz-ok); }
.quiz-review-opts li.is-wrong .tag{ color:var(--quiz-bad); }
.quiz-review-meta .stamp.is-ok{ color:var(--quiz-ok); border-color:var(--quiz-ok); }
.quiz-review-meta .stamp.is-bad{ color:var(--quiz-bad); border-color:var(--quiz-bad); }
.quiz-review-exp{ margin-top:0.875rem; padding-top:0.875rem; border-top:1px dashed var(--line); font-size:0.9rem; line-height:1.6; color:var(--muted-foreground); }
#screen-result .hero-actions{ margin-top:2.5rem; }

@media (min-width:640px){
  .quiz-result-head{ grid-template-columns:1fr 1fr; align-items:start; }
}
@media (max-width:480px){
  .quiz-card{ padding:1.25rem; }
  .quiz-actions .btn{ flex:1; }
  .quiz-flag{ order:3; width:100%; text-align:center; }
}