/* Revision notes (deck-notes.js): a corner control and an overlay panel.
   Each deck sets the --rn-* colors and fonts. Load after its stylesheet.
   Neither note availability nor opening the panel changes the slide size. */
:root {
  --notes-open: clamp(150px, 32vh, 320px);
  --notes-w: 780px;
  --notes-w-wide: 1180px;
  --thumbs-w: 252px;
}
.slide .revision-note { display: none; }

/* Align the 48px note pill with the buttons inside the navigation pill. */
.notes {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(10px, env(safe-area-inset-bottom)) + 6px + var(--vv-bottom, 0px));
  z-index: 20;
  color: var(--rn-ink);
  font: var(--rn-font);
}
body.is-fullscreen .notes, .notes[hidden] { display: none; }

.notes-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--rn-accent) 55%, var(--rn-ink) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rn-accent) 14%, var(--rn-bar) 86%);
  color: var(--rn-ink);
  font: var(--rn-label-font);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: var(--rn-label-case, none);
  text-align: left;
}
.notes-toggle svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.notes-toggle .notes-chevron { width: 14px; height: 14px; transition: transform .2s ease; }
.notes-toggle[aria-expanded="true"] .notes-chevron { transform: rotate(180deg); }
.notes-toggle:hover, .notes-toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--rn-accent) 24%, var(--rn-bar) 76%); }
.notes-toggle:focus-visible { outline: 3px solid var(--rn-accent); outline-offset: 3px; }

/* The panel fits its note, up to --notes-open, and is centered over the slide
   at a comfortable reading width; notes with call-outs get a wider panel. */
.notes-body {
  position: fixed;
  left: max(28px, env(safe-area-inset-left));
  right: max(28px, env(safe-area-inset-right));
  bottom: calc(80px + var(--vv-bottom, 0px) + env(safe-area-inset-bottom, 0px));
  max-width: var(--notes-w);
  min-height: min(96px, var(--notes-open));
  max-height: min(var(--notes-open), calc(100dvh - 150px - var(--standalone-top, 0px) - var(--vv-bottom, 0px) - env(safe-area-inset-bottom, 0px)));
  margin-inline: auto;
  padding: 18px 26px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: var(--rn-border);
  border-radius: var(--rn-radius);
  box-shadow: 0 10px 32px rgb(0 0 0 / .18);
  background: var(--rn-bg);
  scrollbar-width: thin;
}
.notes-body:has(.rn-side) { max-width: var(--notes-w-wide); }
.notes-body:focus-visible { outline: 3px solid var(--rn-accent); outline-offset: -3px; }

/* A note: the explanation on the left, call-outs (mistake, exam tip, go further) beside it. */
.revision-note { display: flex; gap: 14px 32px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.rn-main { flex: 1.6 1 0; min-width: 0; display: grid; gap: .6em; }
/* Each point opens with its question or heading on a line of its own. */
.notes .rn-head { margin: .5em 0 -.35em; font: inherit; font-weight: 800; line-height: 1.35; letter-spacing: 0; text-transform: none; color: var(--rn-ink); }
.notes .rn-head:first-child { margin-top: 0; }
.rn-side { flex: 1 1 0; min-width: 0; display: grid; gap: 12px; }
.revision-note p { margin: 0; }
.revision-note b { font-weight: 800; }
.rn-side p { padding: 10px 14px; border-radius: 0 6px 6px 0; border-left: 4px solid var(--rn-accent); background: var(--rn-callout); font-size: 15.5px; }
.rn-side p::before { display: block; margin-bottom: 2px; font: var(--rn-tag-font); letter-spacing: .1em; text-transform: uppercase; }
.rn-side .trap { border-left-color: var(--rn-trap); }
.rn-side .trap::before { content: "Common mistake"; color: var(--rn-trap); }
.rn-side .tip::before { content: "Exam tip"; color: var(--rn-tip); }
.rn-side .more { border-left-color: var(--rn-more); }
.rn-side .more::before { content: "Go further"; color: var(--rn-more); }
.rn-side .spec { border-left-color: var(--rn-more); }
.rn-side .spec::before { content: "Beyond the specification"; color: var(--rn-more); }
.revision-note sub, .revision-note sup { line-height: 0; }

body.show-thumbs .notes-body { left: calc(var(--thumbs-w) + 28px); }
@media (max-width: 900px) {
  .notes-body, body.show-thumbs .notes-body { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); padding: 14px 18px 16px; }
}
/* Keep room for the corner control on narrow screens, even without a note. */
@media (max-width: 600px) {
  .controls, body.show-thumbs .controls { left: max(12px, env(safe-area-inset-left)); transform: none; gap: 4px; }
  .controls .counter { min-width: 72px; }
  .controls button { width: 44px; }
  .notes-toggle { padding: 0 10px; }
}
@media (max-width: 760px) {
  .revision-note { flex-direction: column; align-items: stretch; }
  .rn-main, .rn-side { flex: none; }
}
@media (max-width: 640px) and (orientation: portrait) {
  :root { --notes-open: clamp(170px, 40vh, 380px); }
}

@media print {
  .notes { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .notes-toggle .notes-chevron { transition: none; }
}