/* =========================================================================
   QALadder — take-home hub interactive blocks  (loads AFTER article.css)
   Archetype cards, walkthrough steps, the rubric self-scorer and the
   rejection wall. Everything here is namespaced .th-* so nothing leaks into
   the other article pages that share article.css.
   ========================================================================= */

/* ===== ARCHETYPE CARDS ================================================= */
.th-arch{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px;}
.th-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 16px;margin:0;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.th-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.th-card-top{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.th-n{
  flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:7px;background:var(--accent-soft);color:var(--accent-deep);
  font-family:var(--font-mono);font-size:12px;font-weight:700;
}
.th-card-top h3{flex:1;margin:0;font-size:15.5px;line-height:1.3;}
.th-time{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;white-space:nowrap;
  color:var(--text-soft);background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:3px 9px;
}
.th-card p{font-size:14.5px;line-height:1.6;margin:0 0 8px;color:var(--text);}
.th-card p:last-child{margin-bottom:0;}
.th-tests{color:var(--text-soft);}
.th-tests b{color:var(--accent-deep);font-weight:650;}

/* ===== WALKTHROUGH STEPS =============================================== */
.th-step{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  margin:0 0 12px;transition:border-color var(--t-fast);
}
.th-step:hover{border-color:var(--border-strong);}
.th-step[open]{border-color:var(--accent);}
.th-step summary{
  list-style:none;cursor:pointer;padding:13px 16px;
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
}
.th-step summary::-webkit-details-marker{display:none;}
.th-sn{
  flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;border:1.5px solid var(--accent);color:var(--accent-deep);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  align-self:center;
}
.th-step[open] .th-sn{background:var(--accent);color:var(--surface);}
.th-step summary b{font-size:15.5px;}
.th-gist{flex:1 1 100%;margin-left:33px;font-size:13.5px;color:var(--text-soft);}
.th-step[open] .th-gist{display:none;}
.th-step-body{padding:2px 16px 14px 49px;}
.th-step-body p{font-size:15.5px;}
.th-step-body pre{margin-left:0;}

/* ===== RUBRIC SELF-SCORER ============================================== */
.th-score{
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:8px 8px 14px;margin:0 0 18px;box-shadow:var(--shadow-sm);
}
.th-item{
  display:flex;align-items:baseline;gap:11px;cursor:pointer;
  padding:9px 10px;border-radius:9px;transition:background var(--t-fast);
}
.th-item:hover{background:var(--surface-2);}
.th-item input{
  flex:0 0 auto;width:17px;height:17px;accent-color:var(--accent);cursor:pointer;
  transform:translateY(2px);
}
.th-w{
  flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  color:var(--text-faint);border:1px solid var(--border);border-radius:6px;
  padding:1px 6px;min-width:28px;text-align:center;
}
.th-item:has(input:checked) .th-w{color:var(--accent-deep);border-color:var(--accent);background:var(--accent-soft);}
.th-t{font-size:14.5px;line-height:1.55;color:var(--text);}
.th-t b{font-weight:650;}
.th-total{margin:10px 10px 0;padding-top:14px;border-top:1px dashed var(--border-strong);}
.th-bar{height:8px;background:var(--surface-3);border-radius:999px;overflow:hidden;}
.th-fill{
  display:block;height:100%;width:0%;border-radius:999px;background:var(--fail);
  transition:width var(--t-slow) var(--ease),background var(--t-slow);
}
.th-fill.mid{background:var(--warn);}
.th-fill.good{background:var(--pass);}
.th-read{display:flex;align-items:baseline;gap:12px;margin:10px 0 0;font-size:14.5px;color:var(--text-soft);}
.th-num{
  font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--text);
  min-width:2.2ch;
}
.th-num::after{content:"/100";font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-faint);margin-left:2px;}

/* ===== REJECTION WALL ================================================== */
.th-fails{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;}
.th-x{
  margin:0;padding:10px 13px 10px 34px;position:relative;
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--fail);
  border-radius:var(--r-sm);font-size:14px;line-height:1.55;color:var(--text);
}
.th-x::before{
  content:"✕";position:absolute;left:12px;top:10px;
  color:var(--fail);font-weight:700;font-size:12px;
}

/* ===== RESPONSIVE ====================================================== */
@media(max-width:700px){
  .th-arch,.th-fails{grid-template-columns:1fr;}
  .th-step-body{padding-left:16px;}
  .th-gist{margin-left:0;}
}