/* ベンダーの選び方と交渉。style.css・flow.css・cm.css の上に重ねる（接頭辞 vd-） */
.vd-h4 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.vd-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.vd-mt { margin-top: 10px; }
.vd-nl { display: block; margin: 6px 0 0; }
.vd-tips { margin-top: 12px; }
.vd-box { padding: 12px 14px; min-width: 0; }
.vd-tbl { font-size: 12.5px; }
.vd-tbl th, .vd-tbl td { padding: 6px 8px; }
.vd-tnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.vd-meta { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.vd-own { font-size: 12px; font-weight: 700; color: #92400e; align-self: center; }
.vd-btns { display: flex; flex-wrap: wrap; gap: 6px; }

/* 4 つの相手の表 */
.vd-ctbl { min-width: 900px; }
.vd-ctbl tbody th { font-weight: 700; min-width: 11em; }
.vd-ctbl td:nth-child(2), .vd-ctbl td:nth-child(3) { min-width: 15em; }

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

/* 評価表 */
.vd-gates { padding: 10px 14px; margin-bottom: 10px; }
.vd-gates ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); }
.vd-gates li.vd-gfail { color: #7f1d1d; }
.vd-gates li.vd-gfail b { display: inline-block; font-size: 11px; background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 0 7px; margin-right: 6px; }
.vd-score { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.vd-tcard, .vd-res { padding: 12px 14px; min-width: 0; }
.vd-stbl { min-width: 600px; font-size: 13px; }
.vd-stbl thead th { vertical-align: bottom; }
.vd-stbl thead th small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); max-width: 14em; }
.vd-stbl th.vd-win, .vd-stbl td.vd-win { background: #f0fdf4; }
.vd-stbl .vd-out { background: #f8fafc; color: var(--muted); }
.vd-stbl .vd-out .vd-pt { opacity: .45; }
.vd-stbl tbody tr.vd-on th, .vd-stbl tbody tr.vd-on td { box-shadow: inset 0 1px 0 #bbf7d0, inset 0 -1px 0 #bbf7d0; }
.vd-stbl tfoot th, .vd-stbl tfoot td { border-top: 2px solid var(--line); font-size: 13.5px; }
.vd-stbl tfoot b { font: 700 16px var(--latin); }
.vd-wcol { white-space: nowrap; font-size: 12px; color: var(--muted); }
.vd-crit { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 7px; margin-left: -7px; }
.vd-crit:hover { border-color: var(--line); background: var(--any-bg); }
.vd-crit[aria-pressed="true"] { border-color: #15803d; background: #f0fdf4; }
.vd-wbox { display: inline-flex; align-items: center; gap: 4px; }
.vd-wbox b { min-width: 1.4em; text-align: center; font: 700 15px var(--latin); color: var(--ink); }
.vd-wb { appearance: none; font: inherit; width: 28px; height: 28px; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; cursor: pointer; color: var(--ink); font-weight: 700; }
.vd-wb:hover:not([disabled]) { border-color: #94a3b8; }
.vd-wb[disabled] { opacity: .35; cursor: default; }
.vd-sc { white-space: nowrap; }
.vd-pt { display: inline-block; min-width: 24px; text-align: center; font: 700 13px/22px var(--latin); border-radius: 6px; }
.vd-p1 { background: #fee2e2; color: #991b1b; }
.vd-p2 { background: #ffedd5; color: #9a3412; }
.vd-p3 { background: #fef9c3; color: #854d0e; }
.vd-p4 { background: #dcfce7; color: #166534; }
.vd-p5 { background: #bbf7d0; color: #14532d; }
.vd-up { display: block; font-size: 10.5px; font-weight: 700; color: #15803d; }
.vd-fail { display: inline-block; font-size: 11.5px; font-weight: 700; background: #fee2e2; color: #991b1b; border-radius: 6px; padding: 1px 7px; }
.vd-whybox { margin-top: 10px; background: var(--line2); border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.vd-wh { margin: 0 0 4px; }
.vd-whybox ul { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; color: var(--ink2); }
.vd-whybox li b { margin-right: 6px; color: var(--ink); }
.vd-rank { display: grid; gap: 6px; }
.vd-rrow { display: grid; grid-template-columns: 22px minmax(5em, 9em) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.vd-rn { width: 22px; height: 22px; border-radius: 50%; background: var(--line2); font: 600 12px/22px var(--latin); text-align: center; }
.vd-rname { min-width: 0; overflow-wrap: anywhere; }
.vd-rrow.vd-first .vd-rn { background: #15803d; color: #fff; }
.vd-rbar { height: 12px; background: var(--line2); border-radius: 6px; overflow: hidden; }
.vd-rbar i { display: block; height: 100%; background: #94a3b8; border-radius: 6px; }
.vd-rrow.vd-first .vd-rbar i { background: #15803d; }
.vd-rv { font: 600 12.5px var(--latin); white-space: nowrap; }
.vd-gap { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.vd-rob { margin-top: 10px; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.vd-rob p { margin: 0 0 4px; color: var(--ink2); }
.vd-rob p:last-child { margin-bottom: 0; }
.vd-rob b { color: var(--ink); }
.vd-rob ul { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; color: var(--ink2); }
.vd-rob.vd-ok { background: #f0fdf4; }
.vd-rob.vd-mid { background: #fffbeb; }
.vd-rob.vd-ng { background: #fef2f2; }
.vd-ptbl { font-size: 12.5px; }
.vd-ptbl th, .vd-ptbl td { padding: 5px 8px; }
.vd-ptbl th { font-weight: 500; color: var(--ink2); }
.vd-ptbl td { font-weight: 700; }
.vd-ptbl tr.vd-on th, .vd-ptbl tr.vd-on td { background: #f0fdf4; }
.vd-lesson { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }

/* 交渉の練習・再委託の審査の練習 */
.vd-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink2); }
.vd-kinds li { display: flex; align-items: baseline; gap: 6px; }
.vd-kb { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 1px 8px; border: 1px solid var(--line); white-space: nowrap; }
.vd-kb.vd-k-must { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.vd-kb.vd-k-trade { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.vd-kb.vd-k-give { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.vd-kb.vd-k-law { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.vd-ng { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.vd-nglist, .vd-subs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vd-ngi, .vd-subi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper); min-width: 0; display: flex; flex-direction: column; }
.vd-ngi.vd-ok, .vd-subi.vd-ok { border-color: #86efac; background: #f7fef9; }
.vd-ngi.vd-mid, .vd-subi.vd-mid { border-color: #fcd34d; background: #fffdf5; }
.vd-ngh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.vd-ngn { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line2); color: var(--ink2); font: 600 11.5px/22px var(--latin); text-align: center; }
.vd-ngask { margin: 6px 0 8px; font-size: 12.5px; color: var(--ink2); }
.vd-kbtns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.vd-kbtn { appearance: none; font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--line); background: var(--paper); color: var(--ink2); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.vd-kbtn:hover { border-color: #94a3b8; color: var(--ink); }
.vd-kbtn[aria-pressed="true"].vd-k-must, .vd-kbtn[aria-pressed="true"].vd-s-no { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.vd-kbtn[aria-pressed="true"].vd-k-trade, .vd-kbtn[aria-pressed="true"].vd-s-cond { background: #b45309; border-color: #b45309; color: #fff; }
.vd-kbtn[aria-pressed="true"].vd-k-give, .vd-kbtn[aria-pressed="true"].vd-s-ok { background: #15803d; border-color: #15803d; color: #fff; }
.vd-kbtn[aria-pressed="true"].vd-k-law { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.vd-ans { margin-top: 8px; font-size: 12.5px; color: var(--ink2); background: var(--line2); border-radius: 8px; padding: 7px 10px; }
.vd-ans p { margin: 0 0 4px; }
.vd-ans p:last-child { margin-bottom: 0; }
.vd-ans .cm-go { margin: 4px 0 0; font-size: 12.5px; }
.vd-ans .srcl { margin: 4px 0 0; }
.vd-get b { display: block; font-size: 11.5px; color: #15803d; }
.vd-ngside { display: grid; gap: 10px; min-width: 0; position: sticky; top: 12px; }
.vd-ngout { padding: 12px 14px; min-width: 0; }
.vd-kc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vd-kci { border-radius: 10px; padding: 6px 4px; text-align: center; background: var(--line2); }
.vd-kci b { display: block; font: 700 20px/1.2 var(--latin); }
.vd-kci span { font-size: 11px; font-weight: 700; color: var(--ink2); }
.vd-kci.vd-k-must b { color: #b91c1c; }
.vd-kci.vd-k-trade b { color: #b45309; }
.vd-kci.vd-k-give b { color: #15803d; }
.vd-kci.vd-k-law b { color: #1d4ed8; }
.vd-fsum { margin: 10px 0 0; font-size: 13px; color: var(--ink2); }
.vd-warn { margin: 8px 0 0; font-size: 12.5px; color: #7f1d1d; background: #fef2f2; border-radius: 8px; padding: 6px 9px; }
.vd-fnote { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.vd-rules { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); }
.vd-subfoot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.vd-subsum { margin: 0; font-size: 13px; color: var(--ink2); flex: 1 1 18em; }

/* 満了から逆算する */
.vd-exit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.vd-form { padding: 10px 14px 12px; margin: 0; min-width: 0; }
.vd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.vd-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink2); min-width: 0; }
.vd-fields label small { font-size: 11px; font-weight: 500; color: var(--muted); }
.vd-inp { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: auto; }
.vd-inp input { font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 9px; padding: 5px 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.vd-inp em { flex: none; font-style: normal; font-size: 11.5px; color: var(--muted); }
.vd-exout { padding: 12px 14px; min-width: 0; position: sticky; top: 12px; }
.vd-verdict { margin: 0 0 10px; font-size: 13.5px; border-radius: 8px; padding: 8px 11px; }
.vd-verdict.vd-ok { background: #f0fdf4; color: #14532d; }
.vd-verdict.vd-mid { background: #fffbeb; color: #78350f; }
.vd-verdict.vd-ng { background: #fef2f2; color: #7f1d1d; }
.vd-dtbl { font-size: 12.5px; }
.vd-dtbl th, .vd-dtbl td { padding: 5px 8px; }
.vd-dtbl th { font-weight: 500; color: var(--ink2); }
.vd-dtbl td { font: 600 12.5px var(--latin); white-space: nowrap; }
.vd-psrc { display: block; margin-top: 4px; }
.vd-line { --nw: 15em; min-width: 620px; display: grid; gap: 4px; padding-top: 2px; }
.vd-lhead, .vd-lrow { display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); align-items: center; }
.vd-lname { font-size: 12.5px; font-weight: 700; color: var(--ink2); padding-right: 10px; }
.vd-ltrack { position: relative; display: block; height: 22px; background: var(--any-bg); border-radius: 5px; }
.vd-lscale { height: 34px; background: none; }
.vd-mlab { position: absolute; top: 0; transform: translateX(-50%); font: 600 10.5px/1.3 var(--latin); color: var(--muted); white-space: nowrap; text-align: center; }
.vd-mlab.vd-mk-now { color: #15803d; }
.vd-mlab.vd-mk-notice { color: #c2410c; }
.vd-mk { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; border-radius: 1px; }
.vd-mk.vd-mk-now { background: #15803d; }
.vd-mk.vd-mk-notice { background: #ea580c; }
.vd-lbar { position: absolute; top: 4px; bottom: 4px; display: block; border-radius: 4px; background: #64748b; }
.vd-lb-select { background: #1d4ed8; }
.vd-lb-move { background: #0891b2; }
.vd-lb-parallel { background: #7c3aed; }
.vd-lb-cut { background: #0f172a; min-width: 4px; }
.vd-lb-erase { background: #94a3b8; }

/* 残す形 */
.vd-tpls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.vd-tpl { padding: 12px 14px; min-width: 0; }
.vd-tplh { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.vd-tplh .vd-h4 { margin: 0; }
.vd-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; }
.vd-ltbl { min-width: 1700px; }
.vd-ltbl th { white-space: nowrap; }
.vd-ltbl td { min-width: 7em; }
.vd-ltbl td:nth-child(1) { font-weight: 700; min-width: 12em; }
.vd-ltbl td:nth-child(3), .vd-ltbl td:nth-child(8), .vd-ltbl td:nth-child(11) { min-width: 14em; }
.vd-ntbl { min-width: 1200px; }
.vd-ntbl th { white-space: nowrap; }
.vd-ntbl td:nth-child(3), .vd-ntbl td:nth-child(6) { min-width: 18em; }
.vd-etbl { min-width: 760px; }
.vd-etbl td:nth-child(2), .vd-etbl td:nth-child(3) { white-space: nowrap; font-family: var(--latin); }

.vd-crit:focus-visible, .vd-wb:focus-visible, .vd-kbtn:focus-visible, .vd-inp input:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .vd-score, .vd-ng, .vd-exit { grid-template-columns: minmax(0, 1fr); }
  .vd-ngside, .vd-exout { position: static; }
}
@media (max-width: 760px) {
  .vd-nglist, .vd-subs, .vd-fields { grid-template-columns: minmax(0, 1fr); }
  .vd-lab { min-width: 0; width: 100%; }
  .vd-kc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vd-rrow { grid-template-columns: 22px minmax(4em, 7em) minmax(0, 1fr) auto; }
}