/* ch-066 — ساخت مرحله از JSON: صفحهٔ بارگذاری، گزارش بررسی، کیت JSON مرحله. روی توکن‌های lab.css (--s1، --ink-2، --r-lg، …). */

/* دکمه‌های دوتایی در سر کارت (مرحله‌ها: «ساخت از JSON» + «+ مرحله جدید») */
.chh-card__head .chh-card__btns{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chh-card__head .chh-card__btns .sk-btn{margin-inline-start:0}

/* ---------- صفحهٔ ساخت از JSON ---------- */
.sj-intro{margin:0;padding:14px 20px;border-radius:var(--r-lg);background:var(--s1);font-size:var(--fs-2);line-height:2;color:var(--ink-2)}
.sj-intro b{color:var(--ink)}
.sj-split{grid-template-columns:300px minmax(0,1fr)}
.sj-side{display:flex;flex-direction:column;gap:var(--gap)}
.sj-card{padding:18px 20px;gap:12px}
.sj-card .chh-card__head{padding-bottom:12px}
.sj-side__acts{display:flex;gap:8px;flex-wrap:wrap}
.sj-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;counter-reset:sj}
.sj-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:start;counter-increment:sj}
.sj-steps li::before{content:counter(sj, persian);grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--s2);color:var(--ink-2);font-size:var(--fs-1);font-weight:800;display:grid;place-items:center}
.sj-steps b{font-size:var(--fs-2);font-weight:800;line-height:1.7}
.sj-steps span{font-size:var(--fs-1);color:var(--ink-3);line-height:1.8}
.sj-form{display:flex;flex-direction:column;gap:var(--gap)}
.sj-text{min-height:260px;font-size:12.5px;line-height:1.75;tab-size:2;white-space:pre;overflow:auto}
.sj-actions{padding-top:0}
.sj-chip{display:inline-block;margin:2px 0 2px 6px;padding:2px 10px;border-radius:999px;background:var(--s2);color:var(--ink-2);font-size:12.5px;line-height:1.8;text-decoration:none}
a.sj-chip--link:hover{background:var(--accent-soft);color:var(--accent-ink)}

/* گزارش بررسی */
.sj-report{gap:12px;border-inline-start:4px solid var(--line-2)}
.sj-report.is-ok{border-inline-start-color:var(--ok-ui)}
.sj-report.is-bad{border-inline-start-color:var(--danger)}
.sj-report__h,.sj-done__h{display:flex;align-items:flex-start;gap:12px}
.sj-report__h b,.sj-done__h b{display:block;font-size:var(--fs-3);font-weight:800;line-height:1.6}
.sj-report__h small,.sj-done__h small{display:block;margin-top:4px;font-size:var(--fs-1);color:var(--ink-3);line-height:1.9}
.sj-report__ic,.sj-done__ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--s2);color:var(--ink-2)}
.sj-report__ic svg,.sj-done__ic svg{width:20px;height:20px}
.is-ok .sj-report__ic,.sj-done__ic{background:var(--ok-soft);color:var(--ok-ink)}
.is-bad .sj-report__ic{background:var(--danger-soft);color:var(--danger-ink)}
.sj-sub{display:flex;align-items:baseline;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.sj-sub b{font-size:var(--fs-2);font-weight:800}
.sj-sub small{font-size:var(--fs-1);color:var(--ink-3)}
.sj-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.sj-list li{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:var(--r);font-size:var(--fs-2);line-height:1.9;background:var(--s2)}
.sj-list--bad li{background:var(--danger-soft)}
.sj-list--warn li{background:var(--warn-soft)}
.sj-list code{flex:none;font-family:var(--mono);font-size:12px;padding:1px 8px;border-radius:6px;background:var(--s1);color:var(--ink-2);unicode-bidi:isolate;max-width:100%;overflow-wrap:anywhere}
.sj-list span{flex:1 1 220px;min-width:0}
.sj-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;border-radius:var(--r);background:var(--s2);padding:4px 0}
.sj-summary>div{display:flex;flex-direction:column;gap:2px;padding:8px 14px;min-width:0}
.sj-summary>div+div{border-inline-start:1px solid var(--line)}
.sj-summary small{font-size:var(--fs-1);color:var(--ink-3)}
.sj-summary b{font-size:var(--fs-2);font-weight:800;overflow-wrap:anywhere}
.sj-summary span{font-size:12px;color:var(--ink-3)}
.sj-done{gap:12px;background:var(--ok-soft)}
.sj-done .sj-list--warn li{background:var(--s1)}
.sj-done .chh-hint{align-self:center}

/* ---------- کیت JSON مرحله ---------- */
.sj-types .ch-tablewrap{border-radius:var(--r)}
.sj-types__t td{height:auto;padding:10px 14px}
.sj-types__t td code{white-space:nowrap;font-family:var(--mono);font-size:12.5px;background:var(--s2);border-radius:6px;padding:1px 8px}
.sj-types__t tbody tr:hover .sj-chip{background:var(--s1)}
.sj-kit .lk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.sj-types__s{padding:8px 10px!important}
.sj-types__s>div{display:flex;flex-wrap:wrap;gap:4px}
.sj-types__s .sj-chip{margin:0}

@media (max-width:960px){
  .sj-kit .lk-grid{grid-template-columns:minmax(0,1fr)}
  .sj-split{grid-template-columns:minmax(0,1fr)}
  .sj-side{position:static;order:2}
  .sj-summary>div+div{border-inline-start:0;border-top:1px solid var(--line)}
}
@media (max-width:600px){
  .sj-card{padding:16px}
  .sj-text{min-height:200px}
  .sj-list li{padding:8px 12px}
}
@media (forced-colors:active){.sj-report,.sj-done,.sj-list li,.sj-chip{border:1px solid CanvasText}}