/* Student notes (tools/notes.py). Copied into <website>/assets. Overrides the callout skin for notes only. */
.webgune-nota { --nota-accent: #2f6f88; --nota-ink: #1f2933; margin: 1.6rem 0; }
.webgune-nota .callout-tip { --nota-accent: #2e6b4f; }
.webgune-nota .callout-important { --nota-accent: #6b4d91; }
.webgune-nota .webgune-callout-comment { --nota-accent: #6b7280; }
.webgune-nota:not([data-state]) { visibility: hidden; }          /* no flash before the state file arrives */

.webgune-nota div.callout {
  border: 1px solid color-mix(in srgb, var(--nota-accent) 28%, transparent) !important;
  border-left: 5px solid var(--nota-accent) !important;
  border-radius: 14px; overflow: hidden; margin: 0;
  background: color-mix(in srgb, var(--nota-accent) 5%, var(--bs-body-bg, #fff)) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -18px color-mix(in srgb, var(--nota-accent) 60%, transparent);
}
.webgune-nota .callout-header {
  background: color-mix(in srgb, var(--nota-accent) 9%, transparent) !important;
  padding: .7rem 1.25rem !important; color: var(--nota-accent) !important; align-items: center;
}
.webgune-nota .callout-icon-container { opacity: .85; }
.webgune-nota .callout-title-container {
  font-family: inherit !important; font-weight: 600 !important; font-size: 1rem; letter-spacing: 0;
}
.webgune-nota .callout-body { padding: 1.1rem 1.25rem 1.15rem !important; }
.webgune-nota .callout-body > :last-child { margin-bottom: 0; }

/* prompt */
.webgune-nota .nota-label {
  display: block; margin-bottom: .45rem; color: var(--nota-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .7rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
}
.webgune-nota .nota-prompt { font-size: 1.02rem; line-height: 1.55; }
.webgune-nota .nota-prompt p:last-child { margin-bottom: 0; }

/* lock line (students, sealed) */
.webgune-nota .nota-lock {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .55rem .8rem .55rem 1rem; border-radius: 10px;
  background: color-mix(in srgb, var(--nota-accent) 7%, transparent); font-size: .88rem; opacity: .9;
}
.webgune-nota .nota-lock-text { font-style: italic; }
.webgune-nota .nota-lock-btn {
  border: 1px solid color-mix(in srgb, var(--nota-accent) 35%, transparent); background: transparent;
  border-radius: 999px; padding: .15rem .55rem; cursor: pointer; font-size: .9rem; line-height: 1.4; opacity: .7;
}
.webgune-nota .nota-lock-btn:hover { opacity: 1; background: color-mix(in srgb, var(--nota-accent) 12%, transparent); }

/* explanation */
.webgune-nota .nota-body { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--nota-accent) 22%, transparent); }
.webgune-nota .nota-body[data-ct] { display: none; }
.webgune-nota .nota-body > :last-child { margin-bottom: 0; }

/* teacher toolbar */
.webgune-nota .nota-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: -.2rem 0 1rem;
  padding: .5rem .7rem; border-radius: 10px; font-size: .8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #fff6d6; color: #5a4300;
}
.webgune-nota .nota-badge { white-space: nowrap; }
.webgune-nota .nota-badge-open { color: #1e4d33; }
.webgune-nota .nota-badge-hidden { color: #7a1f1f; }
.webgune-nota .nota-actions { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.webgune-nota .nota-btn {
  border: 1px solid rgba(0, 0, 0, .18); background: rgba(255, 255, 255, .7); color: inherit; font: inherit;
  border-radius: 999px; padding: .2rem .7rem; cursor: pointer;
}
.webgune-nota .nota-btn:hover { background: #fff; }
.webgune-nota .nota-btn-here { font-weight: 650; }
.webgune-nota .nota-btn-quiet { opacity: .7; }
.webgune-nota .nota-btn-exit { border: 0; background: transparent; text-decoration: underline; padding: .2rem .3rem; }
.webgune-nota .nota-msg { flex-basis: 100%; }
.webgune-nota .nota-msg:empty { display: none; }
.webgune-nota[data-state="teacher"][data-published="hidden"] div.callout { opacity: .78; border-style: dashed !important; }

@media (max-width: 640px) {
  .webgune-nota .callout-body { padding: .9rem 1rem 1rem !important; }
  .webgune-nota .callout-header { padding: .6rem 1rem !important; }
}