/* Completion-code panel: muted blue-and-white lab-notebook look */
.cp {
  --cp-ink: #2c3e55;
  --cp-slate: #5b7896;
  --cp-mist: #a9bccf;
  --cp-green: #3f8f5f;
  color: var(--cp-ink);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
}
.cp[hidden] { display: none; }
.cp-title { margin: 0 0 4px; font-family: "Newsreader", Georgia, "Times New Roman", serif; font-weight: 500; font-size: 1.4rem; }
.cp-lead { margin: 0 0 12px; font-size: 0.9rem; color: rgba(44, 62, 85, 0.8); }
.cp-names { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.cp-field label { display: block; font-size: 0.86rem; margin-bottom: 3px; }
.cp-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  font: inherit;
  color: var(--cp-ink);
  background: #fff;
  border: 1px solid rgba(91, 120, 150, 0.4);
  border-radius: 8px;
}
.cp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cp-btn { font: inherit; cursor: pointer; }
.cp-primary {
  padding: 8px 24px;
  border: none;
  border-radius: 999px;
  background: var(--cp-slate);
  color: #fff;
  font-weight: 600;
}
.cp-primary:hover { background: #4d6884; }
.cp-secondary {
  padding: 6px 12px;
  border: 1px solid rgba(91, 120, 150, 0.4);
  border-radius: 9px;
  background: #fff;
  color: var(--cp-ink);
  font-size: 0.86rem;
}
.cp-btn:disabled { opacity: 0.6; cursor: wait; }
.cp :focus-visible { outline: 3px solid var(--cp-mist); outline-offset: 2px; }
.cp-msg { min-height: 1.2em; margin: 6px 0 0; font-size: 0.86rem; color: #a33c34; }
.cp-msg:empty { min-height: 0; margin: 0; }
.cp-msg.cp-ok { color: #2f7048; }

.cp-result {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef2f6;
  border: 1px solid rgba(91, 120, 150, 0.3);
}
.cp-result[hidden] { display: none; }
.cp-code-label { margin: 0; font-size: 0.86rem; font-weight: 600; }
.cp-code {
  margin: 4px 0 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 2rem;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.cp-copy-msg { font-size: 0.84rem; color: rgba(44, 62, 85, 0.75); }
.cp-result.cp-approved { background: #e3f2e8; border-color: rgba(63, 143, 95, 0.55); }
.cp-result.cp-approved .cp-code-label { color: #2f7048; }
.cp-result.cp-approved .cp-code-label::before { content: "\2713  "; }
.cp-form { margin: 10px 0 0; font-size: 0.88rem; }
.cp-lock-note { margin: 8px 0 0; font-size: 0.84rem; color: rgba(44, 62, 85, 0.78); }
.cp-lock-note[hidden] { display: none; }
.cp-field input[readonly] { background: #f3f5f8; color: rgba(44, 62, 85, 0.85); }
.cp-primary:disabled { background: #93aac2; cursor: default; opacity: 1; }
.cp-btn[hidden] { display: none; }
.cp-form a { color: var(--cp-slate); }

/* Teacher checkoff: set apart with a dashed border and a tinted background */
.cp-teacher {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1.5px dashed rgba(91, 120, 150, 0.55);
  border-radius: 12px;
  background: rgba(169, 188, 207, 0.16);
}
.cp-teacher-title { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 500; font-size: 1.1rem; }
.cp-teacher-note { margin: 2px 0 8px; font-size: 0.82rem; color: rgba(44, 62, 85, 0.7); }
.cp-teacher .cp-field { margin-bottom: 8px; max-width: 260px; }
.cp-teacher-btn {
  padding: 7px 20px;
  border: 1px solid var(--cp-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--cp-ink);
  font-weight: 600;
}
.cp-teacher-btn:hover { background: var(--cp-ink); color: #fff; }

@media (max-width: 480px) {
  .cp-names { grid-template-columns: 1fr; }
  .cp-code { font-size: 1.7rem; }
}