/* ==========================================================================
   practice-play.css - the public five-round demo session
   (Pages/Public/PracticePlay.aspx + Scripts/practice-play.js).

   Implements the "Demo Session" design canvas on top of the Editorial
   component layer (editorial.css) and the public chrome/page layer
   (public-practice.css: .pp2, .pp2-choice, .pp2-verdict, .pp2-sticky,
   .pp2-lv, .panel). Mobile-first: the >=981px block at the end is the
   desktop reflow (rail beside the question, sticky plan list). Tokens only.
   ========================================================================== */

.pd { padding-top: 0; }
.pd-hide { display: none !important; }
.pd-desk { display: none; }

@keyframes pd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pd-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.pd [data-rise], .pd-results[data-rise] { animation: pd-rise 0.4s var(--ease-paper) both; }
.pd-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); animation: pd-pulse 1.6s ease-in-out infinite; flex: none; }

/* ---- shared bits ---- */
.pd-label {
    font-family: var(--font-mono); font-size: var(--ed-text-label);
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
    margin-bottom: 8px;
}
.pd-fine { font-family: var(--font-mono); font-size: var(--ed-text-fine); color: var(--ink-mute); }
.pd-fine.warn { color: var(--brand-amber); }
.pd-em {
    margin: 4px 0 0; font-family: var(--font-accent); font-style: italic;
    font-size: var(--ed-text-serif-h); line-height: 1.5; color: var(--ink-2);
    text-wrap: pretty; max-width: 46ch;
}
.pd-em.small { font-size: var(--ed-text-serif-h); margin: 0; flex: 1; min-width: 160px; }
.pd-em.good { color: var(--brand-green); }
.pd-em.part { color: var(--brand-teal); }
.pd-em.bad { color: var(--brand-coral); }
.pd .mute, .pd .sep { color: var(--ink-mute); }
.pd .bot { color: var(--ink-mute); font-weight: 400; font-size: var(--ed-text-small); }

.pd .btn.pd-primary {
    background: var(--brand-emerald); border-color: var(--brand-emerald); color: var(--accent-ink);
}
.pd .btn.pd-primary:hover:not(:disabled) { background: var(--brand-emerald-hover); border-color: var(--brand-emerald-hover); }
.pd .btn.pd-primary:disabled { opacity: 0.5; cursor: default; }

.pd-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: var(--ed-text-body);
    color: var(--ink-2); background: rgba(255,255,255,0.06); border: 1px solid var(--rule);
}
.pd-avatar.you { color: var(--accent-ink); background: var(--brand-emerald); border-color: var(--brand-emerald); }
.pd-avatar.sm { width: 28px; height: 28px; font-size: var(--ed-text-detail); }

