/* dpg-sim.css — 関所B の試作（2026-10-15 Cowork）。dpg-guide.css の決まり（トークン）を使う。
   CCNA シミュの採点結果（sim-ui.js の renderResult。クラスは .qz-simr__*）と、答えた後の画面のシミュの細かい直し。
   並び: 得点（大きな数字・墨）→ タスクごとの ✓✕ の札（✓ 緑・✕ 赤。押すとそのタスクへ移る）→ タスクの順に、
         できていないタスク = 白いカード（必要｜いま の表 → 練習モードで直す〔白地に紫の枠〕→ 解説 ▾）、できたタスク = 1行（押すと解説）
         → 保存 → ほかに見る ▾（機器ごとの running-config と模範。等幅 14px）。
   紫は押す物と選択中だけ（札は正誤の色）。赤と緑は正誤だけ。カードは線なし・白い面・やわらかい影。文字は 40/22/17/14px の4段。余白は 8 の倍数。
   v4.css の古い結果の見た目（.qz-sim__result・.qz-sim__score・.qz-sim__card・.qz-sim__misses など）は sim-ui.js が使わなくなった（組み込むときに消してよい）。 */
:root{
  --sim-result-maxw:880px;   /* PC で表と文が横に広がりすぎない幅 */
  --sim-scroll-gap:96px;     /* 札で移ったとき・採点の直後に、上に貼り付く見出し（約 60px）の下に出すための余白 */
  --sim-mark:28px;           /* ✓ ✕ の丸の大きさ */
  --sim-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sim-line:var(--separator);
}

/* --- 結果の入れ物。スマホは出題カードの幅（約 300px）をそのまま使い、白いカードの影で分ける。
       PC（下の @container）はクリームの地を敷いて白いカードを浮かせる ------------------------------------------ */
.qz-simr{display:grid;gap:var(--g-s2);min-width:0;max-width:var(--sim-result-maxw);margin:0;padding:0;border-radius:var(--g-radius);background:transparent;color:var(--text);font-size:var(--g-fs-body);line-height:1.6;scroll-margin-top:var(--sim-scroll-gap)}
.qz-simr :is(h4,p,ul,table){margin:0}

/* 得点と札 */
.qz-simr__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--g-s1) var(--g-s3)}
.qz-simr__score{display:flex;align-items:baseline;gap:var(--g-s1);color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.qz-simr__scorelabel{font-size:var(--g-fs-small);font-weight:700;color:var(--text-2)}
.qz-simr__num{font-size:var(--g-fs-hero);font-weight:800;color:var(--text)}
.qz-simr__max{font-size:var(--g-fs-title);font-weight:700;color:var(--text-2)}
.qz-simr__chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--g-s1)}
.qz-simr__chip{display:inline-block;min-width:var(--g-hit);height:var(--g-hit);padding:0 var(--g-s1);border:0;border-radius:999px;font:inherit;font-size:var(--g-fs-body);font-weight:800;line-height:var(--g-hit);text-align:center;cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums} /* 「1 ✕」の間の空白を残すため flex にしない */
.qz-simr__chip.is-ng{background:var(--danger-soft);color:var(--danger)}
.qz-simr__chip.is-ok{background:var(--success-soft);color:var(--success)}
.qz-simr__chip:hover{box-shadow:inset 0 0 0 2px currentColor}
.qz-simr__chipmark{-webkit-text-stroke:.6px currentColor} /* ✓ ✕ の字は代替のフォントで細く出るので、縁取りで太らせる */

/* 一覧（タスクの順。できていない = カード、できた = 1行） */
.qz-simr__list{list-style:none;padding:0;display:grid;gap:var(--g-s2);min-width:0}
.qz-simr__card,.qz-simr__done{min-width:0;border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow);overflow-wrap:anywhere;scroll-margin-top:var(--sim-scroll-gap)}
.qz-simr__card{display:grid;gap:var(--g-s2);padding:var(--g-s2)}
.qz-simr__card:focus-visible,.qz-simr__done:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.qz-simr__card:focus:not(:focus-visible),.qz-simr__done:focus:not(:focus-visible){outline:0}
.qz-simr__title{display:flex;align-items:flex-start;gap:var(--g-s1);min-width:0;font-size:var(--g-fs-body);font-weight:700;line-height:1.6}
.qz-simr__mark{flex:0 0 auto;display:inline-grid;place-items:center;width:var(--sim-mark);height:var(--sim-mark);border-radius:50%;font-size:var(--g-fs-small);font-weight:800;line-height:1;-webkit-text-stroke:.6px currentColor}
.qz-simr__mark.is-ng{background:var(--danger-soft);box-shadow:inset 0 0 0 2px var(--danger);color:var(--danger)}
.qz-simr__mark.is-ok{background:var(--success-soft);box-shadow:inset 0 0 0 2px var(--success);color:var(--success)}
.qz-simr__text{flex:1 1 auto;min-width:0}
.qz-simr__no{white-space:nowrap}
.qz-simr__pts{font-size:var(--g-fs-small);font-weight:600;color:var(--text-2);white-space:nowrap}

