/* Off-site lesson companion page ("陪练页"). The current step fills the main area;
   the user keeps their own WordPress / CJ admin open in another tab or window.
   Selectors start with "#main .prc" so page-wide "#main h2 / p / li" rules cannot override them. */
#main .prc{--prc-purple:#7532d6;--prc-soft:color-mix(in srgb,var(--ink) 3.5%,var(--bg));--prc-hair:color-mix(in srgb,var(--ink) 9%,var(--bg));--prc-ok:var(--accent);max-width:960px;color:var(--ink);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
:root[data-theme=dark] #main .prc{--prc-purple:#b39cf7;--prc-soft:color-mix(in srgb,var(--ink) 7%,var(--bg));--prc-hair:color-mix(in srgb,var(--ink) 14%,var(--bg))}
#main div.prc :is(h1,h2,h3,p,ol,ul,li){margin:0}

/* Head: back link, lesson, progress, the learner's site */
#main .prc .prc-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px;font-size:13px;color:var(--muted)}
#main .prc .prc-top a{color:inherit;text-decoration:none}
#main .prc .prc-top a:hover{color:var(--ink)}
#main .prc .prc-site{display:inline-flex;align-items:center;gap:8px;min-width:0}
#main .prc .prc-site b{overflow:hidden;font-weight:500;color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
#main .prc .prc-site a{text-decoration:underline;text-underline-offset:3px}
#main .prc .prc-lesson{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--prc-purple)}
#main .prc .prc-title{margin:0 0 16px;font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
#main .prc .prc-bar{display:flex;align-items:center;gap:12px;margin:0 0 32px;font-size:13px;color:var(--muted)}
#main .prc .prc-bar span{flex:none}
#main .prc .prc-bar i{flex:1;height:3px;overflow:hidden;border-radius:999px;background:var(--prc-hair)}
#main .prc .prc-bar i::before{content:"";display:block;width:var(--done,0%);height:100%;border-radius:inherit;background:var(--prc-purple)}

/* Body: step list + current step */
#main .prc .prc-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
#main .prc .prc-steps{position:sticky;top:8px;margin:0;padding:0;list-style:none;counter-reset:step}
#main .prc .prc-steps li{position:relative;display:flex;align-items:flex-start;gap:12px;padding:8px 0;font-size:13px;line-height:1.5;color:var(--muted);counter-increment:step}
#main .prc .prc-steps li::before{content:counter(step);flex:none;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--prc-hair);border-radius:50%;font-size:12px;line-height:1}
#main .prc .prc-steps li.is-done{color:var(--ink)}
#main .prc .prc-steps li.is-done::before{content:"";border-color:transparent;background:var(--prc-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
#main .prc .prc-steps li.is-now{font-weight:600;color:var(--ink)}
#main .prc .prc-steps li.is-now::before{border-color:var(--prc-purple);background:var(--prc-purple);color:#fff}

#main .prc .prc-step h2{margin:0 0 12px;font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
#main .prc .prc-what{max-width:620px;margin:0 0 8px;font-size:15px;line-height:1.6}
#main .prc .prc-why{max-width:620px;margin:0 0 24px;font-size:13px;line-height:1.6;color:var(--muted)}
#main .prc .prc-path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 24px;padding:6px 12px;border-radius:12px;background:var(--prc-soft);font-size:13px;line-height:1.6}
#main .prc .prc-path span{color:var(--muted)}

/* Screenshot of the admin screen the learner should see */
#main .prc .prc-shot{margin:24px 0 0}
#main .prc .prc-shot-frame{overflow:hidden;border:1px solid var(--prc-hair);border-radius:14px;background:var(--prc-soft)}
#main .prc .prc-shot-frame img{display:block;width:100%;height:auto}
#main .prc .prc-shot figcaption{margin:8px 0 0;font-size:12px;color:var(--muted)}

/* Actions */
#main .prc .prc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 16px}
#main .prc .prc-primary,#main .prc .prc-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 22px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:opacity .15s ease,background-color .15s ease}
#main .prc .prc-primary{border:0;background:var(--button);color:var(--button-ink)}
#main .prc .prc-primary:hover{opacity:.84}
#main .prc .prc-secondary{border:1px solid var(--prc-hair);background:var(--bg);color:var(--ink)}
#main .prc .prc-secondary:hover{background:var(--prc-soft)}
#main .prc :is(.prc-primary,.prc-secondary) svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#main .prc :is(.prc-primary,.prc-secondary):focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Automatic check result */
#main .prc .prc-check{display:block;max-width:620px;margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--prc-soft);font-size:13px;line-height:1.5}
#main .prc .prc-check b{font-weight:600}
#main .prc .prc-manual{font-size:13px;color:var(--muted)}
#main .prc .prc-manual button{all:unset;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

#main .prc .prc-tip{margin:40px 0 0;padding:16px 0 0;border-top:1px solid var(--prc-hair);font-size:13px;color:var(--muted)}

@media(max-width:760px){
 #main .prc .prc-top{margin-bottom:16px}
 #main .prc .prc-title{font-size:24px}
 #main .prc .prc-bar{margin-bottom:24px}
 #main .prc .prc-body{grid-template-columns:1fr;gap:0}
 #main .prc .prc-steps{display:none}
 #main .prc .prc-actions{flex-direction:column;align-items:stretch}
 #main .prc .prc-tip{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){#main .prc :is(.prc-primary,.prc-secondary){transition:none}}

/* Shared interactions inside the approved practice layout. */
#main .prc .prc-controls{margin:0 0 16px;max-width:620px}
#main .prc .prc-controls :is(label,details,fieldset){display:block;margin:12px 0}
#main .prc .prc-controls :is(input:not([type=checkbox]),select),#main .prc .prc-site-edit input{display:block;width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--prc-hair);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
#main .prc .prc-controls :is(button,a){border:0;background:transparent;color:var(--ink);font:inherit;padding:8px 0;margin-right:16px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#main .prc .prc-controls fieldset{border:0;padding:0}
#main .prc .prc-controls [data-answer]{display:block;text-align:left;width:100%;border-bottom:1px solid var(--prc-hair);text-decoration:none;padding:12px 0}
#main .prc .prc-controls pre{padding:16px;background:var(--prc-soft);border-radius:12px;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
#main .prc .prc-site-edit{margin-bottom:24px}
#main .prc .prc-site-edit button{border:0;background:transparent;color:var(--ink);text-decoration:underline;padding:12px 0;cursor:pointer}
#main .prc .prc-step [data-answer-status]{font-size:13px;color:#b45309}

#main .prc .prc-controls input[type=checkbox]{accent-color:var(--ink)}
#main .prc :is(.prc-controls,.prc-site-edit) :is(input,select):focus-visible{outline:2px solid var(--prc-purple);outline-offset:2px}

/* Check states are a tinted box, never a dot left of the text. */
#main .prc .prc-check.is-ok{background:color-mix(in srgb,var(--prc-ok) 12%,var(--bg));color:var(--prc-ok)}
#main .prc .prc-check.is-wait{background:color-mix(in srgb,#b45309 10%,var(--bg));color:#b45309}