/* 大きな法令の流れ。style.css・flow.css・cm.css の上に重ねる（接頭辞 cl-） */
.cl-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.cl-nl { display: block; margin: 6px 0 0; }
.cl-sm { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cl-inl { display: inline; margin: 0 0 0 4px; padding: 0; }

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

/* 判定の結果 */
.cl-jd { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cl-hcard, .cl-tcard, .cl-mcard { padding: 12px 14px; min-width: 0; }
.cl-side { display: grid; gap: 10px; min-width: 0; }
.cl-laws { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cl-law { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; }
.cl-law.cl-lv-hit { border-color: #fdba74; background: #fffcf7; }
.cl-law.cl-lv-soon { border-color: #cbd5e1; border-style: dashed; background: var(--any-bg); }
.cl-lhd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cl-lhd b { font-size: 14px; }
.cl-badge { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.cl-b-hit { background: #ffedd5; color: #9a3412; }
.cl-b-soon { background: #e2e8f0; color: #334155; }
.cl-why { margin: 6px 0 0; padding-left: 1.2em; font-size: 12.5px; color: var(--ink2); display: grid; gap: 3px; }
.cl-meta { margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cl-meta div { background: var(--any-bg); border: 1px solid var(--line2); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.cl-meta dt { font-size: 11px; font-weight: 700; color: var(--muted); }
.cl-meta dd { margin: 0; font-size: 12px; color: var(--ink2); }
.cl-chk { margin-top: 8px; font-size: 12.5px; }
.cl-chk b { font-size: 12px; color: var(--muted); }
.cl-chk ul { margin: 2px 0 0; padding-left: 1.2em; display: grid; gap: 2px; }
.cl-chk a { color: #1d4ed8; text-underline-offset: 2px; }
.cl-law .cm-go { margin-top: 6px; }
.cl-empty { font-size: 13px; color: var(--muted); background: var(--line2); border-radius: 10px; padding: 10px 12px; }
.cl-miss { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-miss li { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink2); border-bottom: 1px solid var(--line2); padding-bottom: 5px; }
.cl-miss b { font-size: 12.5px; color: var(--ink); }
.cl-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 520px; overflow-y: auto; }
.cl-tl li { display: grid; grid-template-columns: 9.8em 4.6em minmax(0, 1fr); gap: 6px; align-items: baseline; font-size: 12.5px; border-radius: 8px; padding: 4px 8px; }
.cl-tl li b { font: 600 11.5px var(--latin); }
.cl-tl li .cl-kind { justify-self: start; }
.cl-tl li.cl-past { color: var(--muted); }
.cl-tl li.cl-near { background: #fff7ed; color: #7c2d12; }
.cl-tl li.cl-later { color: var(--ink2); }
.cl-kind { font-style: normal; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 0 6px; background: var(--line2); color: var(--ink2); white-space: nowrap; }
.cl-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 3px 0 8px; vertical-align: -1px; border: 1px solid var(--line); }
.cl-kpast { background: var(--paper); }
.cl-knear { background: #fff7ed; border-color: #fdba74; }
.cl-klater { background: var(--any-bg); }

/* 日の種類の練習 */
.cl-quiz { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cl-qrow { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.cl-qrow.cl-qok { border-color: #86efac; background: #f7fef9; }
.cl-qrow.cl-qng { border-color: #fecaca; background: #fffafa; }
.cl-qtt { display: flex; flex-direction: column; gap: 2px; }
.cl-qtt b { font: 600 12.5px var(--latin); color: var(--muted); }
.cl-qtt span { font-size: 13.5px; }
.cl-qans { margin: 0; font-size: 12.5px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 6px 10px; }
.cl-qfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.cl-qsum { font-size: 13px; color: var(--ink2); }

/* 段階と比べの表 */
.cl-scard { padding: 12px 14px; }
.cl-tbl { font-size: 12.5px; }
.cl-tbl th, .cl-tbl td { padding: 6px 8px; vertical-align: top; }
.cl-stbl { min-width: 760px; }
.cl-stbl td.cl-d { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.cl-stbl tr.cl-fut td { background: #fff7ed; }
.cl-tbl td.cl-s { font-size: 11.5px; min-width: 14em; }
.cl-tbl td.cl-s a { color: #1d4ed8; text-underline-offset: 2px; }
.cl-rtbl { min-width: 900px; }
.cl-rtbl td:first-child { font-weight: 700; min-width: 12em; }

/* 残す形 */
.cl-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.cl-tpl { padding: 12px 14px; min-width: 0; }
.cl-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cl-tplh .cl-h4 { margin: 0; }
.cl-pre { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 9px 11px; font: 500 11.5px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; overflow-y: auto; }
.cl-wtbl { min-width: 1760px; }
.cl-wtbl td:first-child { font-weight: 700; min-width: 12em; }
.cl-wtbl td:nth-child(2) { min-width: 15em; }
.cl-wtbl td:nth-child(3) { min-width: 13em; }
.cl-wtbl td:nth-child(4), .cl-wtbl td:nth-child(7) { min-width: 20em; }
.cl-wtbl td:nth-child(5) { min-width: 6.5em; }
.cl-wtbl td:nth-child(6) { min-width: 9em; }
.cl-wtbl td:nth-child(7) { overflow-wrap: anywhere; }

/* AI 時代 */
.cl-ainote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }

@media (max-width: 1100px) {
  .cl-jd { grid-template-columns: minmax(0, 1fr); }
  .cl-meta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cl-quiz { grid-template-columns: minmax(0, 1fr); }
  .cl-lab { min-width: 0; width: 100%; }
  .cl-tl { max-height: none; }
  .cl-tl li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
  .cl-tl li span { flex-basis: 100%; }
}