.jp-paths { margin: 28px 0; padding: clamp(16px,3vw,28px); border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-surface); color: var(--c-ink); container-type: inline-size; }
.jp-paths h3 { margin: 0 0 12px; font-size: 1.15rem; }
.jp-paths .jp-key { margin: 0 0 20px; font-size: .9rem; color: var(--c-ink-soft); }
.jp-paths .jp-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.jp-paths .jp-cases > li { padding: 0 0 20px; margin: 0; border-bottom: 1px solid var(--c-border); }
.jp-paths .jp-cases > li:last-child { padding-bottom: 0; border: 0; }
.jp-paths .jp-case-name { display: block; margin-bottom: 12px; }
.jp-paths dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0; }
.jp-paths dl > div { min-width: 0; }
.jp-paths dt { font-size: .85rem; margin: 0 0 3px; }
.jp-paths dd { margin: 0; min-width: 0; }
.jp-paths dd strong { display: inline-block; font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.jp-paths .jp-bar { display: block; width: 100%; height: 10px; border: 1px solid #087b78; background: #effbf8; border-radius: 3px; margin: 8px 0; }
.jp-paths .jp-bar i { display: block; height: 100%; background: #087b78; }
.jp-paths .jp-result { margin: 8px 0 0; color: #086b66; font-weight: 700; }
.jp-paths .jp-not-yet .jp-bar { border-color: #9c490b; background: #fff4dc; }
.jp-paths .jp-not-yet .jp-bar i { background: repeating-linear-gradient(135deg,#9c490b 0 4px,#ffe9c3 4px 7px); }
.jp-paths .jp-not-yet .jp-result { color: #914209; }
.jp-paths .jp-note { margin: 20px 0 10px; }
.jp-paths .source { margin-bottom: 0; }
.jp-paths .jp-unit { display: inline-block; white-space: nowrap; }
@container (max-width: 14em) { .jp-paths dl { grid-template-columns: minmax(0,1fr); } }
@media (prefers-color-scheme: dark) { .jp-paths .jp-result { color: #83e3ce; } .jp-paths .jp-not-yet .jp-result { color: #ffce8d; } }