/* 必要｜いま の表（行の間だけ細い線。箱の枠は付けない） */
.qz-simr__table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--g-fs-body);line-height:1.6}
.qz-simr__colneed{width:62%}
.qz-simr__colnow{width:38%}
.qz-simr__table th{padding:0 var(--g-s1) var(--g-s1) 0;border-bottom:2px solid var(--sim-line);text-align:left;font-size:var(--g-fs-small);font-weight:700;color:var(--text-2)}
.qz-simr__table td{padding:var(--g-s1) var(--g-s1) var(--g-s1) 0;border-bottom:1px solid var(--sim-line);vertical-align:top;overflow-wrap:anywhere}
.qz-simr__table :is(th,td):last-child{padding-right:0}
.qz-simr__table tbody tr:last-child td{border-bottom:0;padding-bottom:0}
.qz-simr__who{font-weight:800}
.qz-simr__now{font-weight:600}
.qz-simr__hint{display:block;font-size:var(--g-fs-small);font-weight:400;line-height:1.5;color:var(--text-2)}

/* 2番手のボタン（白地に紫の枠）。練習モードで直す・今の設定で採点してみる。紫の塗りは答えた後の画面では「次へ」だけ */
:root .qz-sim .qz-btn.qz-sim__btn2{min-height:var(--g-hit);padding:var(--g-s1) var(--g-s2);border:2px solid var(--g-outline);border-radius:var(--g-radius-btn);background:var(--g-outline-bg);color:var(--accent);box-shadow:none;font-size:var(--g-fs-body);font-weight:700;line-height:1.5;white-space:normal}
:root .qz-sim .qz-btn.qz-sim__btn2:hover:not(:disabled){background:var(--accent-soft)}
:root .qz-sim .qz-btn.qz-sim__btn2:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
:root .qz-sim .qz-btn.qz-simr__fix{display:grid;justify-items:center;align-content:center;gap:0;width:100%;text-align:center} /* 2行（練習モードで直す／記録は変わりません） */
.qz-simr__fixsub{font-size:var(--g-fs-small);font-weight:600}

/* 開け閉め（解説 ▾・できた行・ほかに見る ▾・機器ごとの設定）。押す所は紫の字（3番手＝文字のリンク） */
.qz-simr summary{list-style:none;cursor:pointer}
.qz-simr summary::-webkit-details-marker{display:none}
.qz-simr summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--g-s1)}
.qz-simr__chev{flex:0 0 auto;display:inline-block;color:var(--accent);font-size:var(--g-fs-small);line-height:1;transition:transform var(--dur-fast,140ms) ease}
.qz-simr details[open]>summary .qz-simr__chev{transform:rotate(180deg)}
.qz-simr__expl>summary{display:flex;align-items:center;gap:var(--g-s1);min-height:var(--g-hit);color:var(--accent);font-weight:700}
.qz-simr__expl{border-top:1px solid var(--sim-line)}
/* 2026-10-15 周3: できていないタスクの2つ目からは、表と「練習モードで直す」を「足りない所を見る（N件）▾」にたたむ（sim-ui.js の ngCard の fold） */
.qz-simr__ngfold{border-top:1px solid var(--sim-line)}
.qz-simr__ngfold>summary{display:flex;align-items:center;gap:var(--g-s1);min-height:var(--g-hit);color:var(--accent);font-weight:700}
.qz-simr__ngbody{display:grid;gap:var(--g-s2);padding-bottom:var(--g-s1)}
.qz-simr__explbody{padding-bottom:var(--g-s1)}
.qz-simr .qz-notes__body{font-size:var(--g-fs-body);line-height:1.75}

