/* Coding Classroom v0.8.4 — Round 4: Teacher clarity, local QR, final polish */

/* Teacher report: make the local-only data boundary impossible to miss. */
.teacher-data-scope{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid #c9ddf2;
  background:linear-gradient(180deg,#f4f9ff,#edf6ff);
  color:#294f79;
  box-shadow:0 8px 24px rgba(21,76,130,.045);
}
.teacher-data-scope .scope-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  background:#dbeeff;
  color:#165ba5;
  font-weight:800;
}
.teacher-data-scope>span:nth-child(2){display:grid;gap:3px}
.teacher-data-scope strong{font-size:.91rem;color:#164b82}
.teacher-data-scope small{font-size:.79rem;line-height:1.65;color:#57718d}
.teacher-data-scope a{
  white-space:nowrap;
  color:#155dab;
  font-size:.8rem;
  font-weight:750;
  text-decoration:none;
  padding:8px 10px;
  border-radius:9px;
}
.teacher-data-scope a:hover{background:#e1effd}
.teacher-data-scope a:focus-visible{outline:3px solid rgba(30,108,195,.28);outline-offset:2px}

/* QR is generated entirely on-device. */
.qr-panel{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.1);
}
.qr-panel img{
  width:190px;
  height:190px;
  object-fit:contain;
  image-rendering:pixelated;
  box-shadow:0 10px 28px rgba(1,22,49,.18);
}
.qr-copy{display:grid;align-content:center;justify-items:start;gap:5px}
.qr-copy strong{font-size:1.02rem}
.qr-copy p{margin:0}
.qr-copy small{
  display:inline-flex;
  align-items:flex-start;
  gap:7px;
  margin-top:3px;
  color:#d2e7f9;
  line-height:1.6;
}
.qr-copy small span{
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  flex:none;
  border-radius:50%;
  background:#dff8eb;
  color:#16724a;
  font-weight:900;
}
.qr-download-btn{
  margin-top:8px;
  min-height:40px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  padding:8px 13px;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:inherit;
  font-size:.82rem;
  font-weight:750;
  cursor:pointer;
}
.qr-download-btn:hover{background:rgba(255,255,255,.17)}
.qr-download-btn:focus-visible{outline:3px solid rgba(255,255,255,.38);outline-offset:2px}

/* Teacher/guide cards: light hierarchy polish, no new visual language. */
.teacher-report-entry{
  border-color:#d7e5f2;
  box-shadow:0 10px 30px rgba(18,63,108,.045);
}
.teacher-report-entry h2{color:#123e70}
.teacher-note{box-shadow:0 7px 22px rgba(80,62,16,.035)}

/* Footer version remains obvious without dominating the developer credit. */
.site-footer-v062 .footer-version strong{
  border:1px solid rgba(151,208,255,.3);
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset;
}
.site-footer-v062 .footer-version small{max-width:230px;line-height:1.45;white-space:normal}

/* Small interaction polish shared by school PCs and touch devices. */
#copyShareUrl,#makeQrBtn,.qr-download-btn,.teacher-heading .primary-cta{
  touch-action:manipulation;
}
#shareUrl:focus-visible{
  outline:3px solid rgba(116,190,255,.35);
  outline-offset:2px;
}

@media(max-width:800px){
  .teacher-data-scope{grid-template-columns:auto minmax(0,1fr)}
  .teacher-data-scope a{grid-column:2;justify-self:start;padding-left:0}
  .qr-copy{justify-items:center;text-align:center}
  .qr-copy small{justify-content:center;text-align:left}
}

@media(max-width:520px){
  .teacher-data-scope{grid-template-columns:1fr;gap:9px;padding:14px}
  .teacher-data-scope .scope-icon{width:34px;height:34px}
  .teacher-data-scope a{grid-column:1;padding:7px 0}
  .qr-panel{padding:16px 13px}
  .qr-panel img{width:min(190px,72vw);height:auto;aspect-ratio:1}
  .qr-download-btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .qr-download-btn,.teacher-data-scope a{transition:none!important}
}