.pd-panel { margin: 0; }
.pd-stem {
    padding: 18px 20px 6px; font-size: var(--ed-text-item-title); line-height: 1.6;
    color: var(--ink); text-wrap: pretty;
}
.pd-block { padding: 16px 20px 0; }
.pd-chips { padding: 16px 20px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-actionrow {
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 20px 16px; border-top: 1px solid var(--rule-soft);
}
.pd-actionrow.end { justify-content: flex-end; border-top: 0; padding-top: 4px; }
.pd-actionrow .pd-fine.warn { color: var(--brand-coral); }

/* ---- 1 · lobby ---- */
.pd-lobby { padding: 28px 0 24px; }
.pd-lobby-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.pd-lobby-main { display: flex; flex-direction: column; gap: 16px; }
.pd-h1 {
    margin: 0; font-family: var(--font-display); font-size: var(--font-size-4xl, var(--ed-text-hero));
    line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty;
}
.pd-metaline {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink-2);
    font-feature-settings: 'tnum';
}
.pd-planwrap { display: flex; flex-direction: column; gap: 8px; }
.pd-planwrap .pd-label { margin-bottom: 0; }
.pd-plandots { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; }
.pd-plandot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; }
.pd-plandot .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--brand-teal); background: transparent; }
.pd-plandot:nth-child(3) .dot, .pd-plandot:nth-child(5) .dot { background: rgba(var(--brand-teal-rgb), 0.35); }
.pd-plandot .lbl { font-family: var(--font-mono); font-size: var(--ed-text-micro); color: var(--ink-2); }
.pd-startwrap { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pd .btn.pd-start { justify-content: center; padding: 13px 22px; font-size: var(--ed-text-base); }
.pd-startwrap .pd-fine { text-align: center; }

.pd-roster .panel-h { margin-bottom: 0; }
.pd-roster-body { padding: 8px 20px 16px; display: flex; flex-direction: column; }
.pd-roster-row {
    display: flex; align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.pd-roster-row .name { flex: 1; min-width: 0; font-size: var(--ed-text-base); color: var(--ink); font-weight: 500; }
.pd-roster-row .rating { font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink-3); font-feature-settings: 'tnum'; }
.pd-roster-row.pending .name { color: var(--ink-mute); font-weight: 400; font-style: italic; font-family: var(--font-accent); }
.pd-roster-row.pending .pd-avatar { animation: pd-pulse 1.6s ease-in-out infinite; }
.pd-roster-note { padding-top: 12px; font-size: var(--ed-text-small); color: var(--ink-3); line-height: 1.5; }

/* ---- round bar (sticky under the public nav) ---- */
.pd-roundbar {
    position: sticky; top: 51px; z-index: 40;
    margin: 0 -18px; padding: 10px 18px;
    background: rgba(var(--pp2-scrim-rgb), 0.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
}
.pd-roundbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-roundbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-roundnum { font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink); font-feature-settings: 'tnum'; white-space: nowrap; }
.pd-roundkind { font-size: var(--ed-text-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-clockwrap { display: flex; align-items: center; gap: 8px; }
.pd-clocklabel { font-family: var(--font-mono); font-size: var(--ed-text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.pd-clock {
    font-family: var(--font-mono); font-size: var(--ed-text-title); font-weight: 500;
    font-feature-settings: 'tnum'; letter-spacing: 0.02em; color: var(--ink); line-height: 1;
}
.pd-clock.urgent { color: var(--brand-amber); }
.pd-planbars { display: flex; gap: 6px; margin-top: 8px; }
.pd-planbar { height: 3px; flex: 1; border-radius: 2px; background: rgba(255,255,255,0.10); }
.pd-planbar.live { background: var(--brand-teal); }
.pd-planbar.done { background: rgba(var(--brand-teal-rgb), 0.45); }
.pd-planbar.good { background: var(--brand-green); }
.pd-planbar.part { background: var(--brand-teal); }
.pd-planbar.bad { background: var(--brand-coral); }

/* ---- grid + rail ---- */
.pd-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
.pd-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pd-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; order: -1; }
.pd-railcell {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
    padding: 10px 6px; border: 1px solid var(--rule-soft); border-radius: 3px;
    background: var(--surface);
    transition: background var(--t-base) ease, border-color var(--t-base) ease;
}
.pd-railcell .who { min-width: 0; }
.pd-railcell .name { font-size: var(--ed-text-small); color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-railcell .meta { display: none; font-family: var(--font-mono); font-size: var(--ed-text-micro); color: var(--ink-3); font-feature-settings: 'tnum'; }
.pd-railcell .status {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: var(--ed-text-micro); white-space: nowrap;
    color: var(--ink-mute);
}
.pd-railcell .status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: none; }
.pd-railcell.wait .status .dot { display: inline-block; animation: pd-pulse 1.6s ease-in-out infinite; }
.pd-railcell.you .status { color: var(--brand-teal); }
.pd-railcell.done .status { color: var(--ink-2); }
.pd-railcell.good { border-color: rgba(var(--brand-green-rgb), 0.35); background: rgba(var(--brand-green-rgb), 0.05); }
.pd-railcell.good .status { color: var(--brand-green); }
.pd-railcell.bad { border-color: rgba(255,140,140,0.3); background: rgba(255,140,140,0.05); }
.pd-railcell.bad .status { color: var(--brand-coral); }
.pd-rail-plan { display: none; grid-column: 1 / -1; }
.pd-planlist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.pd-planlist .pd-label { margin-bottom: 0; }
.pd-planitem {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink-3);
}
.pd-planitem .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.14); flex: none; }
.pd-planitem .n { width: 14px; color: var(--ink-mute); }
.pd-planitem .lbl { flex: 1; }
.pd-planitem .res { font-feature-settings: 'tnum'; }
.pd-planitem.live { color: var(--ink); }
.pd-planitem.live .dot { background: var(--brand-teal); }
.pd-planitem.done .dot { background: rgba(var(--brand-teal-rgb), 0.45); }
.pd-planitem.good { color: var(--brand-green); }
.pd-planitem.good .dot { background: var(--brand-green); }
.pd-planitem.part { color: var(--brand-teal); }
.pd-planitem.part .dot { background: var(--brand-teal); }
.pd-planitem.bad { color: var(--brand-coral); }
.pd-planitem.bad .dot { background: var(--brand-coral); }

/* ---- 2 · MCQ ---- */
.pd-choices { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 18px; }
.pd .pp2-choice.pd-choice { min-height: 48px; padding: 11px 14px; gap: 14px; }
.pd .pp2-choice.is-picked {
    border-color: rgba(var(--brand-teal-rgb), 0.55);
    background: rgba(var(--brand-teal-rgb), 0.08);
}
.pd .pp2-choice.is-picked .pp2-letter { color: var(--brand-teal); border-color: var(--brand-teal); }
.pd .pp2-verdict.pd-verdict { padding: 14px 20px; flex-wrap: wrap; }
.pd .pp2-verdict.pd-verdict .pp2-verdict-copy { min-width: 200px; }

/* ---- 3 · written ---- */
.pd-writebox { padding: 10px 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.pd-writehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-counter { font-feature-settings: 'tnum'; }
.pd .textarea.pd-answer { min-height: 150px; resize: vertical; }
.pd-writebox .pd-actionrow { border-top: 0; padding: 6px 0 0; }

/* ---- 4 · self-check ---- */
.pd-alert { margin: 0 0 14px; }
.pd-answershown {
    font-family: var(--font-mono); font-size: var(--ed-text-compact); line-height: 1.7; color: var(--ink);
    padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--surface);
    white-space: pre-wrap; word-break: break-word;
}
.pd-ms {
    font-size: var(--ed-text-body); line-height: 1.6; color: var(--ink-2);
    padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--surface);
}
.pd-msrow {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px;
    padding: 10px 2px; text-align: left; background: transparent; border: 0;
    border-bottom: 1px solid var(--rule-soft); cursor: pointer;
    color: var(--ink); font-family: var(--font-body); font-size: var(--ed-text-base);
}
.pd-msrow .box {
    width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); border-radius: 2px; background: transparent; color: var(--accent-ink);
    transition: background var(--t-fast) ease;
}
.pd-msrow .box svg { display: none; }
.pd-msrow.on .box { background: var(--brand-emerald); border-color: var(--brand-emerald); }
.pd-msrow.on .box svg { display: block; }
.pd-msrow .txt { flex: 1; }
.pd-msrow .mk { font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--brand-teal); }
.pd-selffoot { display: flex; align-items: center; gap: 14px; padding: 16px 20px 18px; flex-wrap: wrap; }
.pd-selfscore { display: flex; align-items: baseline; gap: 8px; }
.pd-selfscore .num { font-family: var(--font-mono); font-size: var(--ed-text-title); color: var(--ink); font-feature-settings: 'tnum'; }
.pd-selfscore .lbl { font-size: var(--ed-text-body); color: var(--ink-2); }

