/* 技術の標準とガードレール。style.css・flow.css・cm.css の上に重ねる（接頭辞 gr-） */
.gr-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.gr-nl { display: block; margin: 6px 0 0; }
.gr-inl { display: inline; margin: 0 0 0 6px; padding: 0; }
.gr-tips { margin-top: 12px; }
.gr-mt { margin-top: 10px; }
.gr-mb8 { margin-bottom: 8px !important; }
.gr-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.gr-box { padding: 12px 14px; min-width: 0; }
.gr-tbl { font-size: 12.5px; }
.gr-tbl th, .gr-tbl td { padding: 6px 8px; }
.gr-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gr-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }

/* 操作の枠 */
.gr-ctl { padding: 12px 14px; display: grid; gap: 8px; margin-bottom: 10px; }
.gr-crow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gr-clab { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 4em; }
.gr-scene { margin: 0; font-size: 13px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 11px; }
.gr-qrow { display: grid; grid-template-columns: 12em minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--line2); }
.gr-qrow:last-child { border-bottom: 0; }
.gr-qlab { font-size: 12.5px; font-weight: 700; color: var(--ink2); }

/* 選ぶ練習（強さ・申請） */
.gr-plist, .gr-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gr-pi, .gr-case { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; }
.gr-pi.gr-ok, .gr-case.gr-ok { border-color: #86efac; background: #f7fef9; }
.gr-case.gr-mid { border-color: #fcd34d; background: #fffdf5; }
.gr-pi.gr-ng, .gr-case.gr-ng { border-color: #fecaca; background: #fffafa; }
.gr-pih { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.gr-pih p { margin: 0; font-size: 13px; color: var(--ink); }
.gr-pn { width: 22px; height: 22px; border-radius: 50%; background: #0f172a; color: #fff; font: 600 11.5px/22px var(--latin); text-align: center; }
.gr-who { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.gr-pbtns { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 30px; }
.gr-lab { margin: 8px 0 0 30px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.gr-lab + .gr-pbtns { margin-top: 4px; }
.gr-ch { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.gr-ch:hover { border-color: #94a3b8; color: var(--ink); }
.gr-ch[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.gr-ch.gr-v-std[aria-pressed="true"] { background: #15803d; border-color: #15803d; }
.gr-ch.gr-v-exc[aria-pressed="true"] { background: #b45309; border-color: #b45309; }
.gr-ch.gr-v-stop[aria-pressed="true"] { background: #b91c1c; border-color: #b91c1c; }
.gr-chs { font-size: 12px; padding: 3px 11px; }
.gr-pans, .gr-fb { margin: 8px 0 0 30px; font-size: 12.5px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 6px 9px; }
.gr-pans b, .gr-fb p > b { display: block; color: var(--ink); }
.gr-fb p { margin: 0; }
.gr-fb p + p { margin-top: 6px; }
.gr-cond b { display: inline !important; margin-right: 6px; font-size: 12px; color: var(--ink2) !important; }
.gr-pfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.gr-psum { font-size: 13px; color: var(--ink2); }

/* 強さを決める道具 */
.gr-guard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.gr-verdict { margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; border-radius: 10px; padding: 9px 12px; border: 1px solid var(--line); }
.gr-verdict b { font-size: 17px; }
.gr-verdict span { font-size: 12.5px; color: var(--ink2); }
.gr-verdict.gr-m-block { background: #fef2f2; border-color: #fecaca; } .gr-verdict.gr-m-block b { color: #991b1b; }
.gr-verdict.gr-m-warn { background: #fffbeb; border-color: #fde68a; } .gr-verdict.gr-m-warn b { color: #92400e; }
.gr-verdict.gr-m-record { background: #eff6ff; border-color: #bfdbfe; } .gr-verdict.gr-m-record b { color: #1e3a8a; }
.gr-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.gr-parts li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink2); padding: 3px 0; border-bottom: 1px dashed var(--line2); }
.gr-parts li b { font: 600 12.5px var(--sans); color: var(--ink); white-space: nowrap; }
.gr-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gr-plan li { display: grid; grid-template-columns: 22px auto minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink2); }
.gr-sn { width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--ink2); font: 600 11.5px/22px var(--latin); text-align: center; flex: none; }
.gr-mb { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 8px; border: 1px solid var(--line); white-space: nowrap; }
.gr-mb.gr-m-block { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.gr-mb.gr-m-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.gr-mb.gr-m-record { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.gr-mb.gr-m-none { background: var(--line2); color: var(--ink2); }
.gr-notes { margin: 10px 0 0; padding-left: 1.2em; font-size: 12.5px; color: #78350f; display: grid; gap: 4px; }
.gr-model { margin-top: 10px; background: var(--line2); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; color: var(--ink2); }
.gr-model p { margin: 0 0 4px; }
.gr-model p:last-child { margin-bottom: 0; }
.gr-model b { color: var(--ink); margin-right: 6px; }
.gr-chg { color: #78350f; }
.gr-stbl { min-width: 620px; }
.gr-stbl tbody th { font-weight: 500; }
.gr-srow { cursor: pointer; }
.gr-srow:hover th, .gr-srow:hover td { background: var(--line2); }
.gr-tbl tr.gr-on th, .gr-tbl tr.gr-on td { background: #f0fdf4; }
.gr-sel { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.gr-sel:hover { border-color: #94a3b8; background: var(--any-bg); }
.gr-sel[aria-pressed="true"] { border-color: #15803d; background: #dcfce7; }
.gr-maptbl { min-width: 760px; }
.gr-maptbl tbody th { font-weight: 700; white-space: nowrap; }
.gr-maptbl th.gr-on, .gr-maptbl td.gr-on { background: #f0fdf4; }
.gr-maptbl thead th.gr-on { color: #14532d; }

/* 例外の練習 */
.gr-stdtbl { min-width: 760px; }
.gr-stdno { font: 600 12.5px var(--latin); white-space: nowrap; }
.gr-rules { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 13px; color: var(--ink2); }

/* やめ方の段取り */
.gr-sun { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 10px; align-items: start; }
.gr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gr-step { appearance: none; font: inherit; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.gr-step:hover { border-color: #94a3b8; }
.gr-step[aria-pressed="true"] { border-color: #15803d; background: #f0fdf4; box-shadow: 0 0 0 1px #15803d; }
.gr-step[aria-pressed="true"] .gr-sn { background: #15803d; color: #fff; }
.gr-stt { display: flex; flex-direction: column; min-width: 0; }
.gr-stt b { font-size: 13px; }
.gr-stt small { font-size: 11.5px; color: var(--muted); }
.gr-when { font-size: 12px; font-weight: 500; color: var(--muted); }
.gr-mode-line { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--ink2); }
.gr-stepw { margin: 0; font-size: 13px; color: var(--ink2); }
.gr-dl { margin: 10px 0 0; display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.gr-dl dt { font-size: 12px; font-weight: 700; color: var(--muted); }
.gr-dl dd { margin: 0; color: var(--ink2); }
.gr-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.gr-strip-i { appearance: none; cursor: pointer; width: 32px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; font: 600 12px var(--latin); border: 1px solid var(--line); padding: 0; }
.gr-strip-i:hover { filter: brightness(.97); }
.gr-strip-i.gr-m-block { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.gr-strip-i.gr-m-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.gr-strip-i.gr-m-record { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.gr-strip-i.gr-m-none { background: var(--line2); color: var(--ink2); }
.gr-strip-i[aria-pressed="true"] { box-shadow: 0 0 0 2px #0f172a; }

/* 残す形 */
.gr-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start; }
.gr-tpl { padding: 12px 14px; min-width: 0; }
.gr-tplr { display: grid; gap: 10px; min-width: 0; }
.gr-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.gr-tplh .gr-h4 { margin: 0; }
.gr-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: 560px; overflow-y: auto; }
.gr-ltbl { min-width: 1120px; }
.gr-ltbl th { white-space: nowrap; }
#grExcLog td:nth-child(1), #grExcLog td:nth-child(4), #grExcLog td:nth-child(5), #grExcLog td:nth-child(6), #grExcLog td:nth-child(9), #grExcLog td:nth-child(10) { white-space: nowrap; }
#grExcLog td:nth-child(2) { min-width: 8em; }
#grExcLog td:nth-child(3), #grExcLog td:nth-child(7) { min-width: 18em; }
#grExcLog td:nth-child(8) { min-width: 24em; }
#grExcLog { min-width: 1480px; }
#grRuleLog td:nth-child(2), #grRuleLog td:nth-child(3), #grRuleLog td:nth-child(4), #grRuleLog td:nth-child(5), #grRuleLog td:nth-child(9) { white-space: nowrap; }
#grRuleLog td:nth-child(1) { min-width: 14em; }
#grRuleLog td:nth-child(6), #grRuleLog td:nth-child(7) { min-width: 18em; }
#grRuleLog td:nth-child(8) { min-width: 6em; }
.gr-pre { max-height: 420px !important; }

.gr-ch:focus-visible, .gr-sel:focus-visible, .gr-step:focus-visible, .gr-strip-i:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .gr-guard, .gr-sun { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .gr-plist, .gr-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gr-qrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gr-clab { min-width: 0; width: 100%; }
  .gr-pbtns, .gr-pans, .gr-fb, .gr-lab { margin-left: 0; }
  .gr-tbl th, .gr-tbl td { padding: 5px 6px; }
}