.case {
  display: grid; grid-template-columns: minmax(0, .43fr) minmax(0, .57fr);
  align-items: start; gap: clamp(1.35rem, 4vw, 4rem); padding: clamp(1rem, 3vw, 2.5rem);
  border: 1px solid var(--edge); border-radius: 9px; background: var(--glass);
  backdrop-filter: blur(8px);
}
.case-track { position: relative; display: grid; gap: .7rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.case-track::before { content: ""; position: absolute; inset: 1rem auto 1rem .85rem; width: 1px; background: var(--copper); }
.case-track li { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 44px; }
.case-track strong, .case-track small { display: block; }
.case-track small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.track-number {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
  border: 1px solid var(--edge); border-radius: 50%; background: var(--base);
  color: var(--secondary); font-size: .72rem; font-variant-numeric: tabular-nums;
}
.track-control .track-number { border-color: var(--action); background: var(--action); color: var(--on-action); font-weight: 700; }
.case-switch {
  min-inline-size: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem; padding: 0; margin: 0; border: 0;
}
.case-switch legend { margin-bottom: .65rem; padding: 0; color: var(--secondary); font-size: .91rem; font-weight: 660; }
.case-switch input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case-switch label {
  display: grid; place-items: center; min-height: 44px; padding: .5rem;
  border: 1px solid var(--edge); border-radius: 4px; background: var(--base);
  color: var(--text); font-size: .91rem; font-weight: 630; cursor: pointer; text-align: center;
}
.case-switch input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 3px; }
.case-switch label:hover { border-color: var(--accent-text); }
.case-switch input:checked + label { background: var(--action); border-color: var(--action); color: var(--on-action); }
.case-panels { display: grid; grid-column: 1 / -1; margin-top: .35rem; min-width: 0; }
.case-panel {
  grid-area: 1 / 1; visibility: hidden; padding: clamp(.85rem, 1.9vw, 1.5rem);
  border: 1px solid var(--edge); border-radius: 5px; background: var(--base);
}
#parti-a:checked ~ .case-panels #utfall-a, #parti-ab:checked ~ .case-panels #utfall-ab { visibility: visible; }
.case-status {
  width: fit-content; max-width: 100%; margin-bottom: .65rem; padding: .29rem .55rem;
  border-radius: 3px; font-size: .8rem; font-weight: 690; line-height: 1.35;
}
.case-status span { display: inline-block; min-width: .8em; margin-right: .1rem; }
.status-complete { background: var(--alt); color: var(--text); }
.status-missing { background: var(--action); color: var(--on-action); }
.case-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .65rem; }
.case-comparison > div { padding: .33rem .55rem; border: 1px solid var(--divider); border-radius: 4px; }
.case-comparison dt { color: var(--muted); font-size: .75rem; }
.case-comparison dd { font-size: .92rem; font-weight: 650; }
.case-missing-part { color: var(--accent-text); }
.case-panel > p { color: var(--secondary); font-size: .92rem; }
.case-panel .case-source { margin-top: .7rem; padding-top: .55rem; border-top: 1px solid var(--divider); font-size: .78rem; }
.case-source strong { display: block; color: var(--text); }

@media (max-width: 690px) {
  .case { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .case-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; }
  .case-track::before { inset: .85rem calc(100% / 6) auto; width: auto; height: 1px; }
  .case-track li { flex-direction: column; align-items: center; gap: .25rem; text-align: center; font-size: .86rem; }
  .case-track small { font-size: .73rem; }
}

@media (max-width: 365px) {
  .case { padding: .8rem; }
}