/* ============================================================
   pbq.css — performance-based question UI
   ============================================================ */
.pbq-card { background: var(--surface); border: 1px solid var(--line-bright); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4); }
.pbq-type { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); margin-bottom: var(--sp-2); }
.pbq-title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg); color: var(--ink); margin-bottom: var(--sp-2); }
.pbq-scenario { color: var(--ink-dim); font-size: var(--t-sm); margin-bottom: var(--sp-5); }

/* chips */
.pbq-chip { display: inline-flex; align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--surface-3); border: 1px solid var(--line-bright); border-radius: var(--radius); color: var(--ink); font-size: var(--t-sm); cursor: grab; user-select: none; touch-action: none; margin: 3px; transition: border-color .12s, background .12s; }
.pbq-chip:hover { border-color: var(--signal); }
.pbq-chip[data-locked] { cursor: default; }
.pbq-dragging-src { opacity: 0.35; }
.pbq-ghost { position: fixed; z-index: 1000; pointer-events: none; box-shadow: var(--shadow-lg); background: var(--surface-2); border-color: var(--signal); }
.pbq-correct { background: color-mix(in srgb, var(--status-strong) 20%, transparent) !important; border-color: var(--status-strong) !important; }
.pbq-wrong { background: color-mix(in srgb, var(--status-weak) 18%, transparent) !important; border-color: var(--status-weak) !important; }

/* pool */
.pbq-pool-wrap { margin-top: var(--sp-4); }
.pbq-pool-label { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: var(--sp-2); }
.pbq-pool { display: flex; flex-wrap: wrap; gap: 2px; min-height: 52px; padding: var(--sp-2); background: var(--bg); border: 1px dashed var(--line-bright); border-radius: var(--radius); }
.pbq-pool.pbq-over, .pbq-over { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 8%, var(--bg)); }

/* match */
.pbq-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.pbq-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-3); align-items: center; }
.pbq-left { font-family: var(--font-mono); font-weight: 700; color: var(--signal); padding: var(--sp-3) var(--sp-4); background: var(--bg); border-radius: var(--radius); text-align: center; }
.pbq-slot { min-height: 46px; display: flex; align-items: center; padding: 3px; background: var(--bg); border: 1px dashed var(--line-bright); border-radius: var(--radius); }
.pbq-slot .pbq-chip { margin: 0; width: 100%; }

/* order */
.pbq-order { display: flex; flex-direction: column; gap: 6px; }
.pbq-order-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface-3); border: 1px solid var(--line-bright); border-radius: var(--radius); cursor: grab; touch-action: none; user-select: none; }
.pbq-order-item[data-locked] { cursor: default; }
.pbq-grip { color: var(--ink-faint); }
.pbq-order-label { flex: 1; color: var(--ink); font-size: var(--t-sm); }
.pbq-pos { color: var(--ink-faint); font-size: var(--t-xs); }

/* categorize */
.pbq-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.pbq-bucket { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3); }
.pbq-bucket-label { font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--ink); margin-bottom: var(--sp-2); text-align: center; }
.pbq-bucket-zone { min-height: 80px; display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border: 1px dashed var(--line-bright); border-radius: var(--radius-sm); }
.pbq-bucket-zone .pbq-chip { margin: 0; }

/* actions + result */
.pbq-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.pbq-result { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--radius); display: none; }
.pbq-result.show { display: block; animation: fbIn .25s ease; }
.pbq-result .pr-score { font-family: var(--font-display); font-weight: 700; font-size: var(--t-md); margin-bottom: var(--sp-2); }
.pbq-result.pass { background: color-mix(in srgb, var(--status-strong) 12%, transparent); border: 1px solid var(--status-strong); }
.pbq-result.pass .pr-score { color: var(--status-strong); }
.pbq-result.partial { background: color-mix(in srgb, var(--status-learn) 12%, transparent); border: 1px solid var(--status-learn); }
.pbq-result.partial .pr-score { color: var(--status-learn); }
.pbq-result .pr-explain { font-size: var(--t-sm); color: var(--ink-dim); }

/* ---- subnet design PBQ ---- */
.pbq-design-given { font-size: var(--t-sm); color: var(--ink); background: var(--bg); border: 1px solid var(--line-bright); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); text-align: center; }
.pbq-design-given .mono { color: var(--signal); font-weight: 700; }
.pbq-design-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.pbq-design-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-3); align-items: center; }
.pbq-design-label { font-size: var(--t-sm); color: var(--ink-dim); }
.pbq-design-input { background: var(--surface-3); border: 1px solid var(--line-bright); border-radius: var(--radius); padding: var(--sp-3); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink); }
.pbq-design-input:focus { outline: none; border-color: var(--signal); }
.pbq-design-input.pbq-correct { background: color-mix(in srgb, var(--status-strong) 18%, transparent); border-color: var(--status-strong); }
.pbq-design-input.pbq-wrong { background: color-mix(in srgb, var(--status-weak) 16%, transparent); border-color: var(--status-weak); }
.pbq-design-fix { color: var(--status-strong); font-size: var(--t-sm); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px){ .pbq-design-row { grid-template-columns: 1fr; gap: 4px; } .pbq-design-fix { justify-self: start; } }