/* 技術的負債の返し方。style.css・flow.css・fm.css の上に重ねる（接頭辞 dt-。Stack Map の design の dbt- とは別） */
.dt-judge { margin: 8px 0 0; font-size: 13px; font-weight: 700; border-radius: 8px; padding: 7px 10px; }
.dt-judge.ok { background: #f0fdf4; color: #14532d; }
.dt-judge.ng { background: #fef2f2; color: #7f1d1d; }
.dt-judge.mid { background: #fffbeb; color: #78350f; }
.dt-score { margin: 10px 0 0; font-size: 13.5px; color: var(--ink2); }
.dt-score b { font-variant-numeric: tabular-nums; }
.dt-ph { margin: 0; font-size: 12.5px; color: var(--muted); }
.dt-tiny { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

/* 判定の問い */
.dt-quiz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dt-q { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.dt-qt { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; display: flex; gap: 8px; align-items: flex-start; }
.dt-qt i { font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--latin); background: #e2e8f0; color: #334155; }
.dt-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dt-seg button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; border: 0; background: var(--paper); color: var(--ink2); padding: 5px 12px; cursor: pointer; }
.dt-seg button + button { border-left: 1px solid var(--line); }
.dt-seg button:hover { background: var(--any-bg); }
.dt-seg button[aria-pressed="true"] { background: #0f172a; color: #fff; }
.dt-q .srcl { margin-top: 6px; }
.dt-q .fm-go { margin-top: 6px; }

/* 練習: 台帳 */
.dt-bar0 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; }
.dt-lab { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dt-table { min-width: 820px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.dt-table thead th { vertical-align: bottom; }
.dt-table thead th small { display: block; font-size: 10.5px; font-weight: 500; }
.dt-table th.n, .dt-table td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-table td.n { font-size: 14px; font-weight: 700; }
.dt-table th[scope="row"] b { display: block; font-size: 13.5px; }
.dt-table th[scope="row"] small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); margin: 1px 0 3px; }
.dt-table tr.dt-on td, .dt-table tr.dt-on th { background: #eff6ff; }
.dt-flag { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 0 6px; margin: 0 4px 2px 0; }
.dt-flag.eol { background: #fee2e2; color: #991b1b; }
.dt-flag.ppl { background: #ede9fe; color: #5b21b6; }
.dt-flag.inc { background: #ffedd5; color: #9a3412; }
.dt-pick { appearance: none; width: 24px; height: 24px; border: 2px solid #94a3b8; border-radius: 6px; background: #fff; cursor: pointer; display: block; }
.dt-pick:hover { border-color: #475569; }
.dt-pick[aria-pressed="true"] { background: #1d4ed8; border-color: #1d4ed8; box-shadow: inset 0 0 0 3px #fff; }
.dt-ledgerout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 10px; align-items: start; margin-top: 10px; }
.dt-budget, .dt-result { padding: 12px 14px; min-width: 0; }
.dt-budget h3 { margin: 0 0 8px; font-size: 14px; }
.dt-budget p { margin: 6px 0 0; font-size: 13px; color: var(--ink2); }
.dt-budget p b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink); }
.dt-bar { height: 12px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.dt-bar i { display: block; height: 100%; border-radius: 999px; background: #1d4ed8; }
.dt-bar.over i { background: #dc2626; }
.dt-over { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: #991b1b; background: #fee2e2; border-radius: 6px; padding: 0 7px; }
.dt-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dt-kpi { background: var(--any-bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dt-kpi b { font: 700 18px/1.25 var(--sans); font-variant-numeric: tabular-nums; color: #1d4ed8; }
.dt-kpi span { font-size: 11.5px; color: var(--ink2); }

/* 説明の練習 */
.dt-explain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; align-items: start; }
.dt-explain .fm-card { height: 100%; }
.dt-words { padding: 12px 14px; min-width: 0; }
.dt-words h3 { margin: 0 0 6px; font-size: 14px; }
.dt-words th[scope="row"] { white-space: nowrap; }
.dt-case { margin: 0 0 10px; font-size: 13.5px; color: var(--ink2); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 8px 12px; max-width: 64em; }
.dt-compose { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.dt-parts { display: grid; gap: 8px; }
.dt-part { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dt-pn { margin: 0 0 6px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dt-pn i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 11.5px var(--latin); background: #0f172a; color: #fff; flex: none; }
.dt-opts { display: grid; gap: 5px; }
.dt-opt { appearance: none; font: inherit; font-size: 13px; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--paper); border-radius: 10px; padding: 7px 10px; color: var(--ink); }
.dt-opt:hover { border-color: #94a3b8; }
.dt-opt[aria-pressed="true"] { border-color: #0f172a; box-shadow: 0 0 0 1px #0f172a; background: #f8fafc; font-weight: 700; }
.dt-msg { padding: 12px 14px; position: sticky; top: 10px; }
.dt-msg h3 { margin: 0 0 8px; font-size: 14px; }
.dt-letter { margin: 0 0 8px; padding-left: 1.3em; display: grid; gap: 6px; font-size: 13.5px; }
.dt-letter li span { display: block; }
.dt-letter li small { display: block; font-size: 11.5px; margin-top: 2px; }
.dt-letter li.good small { color: #166534; }
.dt-letter li.bad span { color: var(--muted); text-decoration: line-through; text-decoration-color: #fca5a5; }
.dt-letter li.bad small { color: #9a3412; }
.dt-msg .dt-score { margin: 0 0 8px; font-size: 13px; }

/* データの形 */
.dt-cols { min-width: 680px; }
.dt-cols th[scope="row"] { white-space: nowrap; }
.dt-git { margin: 0; background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 10px 14px; font: 500 12.5px/1.6 var(--latin); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 60em; }

.dt-seg button:focus-visible, .dt-pick:focus-visible, .dt-opt:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

@media (max-width: 1100px) {
  .dt-ledgerout, .dt-explain, .dt-compose { grid-template-columns: minmax(0, 1fr); }
  .dt-msg { position: static; }
  .dt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dt-quiz { grid-template-columns: minmax(0, 1fr); }
  .dt-words th[scope="row"] { white-space: normal; }
}