*{box-sizing:border-box}
:root{color-scheme:dark;font:100%/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;min-height:100svh;background:#061a3a;background:linear-gradient(135deg,#061a3a 0%,#0a2858 62%,#123f87 100%);color:#ffffff}
.pilot{width:100%;max-width:33rem;margin:0 auto;padding:.5rem 1rem}
#status{margin:0 0 .75rem;line-height:1.5;overflow-wrap:anywhere}
.pilot[data-view="learning"] #status{text-align:center}
#learning-title{margin:0 0 .25rem;text-align:center;font-size:1.25rem;line-height:1.3;text-wrap:balance}
#menu-help{margin:0 0 .75rem;text-align:center;font-size:1rem;line-height:1.4;color:#e9f5ff}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Clerk attaches its fit-content root styles to this mount element itself. */
#widget{display:flex;flex-direction:column;align-items:center;min-width:0;max-width:100%;margin-inline:auto;color-scheme:light;overflow-wrap:anywhere}
#widget>*{min-width:0;max-width:100%}
#widget:empty{display:none}
/* Clerk's supported element classes keep later verification/recovery views visible. */
/* Center both a provider-sized outer wrapper and a narrower card within it. */
#widget .alc-auth-root,#widget .alc-auth-card-box{width:100%;max-width:100%;min-width:0;margin-inline:auto}
#widget .alc-auth-card-box{box-shadow:none;border:2px solid #8acaff;border-radius:1rem}
#widget .alc-auth-card{padding:.75rem;gap:.5rem;box-shadow:none}
#widget .alc-auth-header{gap:.25rem}
#widget .alc-auth-title{margin:0;font-size:1.5rem;line-height:1.25;color:#123f87}
#widget .alc-auth-subtitle{margin:0;font-size:1rem;line-height:1.35;color:#40506a}
#widget .alc-auth-main,#widget .alc-auth-form{gap:.5rem}
#widget .alc-auth-field{gap:.25rem}
#widget .alc-auth-label{font-size:1rem;line-height:1.35;color:#061a3a}
#widget .alc-auth-input{min-height:2.75rem;font-size:1rem;line-height:1.25;padding:.5rem .75rem;background:#ffffff;color:#061a3a;border:2px solid #527da8;border-radius:.5rem}
#widget .alc-auth-social,#widget .alc-auth-submit{min-height:2.75rem;font-size:1rem;padding:.5rem .75rem}
#widget .alc-auth-social{background:#e9f5ff;color:#0a2858;border:2px solid #527da8;border-radius:.5rem}
#widget .alc-auth-social:hover{background:#c8e7ff}
#widget .alc-auth-submit{background:#1558b0;color:#ffffff}
#widget .alc-auth-submit:hover{background:#123f87}
#widget .alc-auth-divider{margin:0}
#widget .alc-auth-footer{padding:.5rem 1rem;gap:.25rem;background:#e9f5ff}
#widget .alc-auth-footer-action{padding:0;min-height:2rem}
#widget .alc-auth-footer-link{display:inline-flex;align-items:center;min-height:2rem;font-size:1rem}
#widget .alc-auth-card-box:focus-within{overflow:visible}
#widget :is(button,a,input):focus-visible,.pilot-button:focus-visible,.pilot-about summary:focus-visible,#lessons a:focus-visible{outline:3px solid #061a3a;outline-offset:2px;box-shadow:0 0 0 6px #ffe16b}
.pilot-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}
.pilot-actions:has(> :not([hidden])){margin-top:.75rem}
.pilot-button{font:inherit;min-height:2.75rem;padding:.5rem 1rem;background:#ffffff;color:#061a3a;border:2px solid #8acaff;border-radius:.5rem;cursor:pointer}
.pilot-about{margin-top:.25rem;text-align:center;font-size:1rem}
.pilot-about summary{display:list-item;list-style-position:inside;width:fit-content;max-width:100%;min-height:2.75rem;margin:0 auto;padding:.65rem .25rem;cursor:pointer;color:#e9f5ff}
.pilot-about p{margin:.25rem 0 .75rem;text-align:left;line-height:1.5}
#lesson-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
#lesson-list li{min-width:0}
#lessons a{display:flex;align-items:center;justify-content:center;min-height:4.5rem;height:100%;padding:.75rem;color:#0a2858;background:#e9f5ff;border:2px solid #8acaff;border-radius:.75rem;text-align:center;font-size:1.125rem;font-weight:700;text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere;scroll-margin-block:.75rem}
#lessons a:hover,#lessons a:focus{background:#c8e7ff}
#lessons a:focus,#learning-title:focus,#page-title:focus,#status:focus{outline:3px solid #061a3a;outline-offset:2px;box-shadow:0 0 0 6px #ffe16b}
.pilot-button[aria-disabled="true"]{cursor:wait}
[hidden]{display:none!important}
@media(max-width:360px){.pilot{padding:.75rem}#lesson-list{grid-template-columns:1fr}}
@media(forced-colors:active){#widget :is(button,a,input):focus-visible,.pilot-button:focus-visible,.pilot-about summary:focus-visible,#lessons a:focus,#learning-title:focus,#page-title:focus,#status:focus{outline:3px solid Highlight;box-shadow:none}.pilot-button,#lessons a,#widget .alc-auth-card-box{border-color:CanvasText}}

/* The account controls use only their natural height; the course fills the rest. */
html:has(.pilot[data-view="course"]) { overflow:clip; }
body:has(.pilot[data-view="course"]) { overflow:clip; display:block; padding:0; min-height:0; height:100dvh; }
.pilot[data-view="course"] { display:flex; flex-direction:column; width:100%; max-width:none; height:100dvh; margin:0; padding:0; }
.pilot[data-view="course"] .pilot-about { display:none; }
.pilot[data-view="course"] .pilot-actions { flex:0 0 auto; justify-content:flex-end; gap:.5rem; margin:0; padding:.25rem .5rem; }
.pilot[data-view="course"] .pilot-button { min-height:2.75rem; padding:.35rem .7rem; }
#course { display:block; flex:1 1 0; width:100%; min-height:0; border:0; background:#06142d; }
#course[hidden] { display:none; }

.course-brand { display:none; }
.pilot-entry-brand { display:flex; justify-content:center; padding:.25rem .5rem; }
.pilot-entry-brand h1 { margin:0; max-width:100%; }
body:has(.pilot[data-view="course"]) > .pilot-entry-brand { display:none; }
.pilot[data-view="course"] .pilot-actions { align-items:center; }
.pilot-entry-brand .course-brand,
.pilot[data-view="course"] .course-brand { display:block; width:18rem; max-width:45%; height:5rem; object-fit:contain; object-position:left center; margin-right:auto; }
.pilot-entry-brand .course-brand { width:27rem; max-width:100%; height:7.5rem; object-position:center; margin-inline:auto; }
.pilot[data-course-theme="dark"] .course-brand { filter:drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff); }
@media(max-width:48rem) {
 .pilot-entry-brand .course-brand { width:18rem; height:5.25rem; }
 .pilot[data-view="course"] .course-brand { width:12rem; height:3.5rem; }
}

/* Use the same approved monochrome logo as the main Keyboarding site. */
.pilot[data-course-theme="dark"] .course-brand {
  content: url("https://accessiblelearningcenter.org/36E10062-BE45-418B-B11B-3BE11FAA89E7.png");
  filter: none;
}

/* Match the signed-in course toolbar to Braille dark mode. */
.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"]) .pilot-actions {
  background: #000 !important;
  color: #fff !important;
  border-bottom: 1px solid #fff;
}
.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"]) .pilot-actions .pilot-button {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"]) .pilot-actions .pilot-button:focus-visible {
  outline: 3px solid #ffe37a;
  outline-offset: 2px;
}