/* できたタスクの1行。スマホ: 「✓ タスク4 できています ▾」の下にタスクの文を1行（省略）。PC: 「✓ タスク4 …文… できています ▾」の1行。開くと文の全体と解説 */
.qz-simr__donehead{display:grid;grid-template-columns:var(--sim-mark) minmax(0,auto) auto minmax(0,1fr) auto;grid-template-areas:"mark no word . chev" "mark text text text text";align-items:center;column-gap:var(--g-s1);min-height:var(--g-hit);padding:var(--g-s1) var(--g-s2)}
.qz-simr__donehead>.qz-simr__mark{grid-area:mark;align-self:start}
.qz-simr__donehead>.qz-simr__no{grid-area:no;min-width:0;white-space:normal;font-weight:700;color:var(--text)} /* 「保存（copy run start）」は狭いと折り返す */
.qz-simr__donehead>.qz-simr__chev{grid-area:chev}
.qz-simr__doneword{grid-area:word;font-size:var(--g-fs-small);font-weight:700;color:var(--success);white-space:nowrap}
.qz-simr__donetext{grid-area:text;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--g-fs-small);color:var(--text-2)}
.qz-simr__fold[open] .qz-simr__donetext{overflow:visible;white-space:normal}
.qz-simr__foldbody{padding:0 var(--g-s2) var(--g-s2)}
.qz-simr__explabel{margin:0;font-size:var(--g-fs-small);font-weight:700;color:var(--text-2)}

/* ほかに見る ▾（中は機器ごとの設定の見比べ [sim-compare]） */
.qz-simr__more>summary{display:grid;align-content:center;min-height:var(--g-hit);padding:var(--g-s1) 0}
.qz-simr__moretitle{display:flex;align-items:center;gap:var(--g-s1);color:var(--accent);font-weight:700}
.qz-simr__moresub{font-size:var(--g-fs-small);line-height:1.5;color:var(--text-2)}
.qz-simr__morebody{display:grid;padding:0 var(--g-s2);border-radius:var(--g-radius);background:var(--surface);box-shadow:var(--g-card-shadow)}
.qz-simr .qz-sim__cmp{border:0;border-bottom:1px solid var(--sim-line);border-radius:0;background:transparent}
.qz-simr .qz-sim__cmp:last-child{border-bottom:0}
.qz-simr .qz-sim__cmp>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--g-s1);min-height:var(--g-hit);padding:0;font-weight:700}
.qz-simr .qz-sim__cols{padding:0 0 var(--g-s2);gap:var(--g-s2)}
.qz-simr .qz-sim__cfg h5{margin:0 0 var(--g-s1);font-size:var(--g-fs-small);font-weight:700;color:var(--text-2)}
.qz-simr .qz-sim__pre{max-height:24rem;padding:var(--g-s1) var(--g-s2);border-radius:var(--g-s1);font:var(--g-fs-small)/1.6 var(--sim-mono)}

/* 答えた後の画面のシミュの文字（14px より小さくしない） */
.qz-sim__out,.qz-sim__prompt{font-size:var(--g-fs-small)}
.qz-sim__pts,.qz-sim__trytag,.qz-sim__sendhint,.qz-sim__tmark{font-size:var(--g-fs-small)}

/* PC（シミュの幅 720px 以上。v4.css と同じく .qz-sim の幅で決める） */
@container (min-width:720px){
  .qz-simr{gap:var(--g-s3);padding:var(--g-s3);background:var(--bg)}
  .qz-simr__card{padding:var(--g-s3)}
  :root .qz-sim .qz-btn.qz-simr__fix{display:flex;align-items:baseline;justify-content:center;width:auto;justify-self:start} /* PC は1行 */
  .qz-simr__donehead{grid-template-columns:var(--sim-mark) minmax(0,auto) minmax(0,1fr) auto auto;grid-template-areas:"mark no text word chev";padding:var(--g-s1) var(--g-s3)}
  .qz-simr__donehead>.qz-simr__mark{align-self:center}
  .qz-simr__donetext{font-size:var(--g-fs-body)}
  .qz-simr__foldbody{padding:0 var(--g-s3) var(--g-s3)}
  .qz-simr__morebody{padding:0 var(--g-s3)}
}

/* 動きを減らす: ▾ の回転を止める（札で移るときのスクロールも、sim-ui.js が reduce のときは即時にする） */
@media (prefers-reduced-motion:reduce){
  .qz-simr__chev{transition:none}
}