/* ---- 5 · marking + mark card ---- */
.pd-marking { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.pd-marking-line { display: flex; align-items: center; gap: 10px; font-size: var(--ed-text-body); color: var(--ink-2); }
.pd-skel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-skel-col { display: flex; flex-direction: column; gap: 8px; }
.pd-skel {
    display: block; height: 12px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
    animation: pd-pulse 1.6s ease-in-out infinite;
}
.pd-skel.num { height: 30px; width: 74px; }
.pd-skel.pill { height: 26px; width: 130px; border-radius: 2px; }
.pd-skel.w25 { width: 25%; }
.pd-skel.w60 { width: 60%; }
.pd-skel.w75 { width: 75%; }
.pd-skel.w90 { width: 90%; }

.pd-markhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 18px 20px 0; }
.pd-marknum { font-family: var(--font-mono); font-size: var(--ed-text-hero); color: var(--ink); font-feature-settings: 'tnum'; line-height: 1; }
.pd-marknum .of { font-size: var(--ed-text-detail); color: var(--ink-3); margin-left: 4px; }
.pd-markhead .pd-em { margin-left: auto; }
.pd-markbody { padding: 12px 20px 20px; }
.pd-markbody .mf-card { margin: 0; }

/* ---- 6 · results + wall ---- */
.pd-results { padding: 24px 0 0; display: flex; flex-direction: column; gap: 18px; }
.pd-standings { padding: 6px 20px 16px; }
.pd-standrow {
    display: grid; grid-template-columns: 28px 1fr 64px 60px; align-items: center; gap: 10px;
    padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.pd-standrow.you { background: rgba(var(--brand-teal-rgb), 0.05); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.pd-standrow .place { font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink-3); font-feature-settings: 'tnum'; }
.pd-standrow.you .place { color: var(--brand-teal); }
.pd-standrow .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pd-standrow .name { font-size: var(--ed-text-base); color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-standrow .score { font-family: var(--font-mono); font-size: var(--ed-text-base); color: var(--ink); text-align: right; font-feature-settings: 'tnum'; }
.pd-standrow .score .of { color: var(--ink-mute); font-size: var(--ed-text-fine); }
.pd-standrow .time { font-family: var(--font-mono); font-size: var(--ed-text-detail); color: var(--ink-3); text-align: right; font-feature-settings: 'tnum'; }
.pd-resultdots { display: flex; gap: 10px; padding-top: 16px; flex-wrap: wrap; }
.pd-resultdot { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 52px; }
.pd-resultdot .ring {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); color: var(--ink-3);
    font-family: var(--font-mono); font-size: var(--ed-text-micro); font-feature-settings: 'tnum';
}
.pd-resultdot.good .ring { border-color: var(--brand-green); color: var(--brand-green); }
.pd-resultdot.part .ring { border-color: var(--brand-teal); color: var(--brand-teal); }
.pd-resultdot.bad .ring { border-color: var(--brand-coral); color: var(--brand-coral); }
.pd-resultdot .lbl { font-family: var(--font-mono); font-size: var(--ed-text-tiny); color: var(--ink-3); letter-spacing: 0.06em; }

.pd-used { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pd-useditem { border-top: 1px solid var(--rule); padding-top: 12px; }
.pd-useditem .n { font-family: var(--font-mono); font-size: var(--ed-text-micro); color: var(--brand-teal); margin-bottom: 6px; }
.pd-useditem .t { font-family: var(--font-display); font-size: var(--ed-text-base); font-weight: 600; color: var(--ink); }
.pd-useditem .d { font-size: var(--ed-text-body); color: var(--ink-2); margin-top: 4px; }

.pd-wall { border-color: rgba(var(--brand-teal-rgb), 0.28); padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.pd-wall-h {
    margin: 0; font-family: var(--font-display); font-size: var(--ed-text-title); font-weight: 600;
    line-height: 1.3; color: var(--ink); text-wrap: pretty;
}
.pd-wall-h em { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--brand-teal); }
.pd-wallrows { display: flex; flex-direction: column; }
.pd-wallrow { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--rule-soft); }
.pd-wallrow.last { border-bottom: 1px solid var(--rule-soft); }
.pd-wallrow .n { font-family: var(--font-mono); font-size: var(--ed-text-micro); color: var(--brand-teal); }
.pd-wallrow .t { font-size: var(--ed-text-base); color: var(--ink-2); }
.pd-wall-actions { display: flex; flex-direction: column; gap: 10px; }
.pd .btn.pd-wallcta { justify-content: center; padding: 13px 22px; font-size: var(--ed-text-base); }
.pd-another { font-size: var(--ed-text-body); color: var(--ink-3); text-align: center; padding: 8px 4px; }
.pd-another:hover { color: var(--brand-teal); }

/* ---- sticky mobile action ---- */
.pd-sticky .btn { width: 100%; justify-content: center; background: var(--brand-emerald); border-color: var(--brand-emerald); color: var(--accent-ink); }
.pd-sticky .btn:disabled { opacity: 0.5; }

/* ---- desktop reflow ---- */
@media (min-width: 981px) {
    .pd-desk { display: flex; }
    .pd-lobby-grid { grid-template-columns: minmax(0, 1fr) 360px; }
    .pd-roundbar { top: 55px; margin: 0; padding: 10px 0; }
    .pd-grid { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
    .pd-rail { grid-template-columns: 1fr; gap: 4px; order: 2; position: sticky; top: 132px; }
    .pd-railcell { flex-direction: row; text-align: left; padding: 9px 10px; gap: 10px; }
    .pd-railcell .who { flex: 1; }
    .pd-railcell .meta { display: block; }
    .pd-railcell .status { margin-left: auto; }
    .pd-rail-plan { display: block; }
    .pd-standrow { grid-template-columns: 32px 1fr 80px 72px; }
    .pd-used { grid-template-columns: repeat(3, 1fr); }
    .pd-wall-actions { flex-direction: row; align-items: center; }
    .pd-another { margin-left: auto; }
}