/* 職種と役割。style.css・flow.css・br.css の上に重ねる（接頭辞 rl-） */
.rl-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rl-h4 small { font-size: 12px; font-weight: 500; color: var(--muted); }
.rl-mt { margin-top: 10px; }
.rl-nl { display: block; margin: 4px 0 0; }
.rl-box { padding: 12px 14px; min-width: 0; }
.rl-tbl { font-size: 12.5px; }
.rl-tbl th, .rl-tbl td { padding: 6px 8px; }
.rl-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.rl-ptbl { min-width: 620px; }
.rl-ptbl tbody th { font-weight: 700; white-space: nowrap; }
.rl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 9 つの役 */
.rl-rh { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rl-rh b { font: 700 17px var(--latin); }
.rl-rh > span:not(.hint) { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.rl-f > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 1px; }
.rl-f > span .hint { margin-left: 4px; }
.rl-who { background: var(--line2); border-radius: 8px; padding: 5px 9px; }

/* 練習 */
.rl-quiz { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.rl-q, .rl-score { padding: 12px 14px; min-width: 0; }
.rl-qtop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.rl-qn { font: 600 12.5px var(--latin); color: var(--muted); }
.rl-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.rl-dot { appearance: none; font: 600 11.5px var(--latin); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); cursor: pointer; padding: 0; }
.rl-dot:hover { border-color: #94a3b8; }
.rl-dot[aria-current="step"] { border: 2px solid var(--ink); color: var(--ink); }
.rl-d-good { background: #dcfce7; border-color: #86efac; color: #14532d; }
.rl-d-ok { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.rl-d-ng { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.rl-qtext { margin: 10px 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.rl-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-cb { appearance: none; font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.rl-cb:hover { border-color: #94a3b8; color: var(--ink); }
.rl-cb[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.rl-cb.rl-cb-ans { border-color: #15803d; box-shadow: inset 0 0 0 1px #15803d; }
.rl-cb.rl-cb-ans[aria-pressed="true"] { background: #15803d; border-color: #15803d; color: #fff; }
.rl-cb.rl-cb-ok { border-color: #d97706; }
.rl-cb.rl-cb-ok[aria-pressed="true"] { background: #b45309; border-color: #b45309; color: #fff; }
.rl-cb.rl-cb-ng[aria-pressed="true"] { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.rl-ans { margin-top: 10px; }
.rl-ans p { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.rl-ans .br-go { font-size: 12.5px; }
.rl-verdict { font-size: 13.5px; border-radius: 8px; padding: 7px 11px; }
.rl-v-good { background: #f0fdf4; color: #14532d; }
.rl-v-ok { background: #fffbeb; color: #78350f; }
.rl-v-ng { background: #fef2f2; color: #7f1d1d; }
.rl-wait { margin: 0; font-size: 12.5px; color: var(--muted); }
.rl-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rl-kc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rl-kci { border-radius: 10px; padding: 6px 4px; text-align: center; background: var(--line2); }
.rl-kci b { display: block; font: 700 20px/1.2 var(--latin); }
.rl-kci span { font-size: 11px; font-weight: 700; color: var(--ink2); }
.rl-snote { margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); }

/* 操作の枠 */
.rl-ctl { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.rl-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rl-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 3em; }
.rl-phnote { margin: 0; font-size: 13px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 11px; }

/* 工程と役割の表 */
.rl-phtbl { min-width: 640px; }
.rl-phtbl tbody th, .rl-phtbl thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.rl-phtbl tbody th b { display: block; font-size: 13px; }
.rl-phtbl tbody th small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.rl-phtbl .rl-pc { text-align: center; width: 9%; }
.rl-phtbl td.rl-pc { font-size: 16px; position: relative; } /* 読み上げ用の文字（rl-sr）を、横に流せる枠の中に収める */
.rl-m2 { color: #0f172a; font-weight: 700; }
.rl-m1 { color: #475569; }
.rl-m0 { color: #cbd5e1; }
.rl-phtbl .rl-on { background: #eff6ff; }
.rl-phtbl thead th.rl-on { color: #1e3a8a; }

/* レベルの表と人 */
.rl-lvtbl { min-width: 620px; }
.rl-lv { font: 700 15px var(--latin); text-align: center; width: 4.5em; }
.rl-lvtbl td:nth-child(3) { color: var(--ink2); min-width: 14em; }
.rl-person { padding: 12px 14px; }
.rl-dl { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rl-dl > div { background: var(--any-bg); border: 1px solid var(--line2); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.rl-dl dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.rl-dl dd { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.rl-lvb { font: 700 18px var(--latin); }

/* 残す形 */
.rl-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.rl-tpl { padding: 12px 14px; min-width: 0; }
.rl-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rl-tplh .rl-h4 { margin: 0; }
.rl-rtbl { min-width: 1100px; }
.rl-rtbl td:nth-child(1), .rl-rtbl td:nth-child(2) { font-weight: 700; }
.rl-rtbl td:nth-child(3) { min-width: 14em; }
.rl-ttbl { min-width: 760px; }
.rl-ttbl td:nth-child(1) { font-weight: 700; white-space: nowrap; }
.rl-pre { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 10px 12px; font: 500 12px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }

.rl-dot:focus-visible, .rl-cb:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .rl-quiz { grid-template-columns: minmax(0, 1fr); }
  .rl-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rl-dl { grid-template-columns: minmax(0, 1fr); }
  .rl-lab { min-width: 0; width: 100%; }
  .rl-qtext { font-size: 14px; }
  .rl-phtbl { min-width: 470px; }
  .rl-phtbl tbody th small { display: none; }
  .rl-phtbl th, .rl-phtbl td { padding: 6px 5px; }
}