/* Practice panel (practice-panel.js). Tokens from base.css. */
.pp { display: grid; gap: .75rem; font-size: .8125rem; }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pp-lab { font: 500 .625rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--grey-3); }
.pp-head .pp-lab { color: var(--ink); font-size: .6875rem; }
.pp-pills { display: flex; gap: .375rem; }
.pp-pills .btn { flex: 1; padding-left: .5rem; padding-right: .5rem; }
.pp-sec { display: grid; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--faint); }
.pp-sel { width: 100%; padding-top: .5rem; padding-bottom: .5rem; font-size: .6875rem; text-overflow: ellipsis; }

.pp-meter { position: relative; height: .625rem; border: var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); }
.pp-meter i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--grey-2), var(--ink) 70%, var(--red)); transition: width .06s linear; }

.pp-range { width: 100%; accent-color: var(--red); }
.pp-status { font: 400 .6875rem/1.35 var(--f-mono); color: var(--grey-3); min-height: 1em; overflow-wrap: anywhere; }
.pp-status.bad { color: var(--red); }

.pp-notes { font-family: var(--f-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; letter-spacing: .02em; min-height: 1.65rem; overflow: hidden; white-space: nowrap; }
.pp-notes .guess { color: var(--grey-2); }
.pp-notes span:last-child { color: var(--red); }

.pp-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
.pp-stats div { display: grid; justify-items: center; gap: .125rem; padding: .375rem 0; border: 1px solid var(--faint); border-radius: .75rem; }
.pp-stats div:first-child { border: var(--line); background: var(--panel); }
.pp-stats b { font: 700 .9375rem/1 var(--f-title); }
.pp-stats span { font: 500 .5rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grey-3); }