/* ============================================
   Desmos Embed + Popout + Red Warning Bubbles
   ============================================ */

/* Inline embed (for guide pages) — uses iframe to College Board testing Desmos */
.desmos-embed {
  width: 100%;
  min-height: 480px;
  border: 2px solid var(--sage-l);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  margin: 14px 0;
}
.desmos-iframe {
  width: 100%;
  height: 480px;
  border: 0;
  display: block;
}

.desmos-tryit {
  background: var(--sage-m);
  border: 2px solid var(--sage);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 16px 0;
}
.desmos-tryit-title {
  font-family: var(--fh);
  font-size: 1.15rem;
  color: var(--forest);
  margin-bottom: 4px;
}
.desmos-tryit-sub {
  font-family: var(--fb);
  color: var(--slate);
  font-size: 0.9rem;
  margin-bottom: 10px;
  line-height: 1.5;
}
.desmos-tryit-solution {
  font-family: var(--fb);
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--white);
  border-left: 4px solid var(--sage);
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.desmos-tryit-solution summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--forest);
}
.desmos-tryit-solution[open] summary { margin-bottom: 8px; }

/* Red warning bubble (for common errors / gotchas in guides) */
.res-warn {
  background: #fff4f2;
  border: 2px solid #e37364;
  border-left: 6px solid #c6392a;
  border-radius: var(--radius-sm);
  padding: 12px 16px 12px 42px;
  margin: 12px 0;
  font-family: var(--fb);
  color: #79241a;
  font-size: 0.88rem;
  line-height: 1.55;
  position: relative;
}
.res-warn::before {
  content: '!';
  position: absolute;
  left: 14px; top: 10px;
  width: 20px; height: 20px;
  background: #c6392a;
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  text-align: center;
  line-height: 20px;
  font-size: 0.9rem;
}
.res-warn strong { color: #5a1a12; }
.res-warn .res-warn-title {
  display: block;
  font-weight: 700;
  color: #5a1a12;
  margin-bottom: 4px;
}
.res-warn ul { margin: 6px 0 0; padding-left: 20px; }
.res-warn li { margin-bottom: 4px; }

/* Popout widget (exam + practice) */
#desmosPopoutRoot {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  font-family: var(--fp);
}

/* Clear the fixed .exam-nav bar (position: fixed; bottom: 0; ~64px tall) in exam mode.
   Anchor to the left as well: the answer-side tools row (reference sheet / calculator /
   report a problem) ends at the bottom right of the right pane, so a right-anchored
   launcher lands on top of the report button and steals its clicks. The tools row has
   only a few px of slack, so reserving a right gutter there would wrap the row on
   common laptop widths. Math questions are stem text only, leaving the bottom left
   clear, and the panel is in normal flow so it opens rightward from this anchor. */
body.exam-mode #desmosPopoutRoot { bottom: 84px; left: 18px; right: auto; }

/* Explicit display:none override — `display: flex` on the elements below
   otherwise overrides the user-agent's default [hidden] rule. */
#desmosPopoutRoot[hidden],
.dp-panel[hidden],
.dp-btn-mini[hidden] { display: none !important; }

/* Minimized state: small circular icon button, subtle */
.dp-btn-mini {
  width: 48px;
  height: 48px;
  background: var(--forest);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(20, 49, 9, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.1s, box-shadow 0.1s;
}
.dp-btn-mini:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 20px rgba(20, 49, 9, 0.45);
}
.dp-btn-icon {
  font-family: 'Young Serif', serif;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  font-style: italic;
}

/* Expanded state: panel with iframe */
.dp-panel {
  width: 660px;
  height: 520px;
  background: var(--white);
  border: 2px solid var(--forest);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 44px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dp-panel.dp-expanded {
  width: min(1100px, 92vw);
  height: 86vh;
}

.dp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--forest);
  color: var(--white);
  padding: 8px 14px;
  flex-shrink: 0;
}
.dp-title { font-weight: 700; font-size: 0.92rem; font-family: var(--fp); }
.dp-actions { display: flex; gap: 6px; }
.dp-actions button {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-sm);
  width: 30px; height: 30px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.1s;
}
.dp-actions button:hover { background: rgba(255,255,255,0.18); }

.dp-calc-wrap {
  flex: 1;
  min-height: 0;
  background: var(--white);
}
.dp-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 740px) {
  .dp-panel { width: calc(100vw - 16px); height: 70vh; }
  #desmosPopoutRoot { right: 8px; bottom: 8px; }
  .dp-btn-mini { width: 44px; height: 44px; }
}