/* Dark course: remove the blue outer page gutters around the iframe. */
body:has(.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"])),
html:has(.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"])) {
  background: #000 !important;
}
.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"]),
.pilot[data-view="course"]:is([data-course-theme="dark"], [data-course-theme="contrast"]) #course {
  background: #000 !important;
}
.testing-panel,.testing-waitlist{line-height:1.6}
#lesson-list li:has(a[href="/#feedback"]){grid-column:1/-1}
.pilot:is([data-view="feedback"],[data-view="testing-admin"]),.testing-waitlist{max-width:44rem}
.testing-panel h2,.testing-waitlist h2{font-size:1.5rem;line-height:1.3;margin:.5rem 0}
.testing-panel p,.testing-waitlist p{margin:.6rem 0 1rem}
.testing-panel fieldset,.testing-waitlist fieldset{min-width:0;margin:1rem 0;padding:1rem;border:2px solid #8acaff;border-radius:.65rem}
.testing-panel legend,.testing-waitlist legend{font-weight:700;padding:0 .4rem}
.testing-field{margin:1rem 0}
.testing-field label{display:block;font-weight:700;margin-bottom:.35rem}
.testing-field :is(input,select,textarea){display:block;width:100%;max-width:100%;min-height:2.75rem;font:inherit;line-height:1.5;padding:.65rem;background:#fff;color:#061a3a;border:2px solid #8acaff;border-radius:.4rem}
.testing-field textarea{resize:vertical;min-height:6rem}
.testing-check{display:flex;align-items:flex-start;gap:.7rem;padding:.45rem 0;cursor:pointer}
.testing-check input{flex:0 0 auto;width:1.3rem;height:1.3rem;margin:.2rem 0 0;accent-color:#1558b0}
.testing-help{font-size:.95rem;color:#e9f5ff}
.testing-panel .testing-help{margin:.2rem 0 .6rem}
.testing-primary{font-weight:700}
.testing-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.testing-back{display:block;margin-top:1.25rem}
.testing-owner-link{display:block;width:fit-content;text-align:center;margin:1rem auto;text-decoration:underline}
.testing-invite{margin:1rem 0}
#lesson-report-details{overflow-wrap:anywhere;min-width:0}
.testing-invite summary{cursor:pointer;font-weight:700;min-height:2.75rem;padding:.65rem 1rem;border:2px solid #8acaff;border-radius:.65rem}
.testing-invite summary:focus-visible{outline:3px solid #ffe16b;outline-offset:3px}
.testing-status:empty{display:none}
.testing-status:not(:empty){padding:.7rem;border-left:.3rem solid #ffe16b}
.testing-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.testing-records{list-style:none;margin:0;padding:0}
.testing-records>li{margin:1rem 0;padding:1rem;border:2px solid #8acaff;border-radius:.65rem;overflow-wrap:anywhere}
.testing-records h4{font-size:1.1rem;margin:0 0 .4rem}
.testing-records pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.5}
.testing-records .testing-field{margin:.4rem 0}
.testing-waitlist a{color:#fff;text-underline-offset:.2em}
:is(.testing-panel,.testing-waitlist) :is(input,select,textarea,a,button):focus-visible,.testing-panel :is(h2,h3,h4):focus,.testing-status:focus{outline:3px solid #ffe16b;outline-offset:3px}
:is(.testing-panel,.testing-waitlist) [aria-busy="true"]{opacity:.8}
.testing-panel fieldset:disabled{opacity:.75}
@media(max-width:28rem){.testing-panel fieldset,.testing-waitlist fieldset{padding:.65rem}.testing-records>li{padding:.7rem}}
@media(forced-colors:active){.testing-panel,.testing-waitlist{color:CanvasText}.testing-help{color:CanvasText}:is(.testing-panel,.testing-waitlist) :is(input,select,textarea,a,button):focus-visible,.testing-panel :is(h2,h3,h4):focus,.testing-status:focus{outline:3px solid Highlight}}
