/* ===== report: 結果、振り返り、模擬テストの成績 ===== */

.rhead{display:flex;align-items:center;gap:12px;padding:14px 16px 6px}
.rhead .back{width:46px;height:46px;border-radius:50%;background:var(--surface);color:var(--ink2);display:grid;place-items:center;font-size:20px;font-weight:800;box-shadow:var(--shadow);border:0}
.rhead .t{font-size:17px;font-weight:800;color:var(--ink)}
/* result */
.result{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.result .head{background:var(--good);color:#fff;text-align:center;font-weight:800;padding:9px;font-size:16px}
.result .bodyr{padding:16px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.result .ttl{font-weight:800;color:var(--accent);font-size:18px}
.stars{display:flex;gap:4px;justify-content:center;align-items:flex-end;height:72px}
.stars svg{width:58px;height:58px}
.stars svg:nth-child(2){width:72px;height:72px}
.stars .off{opacity:.22}
.result .num{font-size:44px;font-weight:800;color:var(--accent);line-height:1}
/* 前回との差。結果のカードでも会話の成績のカードでも、点数のすぐ下に 1 行 */
.compare{font-size:15px;font-weight:700;color:var(--ink2);line-height:1.5}
.grades{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-top:6px}
.grades div{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:14px;color:var(--ink2);font-weight:800}
.grades div+div{border-left:1px solid var(--line)}
.grades b{font-size:36px;color:var(--accent);line-height:1.2}
/* report after a conversation */
.report{display:flex;flex-direction:column;gap:18px;padding-top:4px}
.turn{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;position:relative}
.turn .q{font-size:15px;color:var(--ink2);font-weight:600;line-height:1.4}
.turn .q::before{content:"Q ";color:var(--ink3);font-weight:800}
.turn .you{font-size:19px;font-weight:600;line-height:1.35}
.turn .you::before{content:"You ";font-size:13px;color:var(--ink3);font-weight:800}
.turn .sc{position:absolute;top:-11px;right:14px;border-radius:999px;padding:2px 12px;font-size:14px;font-weight:800;color:#fff;background:var(--good)}
.turn .sc.warn{background:var(--warn)}.turn .sc.bad{background:var(--bad)}
.turn .correct{margin:0;font-size:16px;padding:10px 12px}
.turn .correct::before{display:none}
.turn .fb{font-size:15px;color:var(--ink2);line-height:1.5}
.sum{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px}
.sum h4{margin:0;font-size:13px;letter-spacing:.08em;color:var(--ink3);font-weight:800}
.sum ul{margin:0;padding-left:18px;font-size:15px;line-height:1.6}
.sum .correct{margin:0;font-size:16px;padding:10px 12px}
.sum .correct::before{display:none}
/* 模擬テストの結果。番号の並びと、問題ごとのカードの左端で正誤を示す */
.qgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.qgrid span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}
/* 正解は青、不正解は赤。赤は間違いと注意の色 */
.qgrid .ok{background:var(--sky-deep)}
.qgrid .ng{background:var(--bad)}
.mockq{border:2px solid var(--sky-deep)}
.mockq.ng{border-color:var(--bad);color:var(--bad)}
.mockq.ng .verdict{color:var(--bad)}
.mockq.ng .okmark{color:var(--ink2)}
.mockq .qn{display:flex;align-items:center;gap:8px;font-size:14px}
.detail h4 .okmark,.detail h4 .ngmark,.mockq .okmark,.mockq .ngmark{font-size:inherit}
.mockq .n{width:26px;height:26px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-weight:800;font-size:13px}
/* ===== talk report ===== */
/* 英会話レッスンの振り返りは 2 画面。1 画面目は相手の画像を残したままスコアのカード、2 画面目が発言ごとのタイムライン */
/* スコアの画面では吹き出しとマイクを隠す。カードが無いときは効かせない（画面を移ったあとの class の消し忘れよけ） */
#scrLesson.score .dlg,#scrLesson.score .dock{display:none}
#scrLesson.score .body{padding-top:14px}
.scorecard{background:var(--surface);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.scorecard .head{background:var(--good);color:#fff;text-align:center;font-weight:800;padding:9px;font-size:16px}
.scorecard .bodyr{padding:14px 16px 16px;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.scorecard .ttl{font-weight:800;color:var(--accent);font-size:18px}
.scorecard .num{font-size:40px;font-weight:800;color:var(--accent);line-height:1}
.scorecard .grades{width:100%;margin-top:2px}
.scorecard #scoreNext{margin-top:12px;align-self:stretch}
/* タイムラインの画面。上の帯は ✕、見出し、EN と JP の切り替え */
.rhead #tlLang{margin:0 0 0 auto;flex:none}
.rhead #tlLang button{flex:none;padding:6px 14px;font-size:14px}
.tlhead{display:flex;flex-direction:column;gap:2px;padding:0 2px}
.tlhead b{font-size:18px;font-weight:800}
.tlhead span{font-size:14px;color:var(--ink2)}
.report.tl{gap:22px}
.tl .turn{padding-top:20px}
.tl .turn .who{position:absolute;top:-13px;left:14px;border-radius:9px;padding:2px 12px;font-size:14px;font-weight:800;background:var(--accent);color:var(--accent-ink)}
.tl .turn.me{background:var(--sky-soft)}
.tl .turn.me .who{background:var(--navy);color:var(--navy-ink)}
/* 名前の札が付くので、Q と You の頭の文字は要らない */
.tl .turn .q::before,.tl .turn .you::before{content:none}
.tl .turn .q{font-size:19px;color:var(--ink);font-weight:600}
.tl .turn>.sp{align-self:flex-start;width:42px;height:42px;border-radius:50%;background:var(--surface);color:var(--accent);border:2px solid var(--line);display:grid;place-items:center;font-size:18px}
.tl .turn .jaline{display:none;font-size:15px;color:var(--ink2);line-height:1.5}
.tl.ja .turn .jaline{display:block}
@media (max-width:560px){
  /* スコアのカードが画面の下半分に収まるように、星と数字を小さくする */
  .scorecard .stars{height:54px}
  .scorecard .stars svg{width:44px;height:44px}
  .scorecard .stars svg:nth-child(2){width:56px;height:56px}
  .scorecard .num{font-size:34px}
  .scorecard .ttl{font-size:16px}
  .scorecard .grades b{font-size:30px}
  .tlhead b{font-size:16px}
  .tl .turn .q{font-size:17px}
}

/* ===== phone: everything one size smaller ===== */
@media (max-width:560px){
  .result .num{font-size:36px}
  .result .ttl{font-size:16px}
  .turn .you{font-size:17px}
  .qgrid span{width:30px;height:30px;font-size:13px}
}