/* ch-078 — جعبهٔ سیاه (templates/challenge_taking/kinds/_blackbox.html). چیدمان نوار و جدول از ch065.css (ng-bar، sm-t). */
.bb{display:flex;flex-direction:column;gap:12px}
.bb-sec{display:flex;flex-direction:column;gap:6px;min-width:0}
.bb-empty{margin:0;font-size:var(--fs-2)}
.bb-free{padding:2px 10px;border-radius:99px;background:var(--s2);font-size:var(--fs-1);color:var(--ink-2)}
.bb-free.is-over{background:var(--danger-soft);color:var(--danger-ink);font-weight:700}
.bb-t td,.bb-t th{white-space:normal}
.bb-t .bb-t__out{background:color-mix(in srgb,var(--accent-soft) 55%,transparent);min-width:7rem}
.bb-t thead .bb-t__out{color:var(--ink)}
.bb-t tr.is-ok .bb-t__out:last-child{background:var(--ok-soft)}
.bb-t tr.is-half .bb-t__out:last-child{background:color-mix(in srgb,var(--s3) 80%,transparent)}
.bb-t tr.is-bad .bb-t__out:last-child{background:var(--danger-soft)}
.bb-mark{display:inline-block;margin-inline-start:4px;font-weight:800}
.bb-t tr.is-bad .bb-mark{color:var(--danger-ink)}
.bb-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:10px 16px}
.bb-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.bb-f--wide{grid-column:1/-1}
.bb-f__l{font-size:var(--fs-2);font-weight:700;color:var(--ink)}
.bb-f__l small{font-weight:600;color:var(--ink-3)}
.bb-f__n{font-variant-numeric:tabular-nums;text-align:left}
.bb-f__hint{font-size:var(--fs-1);color:var(--ink-3)}
.bb-pred{min-width:7rem;font-variant-numeric:tabular-nums}
.bb-rule{margin:0;font-size:var(--fs-2);line-height:1.9;color:var(--ink-2)}
.bb-form .ch-acts .tk-ic{width:16px;height:16px}
@media (forced-colors:active){.bb-t .bb-t__out{border-inline-start:1px solid CanvasText}}
/* گوشی: هر ردیف جدول یک کارت؛ برچسب هر خانه از data-label، تا خانهٔ پیش‌بینی بی‌پیمایش افقی دیده شود */
@media (max-width:640px){
  .bb .sm-tw{overflow:visible;box-shadow:none;background:none}
  .bb-t,.bb-t tbody,.bb-t tr,.bb-t th,.bb-t td{display:block}
  .bb-t thead{display:none}
  .bb-t tbody{display:flex;flex-direction:column;gap:8px}
  .bb-t tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 12px;padding:10px 12px;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line);background:var(--s1)}
  .bb-t th,.bb-t td{padding:2px 0;border-top:0;white-space:normal;min-width:0;background:none}
  .bb-t th[scope=row]{grid-column:1/-1;font-size:var(--fs-1);color:var(--ink-3)}
  .bb-t th[scope=row]::before,.bb-t td::before{content:attr(data-label);display:block;font-size:var(--fs-1);font-weight:600;color:var(--ink-3)}
  .bb-t th[scope=row]::before{display:inline;margin-inline-end:4px}
  .bb-t .bb-t__out{grid-column:1/-1;margin-top:4px;padding:6px 8px;border-radius:var(--r);background:color-mix(in srgb,var(--accent-soft) 70%,transparent)}
  .bb-t tr.is-ok .bb-t__out:last-child{background:var(--ok-soft)}
  .bb-t tr.is-bad .bb-t__out:last-child{background:var(--danger-soft)}
  .bb-pred{width:100%}
}
.bb-code{font-size:.95em;unicode-bidi:isolate}
.bb-t tr.is-ok .bb-mark{color:var(--ok-ink)}