/* Focused HCA script practice. Uses incumbent tokens, Archivo/Figtree, and the centered reading measure. Kit visuals are optional; spoken words never clip. */ /* `hidden` has to beat the display rules this file sets (images are block here, and the guided shell makes every .text-link inline-flex), or a kit visual that cannot load keeps its broken image and its expand control on screen instead of the explanation that replaces it. The dialog is appended to , outside .script-practice, so it needs its own selector. */ .script-practice [hidden],.script-kit-dialog [hidden]{display:none!important} .script-path-notice{margin:0 0 24px;max-width:72ch} .script-path-notice h3{font-size:20px;margin:0 0 8px} .script-path-notice p{color:var(--ink-2);line-height:1.6;margin:0 0 12px} .script-starter-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:16px} .script-course-continue{margin:0 0 28px} .script-practice{max-width:920px;margin:0 auto} .script-practice .page-heading{max-width:72ch} .script-practice h1,.script-practice h2{overflow-wrap:anywhere} .script-meta,.script-place{color:var(--mute);font-size:14px;line-height:1.5;margin:8px 0 0} .script-today{margin:0 0 32px;padding-bottom:28px;border-bottom:1px solid var(--grid)} .script-today .btn{margin:12px 12px 0 0} .script-index{list-style:none;margin:0;padding:0} .script-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px 24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--grid)} .script-row-copy h2{font-size:20px;margin:0 0 6px} .script-row-copy p{color:var(--ink-2);font-size:14px;line-height:1.55;margin:0} .script-state{font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)} .script-coach{color:var(--ink-2);font-size:13px} .script-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:32px;align-items:start;margin:8px 0 32px} .script-copy{min-width:0} .script-cue{font-weight:700;color:var(--ink-2);margin:0 0 16px;max-width:65ch} .script-spoken{margin:0 0 20px} .script-spoken-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 8px} .script-words{font-size:18px;line-height:1.7;max-width:65ch;overflow-wrap:anywhere;white-space:pre-wrap} .script-action-list{list-style:none;margin:0 0 24px;padding:0;max-width:65ch} .script-action{margin:0 0 10px;color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere} .script-action strong{display:inline-block;min-width:4.5em;color:var(--ink)} /* Non-spoken directions keep their place around the words: before, then the spoken chunk, then after. Each list is its own labelled region. */ .script-actions{margin:0 0 20px;padding:11px 14px;border:1px solid var(--grid);border-radius:8px;background:var(--raise)} .script-actions.is-before{margin-bottom:20px} .script-actions.is-after{margin-top:20px} .script-actions-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px} .script-actions .script-action-list{margin:0} .script-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:8px 0 16px} .script-controls .btn{min-height:44px} .script-status{color:var(--mute);font-size:14px;margin:0 0 24px;min-height:1.4em} .script-status.is-error{color:var(--bad)} .script-kit-group{margin:0;min-width:0} .script-kit-group .script-kit{margin:0 0 18px} .script-kit-image{display:block;width:100%;height:auto;max-width:220px;border:1px solid var(--edge);border-radius:8px;background:var(--raise)} .script-kit figcaption{font-size:13px;color:var(--ink-2);line-height:1.5;margin:10px 0;overflow-wrap:anywhere} .script-branches{margin:0 0 32px;padding:0;border:0;max-width:72ch} .script-branches legend{font-family:Archivo,Figtree,sans-serif;font-size:18px;font-weight:800;margin-bottom:10px} .script-branches .btn,.script-instruction-branch{display:block;width:100%;max-width:72ch;margin:8px 0;text-align:left;white-space:normal;overflow-wrap:anywhere} /* While a self-check is in flight the words on screen are the ones being saved, so nothing here may move the learner to another chunk. */ .script-branches[aria-busy="true"] a{pointer-events:none;opacity:.45} .script-branch-group{margin:16px 0 0} .script-branch-group-label{font-family:Archivo,Figtree,sans-serif;font-size:15px;font-weight:800;letter-spacing:.01em;color:var(--ink-2);margin:0 0 8px} .script-branch-list{list-style:none;margin:0;padding:0} .script-branch{margin:0 0 14px} .script-branch-condition{color:var(--mute);font-size:13px;line-height:1.5;margin:6px 0 0;max-width:72ch} .script-instruction-branch{padding:12px 0} .script-instruction-branch .btn{width:auto;display:inline-flex;margin:8px 12px 0 0} .script-guidance-lessons{list-style:none;margin:8px 0 0;padding:0} .script-guide{margin:0 0 32px;max-width:72ch} .script-guide h2{font-size:20px;margin:0 0 8px} .script-guide p{color:var(--ink-2);line-height:1.6;margin:0} .script-source{margin:0 0 32px;max-width:72ch;border-top:1px solid var(--grid);padding-top:14px} .script-source summary{font-weight:700;color:var(--ink-2);cursor:pointer} .script-source p{color:var(--ink-2);line-height:1.6;margin:12px 0 0} .script-source-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:14px 0 0} .script-source-facts dt{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)} .script-source-facts dd{margin:0;color:var(--ink-2);font-size:14px;overflow-wrap:anywhere} .script-source-hash{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;word-break:break-all} .script-missing{color:var(--ink-2);margin:8px 0 12px} .script-deeper{margin:0 0 40px;max-width:72ch} .script-deeper ul{margin:0;padding-left:20px} .script-deeper li{margin:0 0 14px} .script-kit-dialog{width:min(92vw,720px);max-height:92vh;padding:20px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--ink)} .script-kit-dialog::backdrop{background:color-mix(in oklch,oklch(23.43% 0.044 257.38) 55%,transparent)} .script-kit-dialog img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;margin:12px 0} .script-kit-full{margin:0 0 18px} .script-kit-full figcaption{font-size:13px;color:var(--ink-2);line-height:1.5;margin:10px 0 0} .script-kit-dialog h2{font-size:20px;margin:0} .script-practice .btn:focus-visible,.script-practice .text-link:focus-visible,.script-kit-dialog .btn:focus-visible{ outline:3px solid var(--accent-deep);outline-offset:3px } @media (max-width:699px){ .script-row{grid-template-columns:minmax(0,1fr);gap:8px} .script-row .btn{width:100%} .script-workspace{grid-template-columns:minmax(0,1fr);gap:20px} .script-kit-image{max-width:160px} .script-words{font-size:17px} .script-controls .btn{width:100%} } @media (max-width:320px){ .script-practice{padding-inline:0} .script-words{font-size:16px} } @media (prefers-reduced-motion:reduce){ .script-practice,.script-kit-dialog{scroll-behavior:auto} }