/* Saved data › Record practice (practice-card.js). Prefix prk-. */
:where(html:not(.design-old)) .prk-card { margin: 0 0 var(--s5); display: grid; gap: var(--s2); min-width: 0; }
:where(html:not(.design-old)) .prk-title { margin: 0; font-family: var(--v2-font-display); font-size: var(--v2-fs-lg);
    font-weight: 700; font-stretch: 94%; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .prk-how { margin: 0; font-size: var(--v2-fs-md); color: var(--text-2, var(--text)); max-width: 70ch; }
:where(html:not(.design-old)) .prk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
:where(html:not(.design-old)) .prk-lbl { flex-basis: 100%; }
:where(html:not(.design-old)) .prk-code { display: inline-flex; align-items: center; min-height: var(--v2-h-sm);
    padding: 0 var(--s3); background: var(--v2-inset); border: 1px solid var(--v2-line); border-radius: var(--v2-r-sm);
    font-family: var(--v2-font-mono); font-size: var(--v2-fs-lg); letter-spacing: .06em; color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .prk-status { margin: 0; display: flex; align-items: center; gap: var(--s2);
    font-size: var(--v2-fs-md); color: var(--text-3); overflow-wrap: anywhere; }
:where(html:not(.design-old)) .prk-dot { flex: none; background: var(--text-4, var(--text-3)); }
:where(html:not(.design-old)) .prk-card.is-recording .prk-dot { background: var(--dx-good); }
:where(html:not(.design-old)) .prk-card.is-recording .prk-status { color: var(--text-hi, var(--text)); }
:where(html:not(.design-old)) .prk-saved,
:where(html:not(.design-old)) .prk-last { margin: 0; font-size: var(--v2-fs-sm); color: var(--text-3); overflow-wrap: anywhere; }
:where(html:not(.design-old)) .prk-signin { justify-self: start; }

/* Old design: same layout on the old tokens. */
html.design-old .prk-card { margin: 0 0 var(--s5); display: grid; gap: var(--s2); padding: var(--s3);
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
html.design-old .prk-title { margin: 0; font-size: var(--fs-body); }
html.design-old .prk-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
html.design-old .prk-lbl { flex-basis: 100%; font-size: var(--fs-small); color: var(--text-3); }
html.design-old .prk-how,
html.design-old .prk-status,
html.design-old .prk-saved,
html.design-old .prk-last { margin: 0; font-size: var(--fs-small); color: var(--text-3); }

/* Recent runs: saved, or why not. */
.prk-saved { list-style: none; padding: 0; display: grid; gap: 2px; }
.prk-saved .prk-no, .prk-last.prk-no { color: var(--warn, var(--text)); }
.prk-card details.explain { margin-top: 0; }