/* コンウェイの法則とチームの形。style.css・flow.css・cm.css の上に重ねる（接頭辞 cw-） */
.cw-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.cw-h4 small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.cw-nl { display: block; margin: 6px 0 0; }
.cw-tips { margin-top: 12px; }
.cw-mt { margin-top: 12px; }
.cw-m0 { margin: 0 0 6px; }
.cw-mb8 { margin-bottom: 8px; }
.cw-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.cw-box { padding: 12px 14px; min-width: 0; }
.cw-wait { margin: 0; font-size: 13px; color: var(--muted); background: var(--line2); border-radius: 10px; padding: 9px 12px; }
.cw-tbl { font-size: 12.5px; }
.cw-tbl th, .cw-tbl td { padding: 6px 8px; }

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

/* 鏡の図 */
.cw-mir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: start; }
.cw-path { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cw-node { font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--any-bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; min-width: 0; }
.cw-arr { font: 600 14px var(--latin); color: var(--muted); }
.cw-node.cw-s-tk { border-color: #93c5fd; background: #eff6ff; }
.cw-node.cw-s-fk { border-color: #fcd34d; background: #fffbeb; }
.cw-none { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: #7f1d1d; background: #fef2f2; border-radius: 10px; padding: 8px 11px; }
.cw-kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cw-kpi { background: var(--any-bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cw-kpi dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cw-kpi dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cw-kpi small { font-size: 11.5px; color: var(--ink2); }
.cw-kpi.cw-ok { background: #f0fdf4; border-color: #bbf7d0; } .cw-kpi.cw-ok dd { color: #14532d; }
.cw-kpi.cw-mid { background: #fffbeb; border-color: #fde68a; } .cw-kpi.cw-mid dd { color: #78350f; }
.cw-kpi.cw-ng { background: #fef2f2; border-color: #fecaca; } .cw-kpi.cw-ng dd { color: #7f1d1d; }
.cw-note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink2); }
.cw-mtbl { min-width: 560px; }
.cw-mtbl tbody th { font-weight: 500; font-size: 12.5px; color: var(--ink); min-width: 13em; }
.cw-cell { appearance: none; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink2); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; white-space: nowrap; }
.cw-cell:hover { border-color: #94a3b8; }
.cw-cell.cw-c-ok { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.cw-cell.cw-c-mid { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.cw-cell.cw-c-ng { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.cw-cell[aria-pressed="true"] { box-shadow: 0 0 0 2px #0f172a; }

/* 組み替えの練習 */
.cw-teams { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cw-team { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; min-width: 0; }
.cw-team.cw-r-ok { border-color: #86efac; background: #f7fef9; }
.cw-team.cw-r-mid { border-color: #fcd34d; background: #fffdf5; }
.cw-team.cw-r-ng { border-color: #fca5a5; background: #fffafa; }
.cw-th { display: flex; align-items: center; gap: 9px; }
.cw-th b { font-size: 14px; display: block; }
.cw-th small { font-size: 11.5px; color: var(--muted); }
.cw-tno { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #0f172a; color: #fff; font: 600 13px/28px var(--latin); text-align: center; }
.cw-now { margin: 6px 0 0; font-size: 12.5px; color: var(--ink2); }
.cw-lab { margin: 8px 0 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cw-bpills, .cw-tpills { display: flex; flex-wrap: wrap; gap: 4px; }
.cw-bp, .cw-tp { appearance: none; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; text-align: left; max-width: 100%; }
.cw-bp:hover, .cw-tp:hover { border-color: #94a3b8; }
.cw-bp[aria-pressed="true"] { color: #fff; border-color: transparent; }
.cw-bp.cw-g-kintai[aria-pressed="true"] { background: #1d4ed8; }
.cw-bp.cw-g-keihi[aria-pressed="true"] { background: #7c3aed; }
.cw-bp.cw-g-common[aria-pressed="true"] { background: #0f766e; }
.cw-bp.cw-g-other[aria-pressed="true"] { background: #475569; }
.cw-tp[aria-pressed="true"] { color: #fff; border-color: transparent; }
.cw-tp.cw-y-sa[aria-pressed="true"] { background: #15803d; }
.cw-tp.cw-y-pf[aria-pressed="true"] { background: #0f766e; }
.cw-tp.cw-y-en[aria-pressed="true"] { background: #b45309; }
.cw-tp.cw-y-cs[aria-pressed="true"] { background: #1d4ed8; }
.cw-fb { margin-top: 8px; background: var(--line2); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; color: var(--ink2); }
.cw-fb p { margin: 0 0 4px; }
.cw-fb p:last-child { margin-bottom: 0; }
.cw-fb b { color: var(--ink); margin-right: 6px; }
.cw-fb .srcl, .cw-fb .cm-go { margin: 4px 0 0; }
.cw-fbm { font-size: 12px; color: var(--muted); }
.cw-tfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.cw-tsum { font-size: 13px; color: var(--ink2); }
.cw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cw-rows li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 8px; align-items: baseline; font-size: 13px; padding: 6px 9px; border-radius: 8px; background: var(--any-bg); }
.cw-rows li > span:last-child { grid-column: 2; color: var(--ink2); font-size: 12.5px; overflow-wrap: anywhere; }
.cw-rk { font-weight: 700; text-align: center; color: var(--muted); }
.cw-rows li.cw-ok { background: #f0fdf4; } .cw-rows li.cw-ok .cw-rk { color: #15803d; }
.cw-rows li.cw-mid { background: #fffbeb; } .cw-rows li.cw-mid .cw-rk { color: #b45309; }
.cw-rows li.cw-ng { background: #fef2f2; } .cw-rows li.cw-ng .cw-rk { color: #b91c1c; }
.cw-sum { margin: 10px 0 0; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 7px 10px; }
.cw-sum.cw-ok { background: #f0fdf4; color: #14532d; }
.cw-sum.cw-mid { background: #fffbeb; color: #78350f; }
.cw-sum.cw-ng { background: #fef2f2; color: #7f1d1d; }
.cw-sub { margin: 12px 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cw-bar { display: flex; height: 26px; border-radius: 8px; overflow: hidden; background: var(--line2); }
.cw-seg { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; min-width: 0; padding: 0 4px; }
.cw-seg.cw-y-sa { background: #15803d; } .cw-seg.cw-y-pf { background: #0f766e; } .cw-seg.cw-y-en { background: #b45309; } .cw-seg.cw-y-cs { background: #1d4ed8; }
.cw-seg.cw-y-none { color: var(--muted); }
.cw-legend.cw-barlg { display: none; }
.cw-legend i.cw-y-sa { background: #15803d; } .cw-legend i.cw-y-pf { background: #0f766e; } .cw-legend i.cw-y-en { background: #b45309; } .cw-legend i.cw-y-cs { background: #1d4ed8; }
.cw-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cw-mgrp { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cw-mgrp h5 { margin: 0; font-size: 12.5px; color: var(--muted); }
.cw-mbox { border: 1px solid var(--line); border-radius: 12px; padding: 7px 9px; background: var(--paper); min-width: 0; }
.cw-mbox b { display: block; font-size: 12.5px; }
.cw-mbox > small { display: block; font-size: 11px; color: var(--muted); }
.cw-mbox-empty { border-style: dashed; border-color: #fca5a5; background: #fffafa; }
.cw-mteams { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cw-mchip { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; background: var(--line2); color: var(--ink2); }
.cw-mchip.cw-y-sa { background: #dcfce7; color: #14532d; } .cw-mchip.cw-y-pf { background: #ccfbf1; color: #134e4a; } .cw-mchip.cw-y-en { background: #fef3c7; color: #78350f; } .cw-mchip.cw-y-cs { background: #dbeafe; color: #1e3a8a; }
.cw-mchip0 { font-size: 11.5px; color: #b91c1c; }
.cw-mppl { display: block; margin-top: 4px; font: 600 11px var(--latin); color: var(--muted); }

/* 認知の負荷 */
.cw-lgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cw-lout { position: sticky; top: 10px; }
.cw-lrow { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 4px 0; }
.cw-llab { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.cw-scale { display: flex; gap: 4px; }
.cw-sc { appearance: none; font: 600 12.5px var(--latin); cursor: pointer; color: var(--ink2); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; width: 34px; height: 30px; }
.cw-sc:hover { border-color: #94a3b8; }
.cw-sc[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cw-lbar { position: relative; display: flex; height: 22px; border-radius: 7px; background: var(--line2); overflow: visible; }
.cw-lbar span:first-child { border-radius: 7px 0 0 7px; }
.cw-li { display: block; height: 100%; background: #b45309; }
.cw-le { display: block; height: 100%; background: #64748b; }
.cw-lr { display: block; height: 100%; background: #86efac; }
.cw-lcap { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #0f172a; }
.cw-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink2); }
.cw-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.cw-legend i.cw-lcapk { width: 2px; height: 12px; background: #0f172a; border-radius: 0; }
.cw-sug { margin: 0; padding-left: 1.2em; font-size: 12.5px; color: var(--ink2); display: grid; gap: 6px; }
.cw-sug .srcl, .cw-sug .cm-go { margin: 2px 0 0; font-size: 12px; }

/* やり取りの形の練習 */
.cw-sits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cw-sit { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; }
.cw-sit.cw-r-ok { border-color: #86efac; background: #f7fef9; }
.cw-sit.cw-r-mid { border-color: #fcd34d; background: #fffdf5; }
.cw-sh { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.cw-sh small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.cw-sh p { margin: 2px 0 0; font-size: 13px; color: var(--ink); }
.cw-sn { width: 22px; height: 22px; border-radius: 50%; background: #0f172a; color: #fff; font: 600 11.5px/22px var(--latin); text-align: center; }
.cw-mbtns { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0 30px; }
.cw-modeb { 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; }
.cw-modeb:hover { border-color: #94a3b8; color: var(--ink); }
.cw-modeb[aria-pressed="true"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.cw-sit .cw-fb { margin-left: 30px; }
.cw-sitsum { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }

/* 残す形 */
.cw-tpls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px; margin-top: 10px; align-items: start; }
.cw-tpl-wide { grid-column: 1 / -1; }
.cw-tpl { padding: 12px 14px; min-width: 0; }
.cw-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cw-tplh .cw-h4 { margin: 0; }
.cw-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; }
.cw-ltbl { min-width: 620px; }
.cw-ltbl td:nth-child(3), .cw-ltbl td:nth-child(4) { white-space: nowrap; }
.cw-ptbl { min-width: 1080px; }
.cw-dtbl { min-width: 640px; }
.cw-ltbl td:first-child, .cw-ptbl td:last-child { white-space: nowrap; }
.cw-ptbl td:first-child { min-width: 8em; }
.cw-ptbl td:nth-child(2), .cw-ptbl td:nth-child(3), .cw-ptbl td:nth-child(4) { min-width: 9em; }
.cw-ptbl td:nth-child(5), .cw-ptbl td:nth-child(6) { min-width: 18em; }

.cw-cell:focus-visible, .cw-bp:focus-visible, .cw-tp:focus-visible, .cw-sc:focus-visible, .cw-modeb:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .cw-mir, .cw-lgrid, .cw-tpls { grid-template-columns: minmax(0, 1fr); }
  .cw-lout { position: static; }
  .cw-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cw-teams, .cw-sits, .cw-map { grid-template-columns: minmax(0, 1fr); }
  .cw-kpis { grid-template-columns: minmax(0, 1fr); }
  .cw-clab { min-width: 0; width: 100%; }
  .cw-lrow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cw-mbtns, .cw-sit .cw-fb { margin-left: 0; }
  .cw-tbl th, .cw-tbl td { padding: 5px 6px; }
  .cw-seg { font-size: 0; padding: 0; }
  .cw-seg.cw-y-none { font-size: 11.5px; }
  .cw-legend.cw-barlg { display: flex; }
}