/* PFUI atlas teaching layer (website owned). See teaching/SOURCES.md. */

.pfui-teach { box-sizing: border-box; font-family: inherit; }
.pfui-teach *, .pfui-teach *::before, .pfui-teach *::after { box-sizing: border-box; }
.diagnosis-hidden .pfui-teach, .diagnosis-hidden ~ .pfui-teach-dialog { display: none !important; }

/* Step guide. Three-column layout: inside the step panel, under the step
   description. Single column: first block under the model. The script
   places it; it never overlays the anatomy. */
.pfui-teach-guide {
  display: grid; gap: 6px; padding: 10px 12px 11px;
  color: #e7f0ee; background: #0f1a22; border: 1px solid #30434b; border-radius: 8px;
  font-size: 13px; line-height: 1.45;
}
.step-controls > .pfui-teach-guide { margin: 0 0 12px; }
.info-panel > .pfui-teach-guide { margin: 0 0 16px; border-color: #2f4a47; }
.info-panel > .pfui-teach-guide .pfui-teach-title { display: none; }
.info-panel > .pfui-teach-guide .pfui-teach-look { color: #c4d3d1; font-size: 13px; line-height: 1.55; }
.pfui-teach-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pfui-teach-count {
  color: #8fb3ad; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pfui-teach-title { font: 400 17px/1.2 Georgia, serif; color: #f4f7f6; }
.pfui-teach-look { margin: 0; color: #c4d3d1; }
.pfui-teach-toggle, .pfui-teach-view, .pfui-teach-open, .pfui-teach-close {
  font: inherit; cursor: pointer; border-radius: 6px;
}
.pfui-teach-toggle {
  padding: 2px 8px; font-size: 11px; color: #9fc9c1; background: transparent; border: 1px solid #30434b;
}
.pfui-teach-view {
  justify-self: start; padding: 5px 10px; font-size: 12px;
  color: #0b1a17; background: #9fe0d2; border: 1px solid #9fe0d2;
}
.pfui-teach-view:hover { background: #bdeee3; }
.pfui-teach-guide[data-collapsed] { padding: 6px 8px; justify-items: start; }
.pfui-teach-guide[data-collapsed] .pfui-teach-title,
.pfui-teach-guide[data-collapsed] .pfui-teach-look,
.pfui-teach-guide[data-collapsed] .pfui-teach-view { display: none; }
.pfui-teach-guide[data-collapsed] .pfui-teach-count { display: none; }

/* Color key, top right of the stage, closed by default. */
.pfui-teach-key {
  position: absolute; z-index: 4; top: 12px; right: 12px; max-width: 250px;
  color: #e7f0ee; background: #0b141deb; border: 1px solid #30434b; border-radius: 8px;
  font-size: 12px; line-height: 1.35;
}
.pfui-teach-key summary { cursor: pointer; padding: 6px 10px; color: #9fc9c1; list-style-position: inside; }
.pfui-teach-key ul { list-style: none; margin: 0; padding: 2px 10px 6px; display: grid; gap: 5px; }
.pfui-teach-key li { display: flex; align-items: center; gap: 8px; }
.pfui-teach-key i { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; border: 1px solid #ffffff33; }
.pfui-teach-key small { display: block; padding: 0 10px 8px; color: #8aa3a0; font-size: 11px; }

/* Case comparison entry point, under the case buttons. */
.pfui-teach-open {
  margin-top: 8px; width: 100%; padding: 7px 10px; font-size: 12px; text-align: left;
  color: #9fe0d2; background: transparent; border: 1px solid #2f4a47;
}
.pfui-teach-open:hover { border-color: #9fe0d2; }

/* Case comparison dialog. */
.pfui-teach-dialog {
  width: min(720px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 20px 22px; color: #dbe6e4; background: #0d151c; border: 1px solid #30434b; border-radius: 10px;
  font-size: 14px; line-height: 1.55;
}
.pfui-teach-dialog::backdrop { background: #04080bcc; }
.pfui-teach-dialog-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.pfui-teach-dialog h2 { margin: 0 0 8px; font: 400 24px/1.2 Georgia, serif; color: #f4f7f6; }
.pfui-teach-dialog h3 {
  margin: 18px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8fb3ad;
}
.pfui-teach-dialog p { margin: 0 0 10px; }
.pfui-teach-dialog ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.pfui-teach-close { padding: 5px 10px; font-size: 12px; color: #9fc9c1; background: transparent; border: 1px solid #30434b; }
.pfui-teach-table { overflow-x: auto; margin: 10px 0 4px; }
.pfui-teach-dialog table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pfui-teach-dialog th, .pfui-teach-dialog td { padding: 7px 8px; border-bottom: 1px solid #22323a; text-align: left; vertical-align: top; }
.pfui-teach-dialog thead th { color: #8fb3ad; font-weight: 600; }
.pfui-teach-dialog tbody th { font-weight: 400; color: #dbe6e4; }
.pfui-teach-dialog td, .pfui-teach-dialog thead th[data-col] { text-align: center; white-space: nowrap; }
.pfui-teach-dialog .pfui-teach-current { background: #16302c; }
.pfui-teach-dialog thead .pfui-teach-current { color: #bdeee3; }
.pfui-teach-yes { color: #9fe0d2; font-weight: 600; }
.pfui-teach-opt { color: #e8c98a; }
.pfui-teach-no { color: #5f7479; }
.pfui-teach-sources { margin-top: 14px; font-size: 12px; color: #8aa3a0; }
.pfui-teach-sources a { color: #9fc9c1; }

/* Model provenance notes stay, but read as notes rather than surgical steps. */
.pfui-teach-on .info-panel p.relevance {
  padding-left: 10px; border-left: 2px solid #30434b; font-size: 12px; color: #7f9699;
}
.pfui-teach-on .info-panel p.relevance::before {
  content: "Model note"; display: block; margin-bottom: 2px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6f8a8d;
}

@media (max-width: 740px) {
  .pfui-teach-guide { padding: 8px 10px; gap: 4px; font-size: 12.5px; }
  .pfui-teach-title { font-size: 15px; }
  /* The atlas moves its own step legends to the top right on phones. */
  .pfui-teach-key { top: 6px; left: 6px; right: auto; }
}

@media (forced-colors: active) {
  .pfui-teach-guide, .pfui-teach-key, .pfui-teach-dialog { border: 1px solid CanvasText; }
}