/* Cover learning: blue = observation, teal = action/success, amber = reasoning/help.
   Text labels accompany every colour. Patient coordinates always stay anatomical. */
#ct-lesson-panel {
  --ctl-ink: #243e43;
  --ctl-muted: #52676f;
  --ctl-line: #dbe5e8;
  --ctl-blue: #235c8b;
  --ctl-blue-tint: #edf5fc;
  --ctl-teal: #165d54;
  --ctl-teal-tint: #edf7f2;
  --ctl-amber: #795014;
  --ctl-amber-tint: #fff6e5;
  padding: 0 12px;
  color: var(--ctl-ink);
}
#ct-lesson-panel *, #ct-lesson-panel *::before, #ct-lesson-panel *::after { box-sizing: border-box; }
#ct-lesson-panel p { line-height: 1.65; font-size: 14px; color: var(--ctl-muted); margin: 8px 0; }
#ct-lesson-panel h3 { margin: 14px 0 12px; font-size: 19px; font-weight: 750; color: var(--ctl-ink); line-height: 1.4; }
.ctl-catalog, .ctl-lesson, .ctl-complete {
  margin: 12px 0;
  border: 1px solid var(--ctl-line);
  border-radius: 18px;
  background: #fff;
  overflow-wrap: anywhere;
}
.ctl-catalog > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; min-height: 68px; cursor: pointer; list-style: none;
  color: var(--ctl-teal); background: var(--ctl-teal-tint); border-radius: 17px;
}
.ctl-catalog > summary::-webkit-details-marker { display: none; }
.ctl-catalog[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 1px solid var(--ctl-line); }
.ctl-catalog > summary > span:nth-child(2) { flex: 1; }
.ctl-catalog > summary strong { display: block; font-size: 15px; line-height: 1.5; }
.ctl-catalog > summary small { display: block; color: var(--ctl-muted); font-size: 12px; margin-block-start: 3px; line-height: 1.6; }
.ctl-mark { display: inline-grid; place-items: center; background: #dceee7; color: var(--ctl-teal); border-radius: 12px; padding: 10px; font-size: 12px; font-weight: 750; white-space: nowrap; }
.ctl-chevron { font-size: 22px; flex: 0 0 auto; }
.ctl-catalog[open] .ctl-chevron { transform: rotate(180deg); }
#ct-lesson-panel .ctl-catalog-intro { padding: 4px 16px; font-size: 12px; }
.ctl-catalog > .ctl-stages { margin: 10px 16px; }
.ctl-course-list { margin: 12px 0 0; padding: 0 16px; list-style: none; }
.ctl-course-list > li { display: flex; gap: 12px; padding: 16px 0; border-block-start: 1px solid var(--ctl-line); }
.ctl-number { flex: 0 0 30px; height: 30px; display: grid; place-items: center; background: #eff3f5; color: var(--ctl-muted); border-radius: 50%; font-weight: 700; font-size: 13px; }
.ctl-start-here .ctl-number { background: var(--ctl-teal); color: white; }
.ctl-course-body { min-width: 0; flex: 1; }
.ctl-course-body > strong { display: block; font-size: 15px; }
#ct-lesson-panel .ctl-course-body > p { margin: 4px 0 10px; font-size: 13px; }
.ctl-recommended { display: block; margin-block-end: 4px; color: var(--ctl-teal); font-size: 11px; font-weight: 750; }
.ctl-practised { display: block; margin: 7px 0; font-size: 12px; color: var(--ctl-teal); }
.ctl-lesson, .ctl-complete { padding: 16px; }
.ctl-lesson header { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ctl-muted); font-size: 12px; }
.ctl-lesson header .ctl-button { font-size: 11px; padding-inline: 4px; }
.ctl-progress { display: flex; gap: 5px; margin: 8px 0 14px; }
.ctl-progress span { flex: 1; height: 4px; border-radius: 3px; background: #e5ecef; }
.ctl-progress .is-done { background: var(--ctl-teal); }
.ctl-progress .is-current { background: var(--ctl-blue); }
.ctl-stages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ctl-stage { display: flex; align-items: center; justify-content: center; flex: 1; gap: 5px; padding: 7px 5px; border: 1px solid transparent; border-radius: 9px; font-size: 12px; font-weight: 700; line-height: 1.5; }
.ctl-stage > span { font-size: 10px; }
.ctl-stage--observe { color: var(--ctl-blue); background: var(--ctl-blue-tint); }
.ctl-stage--understand { color: var(--ctl-amber); background: var(--ctl-amber-tint); }
.ctl-stage--apply { color: var(--ctl-teal); background: var(--ctl-teal-tint); }
.ctl-stage[aria-current] { border-color: currentColor; }
.ctl-task { border-inline-start: 3px solid var(--ctl-teal); padding: 10px 12px; border-radius: 0 10px 10px 0; background: var(--ctl-teal-tint); }
[dir="rtl"] .ctl-task { border-radius: 10px 0 0 10px; }
.ctl-label { display: block; font-size: 11px; font-weight: 750; color: var(--ctl-teal); }
#ct-lesson-panel .ctl-instruction { margin: 4px 0 0; font-size: 15px; font-weight: 550; color: var(--ctl-ink); }
.ctl-focus { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--ctl-blue); font-size: 13px; font-weight: 600; }
.ctl-watch, .ctl-eye { display: inline-block; padding: 4px 10px; border-radius: 7px; background: var(--ctl-blue-tint); color: var(--ctl-blue); font-weight: 750; }
.ctl-status { font-size: 13px; line-height: 1.6; color: var(--ctl-muted); margin: 12px 0; }
.ctl-status--success { padding: 10px 12px; border-radius: 10px; color: var(--ctl-teal); background: var(--ctl-teal-tint); font-weight: 650; }
.ctl-status--hint { margin-block-end: 6px; color: var(--ctl-amber); font-weight: 650; }
.ctl-note { border-inline-start: 3px solid var(--ctl-amber); background: var(--ctl-amber-tint); border-radius: 10px; padding: 12px; margin: 10px 0 14px; }
.ctl-note > strong { color: var(--ctl-amber); font-size: 12px; }
#ct-lesson-panel .ctl-note > p { color: #614c2b; font-size: 13px; margin: 5px 0 0; }
.ctl-note--understand { border-inline-start-color: var(--ctl-teal); background: var(--ctl-teal-tint); }
.ctl-note--understand > strong { color: var(--ctl-teal); }
#ct-lesson-panel .ctl-note--understand > p { color: #2d554d; }
.ctl-observed { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; color: var(--ctl-blue); background: var(--ctl-blue-tint); border-radius: 10px; font-size: 13px; }
.ctl-observed > span { font-size: 12px; }
.ctl-observations { background: var(--ctl-blue-tint); padding: 12px; border-radius: 10px; color: var(--ctl-blue); font-size: 12px; }
.ctl-observations > strong { display: block; margin-block-end: 8px; }
.ctl-observations ul { list-style: none; padding: 0; margin: 0; }
.ctl-observations li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-block-start: 1px solid #d6e6f1; }
.ctl-observations li > span { flex: 1; }
.ctl-observations b { max-width: 52%; text-align: end; }
.ctl-observations .ctl-eye { padding: 0; }
.ctl-answers { border: 0; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.ctl-answers legend { font-weight: 750; color: var(--ctl-ink); padding-block-end: 12px; font-size: 15px; line-height: 1.6; width: 100%; }
.ctl-answers [data-learn-value="none"] { grid-column: 1 / -1; }
.ctl-answers:has([data-learn-value="manifest"]), .ctl-answers:has([data-learn-value="neutralized"]) { grid-template-columns: 1fr; }
.ctl-button { min-height: 44px; border: 1px solid #c7d6dd; background: white; color: var(--ctl-blue); border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; text-align: start; line-height: 1.5; touch-action: manipulation; }
.ctl-button:active { transform: translateY(1px); }
.ctl-button:focus-visible, #ct-lesson-panel summary:focus-visible { outline: 3px solid var(--ctl-blue); outline-offset: 3px; }
.ctl-answers legend:focus-visible, #ct-lesson-panel h3:focus-visible { outline: 2px solid var(--ctl-blue); outline-offset: 4px; border-radius: 4px; }
.ctl-primary { background: var(--ctl-teal); color: white; border-color: var(--ctl-teal); text-align: center; }
.ctl-choice-retry { color: var(--ctl-amber); border-color: #c59a55; background: var(--ctl-amber-tint); }
.ctl-text-button { border-color: transparent; background: transparent; color: var(--ctl-muted); font-size: 12px; }
.ctl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }
.ctl-actions > .ctl-primary { flex: 1 1 160px; }
.ctl-sources, .ctl-more { border-block-start: 1px solid var(--ctl-line); padding-block-start: 12px; margin-block-start: 16px; font-size: 12px; }
.ctl-sources summary, .ctl-more summary { cursor: pointer; color: var(--ctl-muted); min-height: 32px; line-height: 1.6; }
.ctl-sources a { display: block; margin-block: 8px; overflow-wrap: anywhere; color: var(--ctl-blue); }
.ctl-catalog > .ctl-more { padding: 12px 16px; }
.ctl-more > .ctl-button { margin-block-start: 8px; }
.ctl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.ctl-stats > div { background: #f3f6f7; border-radius: 10px; padding: 12px; }
.ctl-stats dt { font-size: 12px; color: var(--ctl-muted); }
.ctl-stats dd { margin: 5px 0 0; font-size: 24px; font-weight: 750; color: var(--ctl-ink); }
.ctl-success-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-block-start: 18px; background: var(--ctl-teal-tint); color: var(--ctl-teal); border-radius: 50%; font-size: 22px; }
.ctl-record { padding: 10px; background: var(--ctl-blue-tint); border-radius: 8px; text-align: center; }
.ctl-patient-label { font: inherit; font-size: 12px; font-weight: 650; color: #235c8b; background: #edf5fc; padding: 10px 14px; border: 1px solid #c7ddea; border-radius: 24px; line-height: 1.6; }
.ctl-patient-label[hidden] { display: none; }
.ctl-field-coach { display: none; }
.ctl-field-coach[hidden] { display: none !important; }
.ctl-field-button:focus-visible { outline: 3px solid #235c8b; outline-offset: 3px; }
@media (max-width: 1099px) {
  .ctl-field-coach { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid #d2e4ef; border-radius: 12px; background: #edf5fc; }
  .ctl-field-coach > span { color: #235c8b; font-size: 13px; font-weight: 700; white-space: nowrap; }
  .ctl-field-button { font: inherit; font-size: 13px; font-weight: 650; min-height: 44px; padding: 10px 12px; color: white; background: #165d54; border: 1px solid transparent; border-radius: 9px; cursor: pointer; line-height: 1.5; }
  .ctl-field-button[data-action="answer"] { background: #235c8b; }
  .ctl-field-button:disabled { color: #235c8b; background: transparent; cursor: default; }
  #ct-lesson-panel [data-learn-action="perform"] { display: none; }
}
.ctc[data-lesson-active] :is(.ctc-steps,.ctc-coach,.ctc-how,.ctc-keys,.ctc-findings,.ctc-result,.ctc-switch,.ctc-drawer,.ctc-next,.ctc-interaction) { display: none !important; }
.ctc[data-lesson-active]:not([data-lesson-kind="baseline"]):not([data-lesson-kind="neutral"]) .ctc-main { display: none !important; }
.ctc[data-lesson-phase="complete"] .ctc-main { display: none !important; }
.ctc[data-lesson-active] [data-action="base"][data-value="auto"],
.ctc[data-lesson-active] [data-action="prism-eye"][data-value="auto"],
.ctc[data-lesson-active] [data-action="axis"][data-value="vertical"] { display: none !important; }
.ctc[data-lesson-phase="setup"] .ctc-main { pointer-events: none; opacity: .5; }
.ctc[data-lesson-kind="base"] .ct-prism { display: none !important; }
#tabContentExam[data-lesson-active] :is(.clinical-panel,.exam-secondary) { display: none !important; }
#tabContentExam[data-lesson-active] #coverPaddle::after { display: none; }
html[data-cover-check] :is(#examCurrentCondition,#conditionPicker,.sidebar-fab,.picker-drawer,#explainCard,#clinicalPanel,#toolHint,#examTourBtn,.exam-toolbar-more,.tutorial-overlay,.tour,.tutorial-popup,.reflex-readout,#gazeDiagramBar,#gazeDiagramContainer,#labNavChipRapd,#rapd-lab) { display: none !important; }
html[data-cover-check] :is(.kr-guide-svg,.ht-guide-svg) { display: none !important; }
.ct-watch-cue[data-lesson="true"] {
  /* Field-level overlay keeps existing skin, eyelid and occluder stacking. */
  border: 2px dashed #235c8b; box-shadow: 0 0 0 2px rgba(255,255,255,.8); animation: none;
}
.ct-watch-cue[data-lesson="true"] .ct-watch-label { background: #235c8b; letter-spacing: normal; text-transform: none; }
.ctl-status-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) {
  .ctl-button:hover { background: var(--ctl-blue-tint); border-color: #8badc7; }
  .ctl-primary:hover { background: #104c44; color: white; border-color: #104c44; }
  .ctl-text-button:hover { color: var(--ctl-blue); border-color: transparent; }
}
@media (max-width: 480px) {
  #ct-lesson-panel { padding: 0 8px; }
  .ctl-lesson, .ctl-complete { padding: 12px; }
  .ctl-stage { font-size: 11px; }
  .ctl-lesson header { align-items: flex-start; }
  .ctl-lesson header > span { padding-block-start: 12px; flex-shrink: 0; }
  .ctl-lesson header .ctl-button { max-width: 55%; }
  .ctl-button { padding: 10px; }
  .ctl-patient-label { max-width: 100%; font-size: 11px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { .ctl-button:active { transform: none; } }
@media (forced-colors: active) {
  .ctl-stage[aria-current], .ctl-note, .ctl-choice-retry, .ct-watch-cue[data-lesson="true"] { border-color: CanvasText; }
}


/* A lesson asks before it shows: no running narration or slow replay meanwhile. */
.ctc[data-lesson-active] :is(.ctc-latest, .ctc-gazeflow) { display: none !important; }

/* Background reading inside the "Learn" catalog (ui/ct-panel-template.js background()). */
.ctl-background { display: flex; flex-direction: column; gap: 8px; margin: 14px 16px 0; }
.ctl-background-title { margin: 0 !important; font-size: 11px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ctl-muted); }
.ctl-background .ctc-drawer > summary { font-size: 13px; color: var(--ctl-ink); }
.ctl-background .ct-about-card { border: 0; padding: 4px 0 0; background: none; }