/*
 * Instructor-only callouts. main.py's instructor_note() writes each one as
 * `???+ instructor <kind> "Title"`: a block that starts open and folds when
 * its title is clicked, with the classes `instructor` and one of talking,
 * asked, timing, or note. The Instructor Settings page can fix a type open
 * (javascripts/instructor-settings.js). The student build has no such blocks, so these
 * rules never apply there.
 *
 * The callouts don't look like the page's admonitions: no box, a thick
 * colored bar on the left, a tinted background, and body text at the page's
 * own size, so they're easy to read at a glance while teaching.
 */

/* The defaults for the Instructor Settings page: the text size of every
   instructor callout (the folded blocks inside them included), and the
   panel's tint. A choice made on that page is set over these. */
:root {
  --note-font-size: 0.9rem;
  /* How much of each callout's color tints the panel behind its text: 0% is
     the page's own background; a few percent is a faint tint. */
  --note-panel-tint: 1%;
}

.md-typeset .admonition.instructor,
.md-typeset details.instructor {
  --note-accent: #455a64;
  --note-bg: rgba(69, 90, 100, 0.07);
  border: none;
  border-left: 0.3rem solid var(--note-accent);
  border-radius: 0.2rem;
  background-color: var(--note-bg);
  box-shadow: none;
  font-size: var(--note-font-size);
  padding: 0.2rem 0.9rem 0.5rem;
}

.md-typeset .admonition.instructor:focus-within,
.md-typeset details.instructor:focus-within {
  box-shadow: none;
}

/* The label: small capitals in the accent color, with an icon, no bar. */
.md-typeset .instructor > .admonition-title,
.md-typeset .instructor > summary {
  background-color: transparent;
  border: none;
  color: var(--note-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 -0.9rem 0.2rem;
  padding: 0.4rem 0.9rem 0 2.6rem;
  text-transform: uppercase;
}

.md-typeset .instructor > .admonition-title::before,
.md-typeset .instructor > summary::before {
  background-color: var(--note-accent);
  height: 1.05rem;
  left: 0.9rem;
  top: 0.4rem;
  width: 1.05rem;
  -webkit-mask-image: var(--note-icon);
          mask-image: var(--note-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/*
 * The text sits on a lighter panel inside the tinted box, so it reads like
 * the page while the box still stands out. The panel is drawn behind the
 * text and starts below the label.
 */
.md-typeset .admonition.instructor,
.md-typeset details.instructor {
  isolation: isolate;
  padding-bottom: 0.9rem;
  position: relative;
}

.md-typeset .admonition.instructor::after,
.md-typeset details.instructor[open]::after {
  background-color: color-mix(in srgb, var(--note-accent) var(--note-panel-tint), var(--md-default-bg-color));
  border-radius: 0.2rem;
  bottom: 0.45rem;
  content: "";
  left: 0.45rem;
  position: absolute;
  right: 0.45rem;
  top: 1.95rem;
  z-index: -1;
}

/* Folded, a callout is its label alone. */
.md-typeset details.instructor:not([open]) {
  padding-bottom: 0.3rem;
}

.md-typeset details.instructor:not([open]) > summary {
  margin-bottom: 0;
}

/* A type fixed open on the settings page: no chevron, and its title doesn't
   fold it (the script stops the click). */
html[data-note-fixed~="talking"] .md-typeset details.instructor.talking > summary,
html[data-note-fixed~="asked"] .md-typeset details.instructor.asked > summary,
html[data-note-fixed~="timing"] .md-typeset details.instructor.timing > summary {
  cursor: default;
}

html[data-note-fixed~="talking"] .md-typeset details.instructor.talking > summary::after,
html[data-note-fixed~="asked"] .md-typeset details.instructor.asked > summary::after,
html[data-note-fixed~="timing"] .md-typeset details.instructor.timing > summary::after {
  display: none;
}

/* ── The kinds: an accent color and an icon each ─────────────────── */

/* Any other title: slate, a pencil. */
.md-typeset .instructor.note {
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z'/%3E%3C/svg%3E");
}

/* Talking Points: purple, a speech bubble. */
.md-typeset .instructor.talking {
  --note-accent: #7b1fa2;
  --note-bg: rgba(123, 31, 162, 0.06);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

/* If Asked: blue, a question mark. */
.md-typeset .instructor.asked {
  --note-accent: #1565c0;
  --note-bg: rgba(21, 101, 192, 0.07);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 17h-2v-2h2v2zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26A1.99 1.99 0 0 0 12 7a2 2 0 0 0-2 2H8a4 4 0 1 1 8 0c0 .88-.36 1.68-.93 2.25z'/%3E%3C/svg%3E");
}

/* Timing: amber, a clock. */
.md-typeset .instructor.timing {
  --note-accent: #e65100;
  --note-bg: rgba(230, 81, 0, 0.07);
  --note-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z'/%3E%3C/svg%3E");
}

/* ── Inside the callouts ─────────────────────────────────────────── */

/* Every folded block inside a callout (If Asked's questions, Timing's
   Details): a bold title and its chevron, no icon, no border, the callout's
   text size; opened, its contents sit on the page's background. */
.md-typeset .instructor details {
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: var(--note-font-size);
  margin: 0.4rem 0;
}

.md-typeset .instructor details[open] {
  background-color: var(--md-default-bg-color);
}

.md-typeset .instructor details > summary {
  background-color: transparent;
  font-weight: 600;
  padding-left: 0.7rem;
}

.md-typeset .instructor details > summary::before {
  display: none;
}

/* If Asked: a bullet before each question, unless the settings page turns
   bullets off. */
html:not([data-asked-bullets="off"]) .md-typeset .instructor.asked details > summary {
  padding-left: 1.4rem;
}

html:not([data-asked-bullets="off"]) .md-typeset .instructor.asked details > summary::before {
  background: none;
  color: var(--note-accent);
  content: "•";
  display: block;
  height: auto;
  left: 0.5rem;
  -webkit-mask-image: none;
          mask-image: none;
  top: 0;
  width: auto;
}

/* Timing: the minutes and the branch stand out; the details stay folded. */
.md-typeset .instructor.timing > ul:first-of-type {
  list-style: none;
  margin-left: 0;
}

.md-typeset .instructor.timing > ul:first-of-type > li {
  margin-left: 0;
}

/* ── Dark scheme: lighter accents on the dark background ────────── */

[data-md-color-scheme="slate"] .md-typeset .instructor.note { --note-accent: #90a4ae; --note-bg: rgba(144, 164, 174, 0.1); }
[data-md-color-scheme="slate"] .md-typeset .instructor.talking { --note-accent: #ce93d8; --note-bg: rgba(206, 147, 216, 0.1); }
[data-md-color-scheme="slate"] .md-typeset .instructor.asked { --note-accent: #90caf9; --note-bg: rgba(144, 202, 249, 0.1); }
[data-md-color-scheme="slate"] .md-typeset .instructor.timing { --note-accent: #ffb74d; --note-bg: rgba(255, 183, 77, 0.1); }