/*
 * Clef practice (css/practice.css): /practice only, after css/clef.css and css/app.css (the round bar, the card and
 * the side panel come from /app unchanged). Adds the practice side panel extras, your practice rounds (a table that
 * turns into cards on phones), the reliability chart beside it and the reference record band. Checked from 320 px.
 * CSP: no inline styles; bar heights arrive as custom properties through the CSSOM (--h, --e).
 */

/* the card's "As a Clef call" switch belongs to /app's entry flow */
.practice .card-view { display: none; }
.practice .rb-chip .dot { background: var(--orange); }

/* ------------------------------------------------------------------ side panel */

.pr-side .side-btn { display: inline-flex; gap: 8px; }
.pr-side .side-btn:disabled { opacity: 1; background: #f3faf6; color: var(--good); border-color: #c5e6d2; box-shadow: none; }
.pr-real { margin-top: 16px; display: inline-flex; gap: 8px; }
.pr-real:disabled { opacity: .5; }
.pr-honest { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--amber-soft); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pr-honest > span:first-child { flex: none; margin-top: 2px; color: var(--rust); }

@media (max-width: 760px) {
  .pr-side .pr-real { order: 6; }
  .pr-side .side-fee { order: 7; }
  .pr-side .pr-honest { order: 8; }
}

/* ------------------------------------------------------------------ your practice rounds */

.pr-yours { margin-top: clamp(36px, 5vw, 56px); margin-bottom: clamp(48px, 7vw, 80px); }
.pr-yours .yours-head { align-items: flex-end; }
.pr-io { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-io .btn { display: inline-flex; gap: 6px; }

.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 4px 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--alabaster); }
.pr-stats .stat, .rec-stats .stat { padding: 0; border: 0; align-content: start; }
.pr-stats .stat dd { display: grid; gap: 2px; margin: 0; }
.pr-stats .stat-v { font-size: 19px; }
.pr-stats .stat-sub { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; } }

.pr-hist { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: start; }
.pr-hist-main { min-width: 0; }
.pr-cal { min-width: 0; padding: 16px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.pr-cal .cal { max-width: none; }
@media (max-width: 1000px) { .pr-hist { grid-template-columns: minmax(0, 1fr); } .pr-cal { max-width: 520px; } }
@media (max-width: 520px) { .pr-cal { padding: 12px 8px; } }

.pr-list { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.pr-list:has(.yours-empty) { border: 0; background: none; }
.pr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.7fr) minmax(0, .75fr) minmax(0, .8fr) minmax(0, .85fr); align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.pr-row-head { border-top: 0; background: var(--alabaster); padding-block: 11px; font: 600 11px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pr-row .num { text-align: right; }
.pr-c { min-width: 0; }
.pr-k { display: none; }
.pr-v { display: block; min-width: 0; overflow-wrap: anywhere; }
.pr-n { display: grid; gap: 2px; }
.pr-round { font: 600 14px/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-round:hover { color: var(--orange-deep); }
.pr-when { font-size: 12px; color: var(--muted); }
.pr-card .pr-v, .pr-ans .pr-v { font-size: 13px; line-height: 1.4; color: var(--body); }
.pr-you .pr-v, .pr-ref .pr-v { font: 500 13.5px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.pr-you .pr-v { font-weight: 600; color: var(--ink); }
.pr-ref .pr-v { color: var(--muted); }
.pr-st { display: flex; justify-content: flex-end; }
.pr-badge { justify-content: center; }
.pr-badge.is-beat { background: #e6f4ec; color: var(--good); }
.pr-badge.is-below { background: #fbe7e2; color: var(--bad); }
.pr-badge.is-tie { background: var(--concrete); color: var(--ink); }
.pr-badge.is-open { background: var(--chip); color: var(--rust); }
.pr-badge.is-wait { background: var(--cream-2); color: var(--orange-deep); }
.pr-badge.is-muted { background: var(--concrete); color: var(--muted); }
.pr-more { margin-top: 12px; }
.pr-more:has(> [hidden]) { display: none; }

@media (max-width: 760px) {
  .pr-row-head { display: none; }
  .pr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'n n st' 'card card card' 'ans ans ans' 'you ref .'; gap: 8px 12px; padding: 14px 16px; }
  .pr-row:nth-child(2) { border-top: 0; }
  .pr-n { grid-area: n; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
  .pr-st { grid-area: st; }
  .pr-card { grid-area: card; }
  .pr-ans { grid-area: ans; }
  .pr-you { grid-area: you; }
  .pr-ref { grid-area: ref; }
  .pr-row .num { text-align: left; }
  .pr-c:not(.pr-n):not(.pr-st) { display: grid; gap: 3px; }
  .pr-k { display: block; font: 600 10.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 359px) {
  .pr-n { grid-auto-flow: row; gap: 2px; }
  .pr-io .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------------ the reference record */

.pr-rec { padding-block: clamp(48px, 7vw, 88px); }
.pr-rec-in { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pr-rec-text { display: grid; gap: 14px; align-content: start; }
.pr-rec-text .small { color: var(--body); max-width: 46ch; }
@media (max-width: 900px) { .pr-rec-in { grid-template-columns: minmax(0, 1fr); } }

.rec { min-width: 0; padding: 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.rec-empty { font-size: 14px; color: var(--muted); }
.rec-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; margin-bottom: 20px; }
.rec-stats .stat dd { display: grid; gap: 2px; margin: 0; }
.rec-stats .stat-v { font-size: 18px; }
.rec-stats .stat-sub { font-size: 12px; color: var(--muted); }
@media (max-width: 620px) { .rec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rec { padding: 14px; } }

.rec-chart { min-width: 0; }
.rec-bars { display: flex; align-items: flex-end; gap: 2px; height: 132px; padding-top: 6px; border-bottom: 1px solid var(--line-2); }
.rec-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.rec-bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h, 0) * 100%); border-radius: 2px 2px 0 0; background: var(--orange-2); }
.rec-col.is-under .rec-bar { background: var(--sand-2); }
.rec-tick { position: absolute; left: -1px; right: -1px; bottom: calc(var(--e, 0) * 100%); height: 2px; margin-bottom: -1px; border-radius: 2px; background: var(--eclipse); }
.rec-col.is-empty::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px 2px 0 0; background: var(--concrete); }
.rec-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font: 500 11.5px/1.2 var(--mono); color: var(--muted); }
.rec-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.rec-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 6px; }
.rec-key:first-child { margin-left: 0; }
.rec-key.is-bar { background: var(--orange-2); }
.rec-key.is-tick { height: 2px; background: var(--eclipse); }
.rec-key.is-under { background: var(--sand-2); }
.rec-note { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* first paint holds its shape while the card and the record load */
main[data-practice-root] { min-height: calc(100svh - var(--hdr-h, 64px)); }