/* ============================================================
   GED practice pages: question cards, results and score checker.
   Loaded after /blog/assets/article.css and uses its tokens.
   ============================================================ */

.pq-part{ margin-top:2.2em; }
.pq-note{ font-size:15.5px; color:var(--muted); margin-top:.5em; }

.pq{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin:18px 0 0; background:#fff; }
.pq legend{ padding:0; float:left; width:100%; margin-bottom:12px; }
.pq legend + *{ clear:both; }
.pq-meta{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.pq-num{ color:var(--primary-text); white-space:nowrap; }
.pq-q{ font-size:17.5px; line-height:1.6; color:var(--ink); margin:0 0 12px; font-weight:500; }
.pq-stim{ background:var(--surface); border-left:3px solid var(--primary); border-radius:8px; padding:14px 16px; margin:0 0 14px; font-size:16px; line-height:1.65; }
.pq-stim p{ margin:0; }
.pq-stim p + *{ margin-top:10px; }
.pq-stim table{ min-width:0; font-size:15px; background:#fff; }
.pq-stim th, .pq-stim td{ padding:8px 12px; }
.pq-same{ margin:0 0 10px; font-style:italic; }
.pq-opts{ display:grid; gap:8px; }
.pq-opt{ display:flex; gap:12px; align-items:flex-start; padding:10px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer; font-size:16.5px; line-height:1.5; transition:border-color .15s var(--ease), background .15s var(--ease); }
.pq-opt:hover{ border-color:#BDBDBD; }
.pq-opt input{ margin-top:5px; accent-color:var(--primary); }
.pq-letter{ font-weight:700; color:var(--ink); min-width:1.2em; }
.pq-opt.is-correct{ border-color:#2E9E4F; background:#EFFAF2; }
.pq-opt.is-wrong{ border-color:#D64545; background:#FDF0F0; }
.pq-feedback{ margin-top:10px; font-size:15.5px; font-weight:600; min-height:0; }
.pq-feedback.ok{ color:#1F7A3B; }
.pq-feedback.no{ color:#B3261E; }

.pq-explain{ margin-top:12px; border-top:1px dashed var(--line); padding-top:10px; }
.pq-explain summary{ cursor:pointer; font-size:15px; font-weight:600; color:var(--primary-text); }
.pq-explain p{ font-size:16px; line-height:1.65; margin-top:8px; }
.pq-trap{ color:var(--muted); }

.pq-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.pq-result{ margin-top:24px; border:2px solid var(--primary); border-radius:14px; padding:22px 24px; background:var(--primary-light); }
.pq-result[hidden]{ display:none; }
.pq-result h3{ font-size:22px; margin:0 0 6px; }
.pq-result ul{ margin:10px 0 0; padding-left:20px; font-size:16px; }

/* Subject cards on the practice hub */
.subject-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:1em; }
.subject-card{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:#fff; }
.subject-card h3{ font-size:18px; margin:0 0 4px; }
.subject-card p{ font-size:15.5px; line-height:1.55; }
.subject-card .soon{ display:inline-block; margin-top:8px; font-size:13px; font-weight:600; color:var(--muted); }
.subject-card a.go{ display:inline-block; margin-top:8px; font-size:15px; font-weight:700; color:var(--primary-text); }
.subject-card a.go:hover{ text-decoration:underline; }

/* Score checker */
.checker{ border:1px solid var(--line); border-radius:14px; padding:22px 24px; background:var(--surface); margin-top:1em; }
.checker-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.checker label{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.checker input[type=number]{ width:100%; margin-top:6px; padding:10px 12px; font:inherit; font-size:16px; border:1px solid #CFCFCF; border-radius:8px; background:#fff; }
.checker-out{ margin-top:18px; display:grid; gap:10px; }
.checker-row{ border-radius:10px; padding:12px 14px; font-size:15.5px; line-height:1.5; border:1px solid var(--line); background:#fff; }
.checker-row strong{ color:var(--ink); }
.checker-row.green{ border-color:#2E9E4F; background:#EFFAF2; }
.checker-row.yellow{ border-color:#D9A400; background:#FFF8E1; }
.checker-row.red{ border-color:#D64545; background:#FDF0F0; }
.checker-row a{ color:var(--primary-text); font-weight:600; text-decoration:underline; }

@media (max-width: 640px){
  .pq{ padding:16px; }
  .subject-grid, .checker-grid{ grid-template-columns:1fr; }
}