/* ══════════════════════════════════════════════════════════════════
   ATARprepAI canonical backdrop — "the student's notebook margin".
   Loaded after each template's inline styles so it supersedes the
   legacy flat-grid body backgrounds at equal specificity (same
   mechanism as cursor.css). Templates keep their old body rules as
   a graceful fallback if this file ever fails to load.

   Layers (bottom→top): a 26px bullet-journal dot grid and a sparse
   720px hand-drawn doodle tile — star, ringed planet, heart, √x, ∑,
   lightning, atom, x² — full-colour marker strokes in theme violet
   (lighter purple in dark mode), like drawings inked on the wall. The page
   reads as the notebook paper the pencil cursor writes on. Pure CSS,
   no JS, no animation.

   The doodles are meant to be bold, so they are NOT dimmed. Instead see
   .dw-knockout at the foot of this file: the tile repeats on a fixed
   720px grid that knows nothing about where text lands, so the fix for a
   doodle tangling with a headline is to clear it behind that one text
   block, not to fade the whole wall.
   ══════════════════════════════════════════════════════════════════ */

/* The html element shows through during rubber-band overscroll and
   before body paints — match it to the theme so dark mode never
   flashes white. color-scheme themes native scrollbars, form-control
   chrome and popups (dropdown panels, date pickers) to the mode. */
html {
  background-color: #f4f6ff;
  color-scheme: light;
}
:root[data-dark] {
  background-color: #0b1020;
  color-scheme: dark;
}

/* .section-page = the full-screen tool wrappers inside /app (Library,
   Planner, Marks…). They sit over the page with their own opaque
   background, so they get the identical stack to stay canonical. */
body,
.section-page {
  background-color: #f4f6ff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='none' stroke='%235b50e8' stroke-opacity='1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(95 85) rotate(-12) scale(1.3)' d='M0 -17 L5 -6 L17 -4.5 L8.5 3.5 L11 16 L0 9.5 L-10 15.5 L-8 4 L-16.5 -5 L-5.5 -6.5 Z'/%3E%3Cg transform='translate(560 140) rotate(16) scale(1.3)'%3E%3Cpath d='M-11 .5 C-11.5 -6 -6 -11.5 .5 -11 C7 -10.5 11.5 -5.5 11 .5 C10.5 6.5 5.5 11 -.5 11 C-6.5 11 -10.5 6.5 -11 .5 Z'/%3E%3Cpath d='M-21 7 C-19 3 -16 0 -13.5 -1.5 M13 -5.5 C17 -4.5 20.5 -2 21 1 C21.5 5 12 10.5 -2 11.5 C-11 12 -19.5 10.5 -21 7'/%3E%3C/g%3E%3Cpath transform='translate(350 178) rotate(12) scale(1.3)' d='M0 3 C-1 -2 -4.5 -4.5 -7.5 -3.5 C-11 -2.5 -12 1.5 -9.5 5 C-7 8.5 -3.5 11.5 .5 14 C3.5 11.5 7.5 8 9.5 4.5 C11.5 1 10.5 -3 7 -4 C3.5 -5 1 -2 0 3 Z'/%3E%3Cpath transform='translate(430 330) rotate(-8) scale(1.3)' d='M15.5 .5 C10 -.5 5 -.5 0 0 L8.5 8.5 L.5 16.5 C5.5 17.5 11 17.5 16 16.5'/%3E%3Cg transform='translate(155 430) rotate(5) scale(1.3)'%3E%3Cpath d='M0 8.5 L5.5 17.5 L11 -3.5 L30 -4'/%3E%3Cpath d='M17 3.5 C20 7 23.5 10.5 26 13.5 M26.5 3 C23.5 7 20 10.5 17.5 14'/%3E%3C/g%3E%3Cpath transform='translate(640 520) rotate(9) scale(1.3)' d='M4.5 -17 L-6.5 2.5 L-.5 2 L-4.5 16.5 L8 -3.5 L1.5 -3 Z'/%3E%3Cg transform='translate(300 625) rotate(20) scale(1.3)'%3E%3Cpath d='M-16 -.5 C-15 -6 14 -7 16 -1 C15 5.5 -13.5 6.5 -16 -.5 Z'/%3E%3Cpath transform='rotate(62)' d='M-16 -.5 C-15 -6 14 -7 16 -1 C15 5.5 -13.5 6.5 -16 -.5 Z'/%3E%3Ccircle r='1.8' fill='%235b50e8' fill-opacity='1' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(85 560) rotate(-6) scale(1.3)'%3E%3Cpath d='M0 0 C3.5 4.5 7.5 9 11 13 M11.5 .5 C8 5 4 9.5 .5 13.5'/%3E%3Cpath d='M14.5 -5.5 C14.5 -8.5 18.5 -9.5 19.5 -7 C20.5 -4.5 16 -1.5 14.5 -.5 L20 -1'/%3E%3C/g%3E%3Cg transform='translate(250 60) rotate(-8) scale(1.3)'%3E%3Cpath d='M-10 -7 C-4 -8.5 4 -8.5 11 -7.5'/%3E%3Cpath d='M-4.5 -7 C-4 -1 -5 5 -7 9.5'/%3E%3Cpath d='M5.5 -7.5 C5 -2 5 3.5 7.5 8'/%3E%3C/g%3E%3Cpath transform='translate(470 55) rotate(-10) scale(1.3)' d='M-10 0 L-3 7 L10 -8'/%3E%3Cg transform='translate(680 300) rotate(9) scale(1.3)'%3E%3Cpath d='M0 -13 C6 -13 10.5 -8 10.5 -3 C10.5 1.5 7 3.5 6.5 7.5 L-6.5 7.5 C-7 3.5 -10.5 1.5 -10.5 -3 C-10.5 -8 -6 -13 0 -13 Z'/%3E%3Cpath d='M-5 10.5 L5 10.5 M-3.5 13.5 L3.5 13.5'/%3E%3C/g%3E%3Cg transform='translate(60 250) rotate(6) scale(1.3)'%3E%3Cpath d='M-13 -7.5 C-8 -10 -3.5 -10 0 -7 C3.5 -10 8 -10 13 -7.5 L13 7 C8 4.5 3.5 4.5 0 7 C-3.5 4.5 -8 4.5 -13 7 Z'/%3E%3Cpath d='M0 -7 L0 7'/%3E%3C/g%3E%3Cg transform='translate(215 300) rotate(-7) scale(1.3)'%3E%3Cpath d='M0 -11.5 C6.5 -11.5 11.5 -6.5 11.5 0 C11.5 6.5 6.5 11.5 0 11.5 C-6.5 11.5 -11.5 6.5 -11.5 0 C-11.5 -6.5 -6.5 -11.5 0 -11.5 Z'/%3E%3Cpath d='M0 -6 L0 1 L5 4.5'/%3E%3C/g%3E%3Cg transform='translate(500 450) rotate(-14) scale(1.3)'%3E%3Cpath d='M-13 -3 L13 -10.5 L3 10.5 L-.5 2.5 Z'/%3E%3Cpath d='M-.5 2.5 L13 -10.5'/%3E%3C/g%3E%3Cpath transform='translate(390 555) rotate(-5) scale(1.3)' d='M0 0 C-3 -6 -10 -6 -11.5 -1.5 C-12.5 3 -6 6.5 0 0 C6 -6.5 12.5 -3 11.5 1.5 C10 6 3 6 0 0 Z'/%3E%3Cg transform='translate(620 685) rotate(11) scale(1.3)'%3E%3Cpath d='M0 -11.5 C6.5 -11.5 11.5 -6.5 11.5 0 C11.5 6.5 6.5 11.5 0 11.5 C-6.5 11.5 -11.5 6.5 -11.5 0 C-11.5 -6.5 -6.5 -11.5 0 -11.5 Z'/%3E%3Cpath d='M-4.5 -4.5 L-4.5 -2 M4.5 -4.5 L4.5 -2'/%3E%3Cpath d='M-5.5 3.5 C-2.5 6.5 2.5 6.5 5.5 3.5'/%3E%3C/g%3E%3Cg transform='translate(60 690) rotate(-9) scale(1.3)'%3E%3Cpath d='M-4 -11 L-4 -2 L-10 7.5 C-11.5 10 -10 12.5 -7.5 12.5 L7.5 12.5 C10 12.5 11.5 10 10 7.5 L4 -2 L4 -11'/%3E%3Cpath d='M-7 -11.5 L7 -11.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(91, 80, 232, 0.08) 1px, transparent 1.5px);
  background-size: 720px 720px, 26px 26px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
}
[data-dark] body,
[data-dark] .section-page {
  background-color: #0b1020;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='none' stroke='%238b7cf8' stroke-opacity='1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(95 85) rotate(-12) scale(1.3)' d='M0 -17 L5 -6 L17 -4.5 L8.5 3.5 L11 16 L0 9.5 L-10 15.5 L-8 4 L-16.5 -5 L-5.5 -6.5 Z'/%3E%3Cg transform='translate(560 140) rotate(16) scale(1.3)'%3E%3Cpath d='M-11 .5 C-11.5 -6 -6 -11.5 .5 -11 C7 -10.5 11.5 -5.5 11 .5 C10.5 6.5 5.5 11 -.5 11 C-6.5 11 -10.5 6.5 -11 .5 Z'/%3E%3Cpath d='M-21 7 C-19 3 -16 0 -13.5 -1.5 M13 -5.5 C17 -4.5 20.5 -2 21 1 C21.5 5 12 10.5 -2 11.5 C-11 12 -19.5 10.5 -21 7'/%3E%3C/g%3E%3Cpath transform='translate(350 178) rotate(12) scale(1.3)' d='M0 3 C-1 -2 -4.5 -4.5 -7.5 -3.5 C-11 -2.5 -12 1.5 -9.5 5 C-7 8.5 -3.5 11.5 .5 14 C3.5 11.5 7.5 8 9.5 4.5 C11.5 1 10.5 -3 7 -4 C3.5 -5 1 -2 0 3 Z'/%3E%3Cpath transform='translate(430 330) rotate(-8) scale(1.3)' d='M15.5 .5 C10 -.5 5 -.5 0 0 L8.5 8.5 L.5 16.5 C5.5 17.5 11 17.5 16 16.5'/%3E%3Cg transform='translate(155 430) rotate(5) scale(1.3)'%3E%3Cpath d='M0 8.5 L5.5 17.5 L11 -3.5 L30 -4'/%3E%3Cpath d='M17 3.5 C20 7 23.5 10.5 26 13.5 M26.5 3 C23.5 7 20 10.5 17.5 14'/%3E%3C/g%3E%3Cpath transform='translate(640 520) rotate(9) scale(1.3)' d='M4.5 -17 L-6.5 2.5 L-.5 2 L-4.5 16.5 L8 -3.5 L1.5 -3 Z'/%3E%3Cg transform='translate(300 625) rotate(20) scale(1.3)'%3E%3Cpath d='M-16 -.5 C-15 -6 14 -7 16 -1 C15 5.5 -13.5 6.5 -16 -.5 Z'/%3E%3Cpath transform='rotate(62)' d='M-16 -.5 C-15 -6 14 -7 16 -1 C15 5.5 -13.5 6.5 -16 -.5 Z'/%3E%3Ccircle r='1.8' fill='%238b7cf8' fill-opacity='1' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(85 560) rotate(-6) scale(1.3)'%3E%3Cpath d='M0 0 C3.5 4.5 7.5 9 11 13 M11.5 .5 C8 5 4 9.5 .5 13.5'/%3E%3Cpath d='M14.5 -5.5 C14.5 -8.5 18.5 -9.5 19.5 -7 C20.5 -4.5 16 -1.5 14.5 -.5 L20 -1'/%3E%3C/g%3E%3Cg transform='translate(250 60) rotate(-8) scale(1.3)'%3E%3Cpath d='M-10 -7 C-4 -8.5 4 -8.5 11 -7.5'/%3E%3Cpath d='M-4.5 -7 C-4 -1 -5 5 -7 9.5'/%3E%3Cpath d='M5.5 -7.5 C5 -2 5 3.5 7.5 8'/%3E%3C/g%3E%3Cpath transform='translate(470 55) rotate(-10) scale(1.3)' d='M-10 0 L-3 7 L10 -8'/%3E%3Cg transform='translate(680 300) rotate(9) scale(1.3)'%3E%3Cpath d='M0 -13 C6 -13 10.5 -8 10.5 -3 C10.5 1.5 7 3.5 6.5 7.5 L-6.5 7.5 C-7 3.5 -10.5 1.5 -10.5 -3 C-10.5 -8 -6 -13 0 -13 Z'/%3E%3Cpath d='M-5 10.5 L5 10.5 M-3.5 13.5 L3.5 13.5'/%3E%3C/g%3E%3Cg transform='translate(60 250) rotate(6) scale(1.3)'%3E%3Cpath d='M-13 -7.5 C-8 -10 -3.5 -10 0 -7 C3.5 -10 8 -10 13 -7.5 L13 7 C8 4.5 3.5 4.5 0 7 C-3.5 4.5 -8 4.5 -13 7 Z'/%3E%3Cpath d='M0 -7 L0 7'/%3E%3C/g%3E%3Cg transform='translate(215 300) rotate(-7) scale(1.3)'%3E%3Cpath d='M0 -11.5 C6.5 -11.5 11.5 -6.5 11.5 0 C11.5 6.5 6.5 11.5 0 11.5 C-6.5 11.5 -11.5 6.5 -11.5 0 C-11.5 -6.5 -6.5 -11.5 0 -11.5 Z'/%3E%3Cpath d='M0 -6 L0 1 L5 4.5'/%3E%3C/g%3E%3Cg transform='translate(500 450) rotate(-14) scale(1.3)'%3E%3Cpath d='M-13 -3 L13 -10.5 L3 10.5 L-.5 2.5 Z'/%3E%3Cpath d='M-.5 2.5 L13 -10.5'/%3E%3C/g%3E%3Cpath transform='translate(390 555) rotate(-5) scale(1.3)' d='M0 0 C-3 -6 -10 -6 -11.5 -1.5 C-12.5 3 -6 6.5 0 0 C6 -6.5 12.5 -3 11.5 1.5 C10 6 3 6 0 0 Z'/%3E%3Cg transform='translate(620 685) rotate(11) scale(1.3)'%3E%3Cpath d='M0 -11.5 C6.5 -11.5 11.5 -6.5 11.5 0 C11.5 6.5 6.5 11.5 0 11.5 C-6.5 11.5 -11.5 6.5 -11.5 0 C-11.5 -6.5 -6.5 -11.5 0 -11.5 Z'/%3E%3Cpath d='M-4.5 -4.5 L-4.5 -2 M4.5 -4.5 L4.5 -2'/%3E%3Cpath d='M-5.5 3.5 C-2.5 6.5 2.5 6.5 5.5 3.5'/%3E%3C/g%3E%3Cg transform='translate(60 690) rotate(-9) scale(1.3)'%3E%3Cpath d='M-4 -11 L-4 -2 L-10 7.5 C-11.5 10 -10 12.5 -7.5 12.5 L7.5 12.5 C10 12.5 11.5 10 10 7.5 L4 -2 L4 -11'/%3E%3Cpath d='M-7 -11.5 L7 -11.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(148, 160, 255, 0.09) 1px, transparent 1.5px);
  background-size: 720px 720px, 26px 26px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
}

/* ── .dw-knockout — clear the doodle wall behind one text block ──────
   The doodle tile repeats on a fixed 720px grid with no idea where text
   sits, so a bold stroke can land in a headline's letterforms and read as
   UI clipping. Put this class on the text block rather than dimming the
   wall: it paints a soft page-coloured halo behind that block, so the
   doodle fades out under the words and stays full strength everywhere
   else. The halo is the page colour on a flat backdrop — invisible except
   for what it hides.

   z-index:-1 keeps it above the body background (which is what carries the
   doodles) but below the element's own text, the same trick h1 em::after
   already uses for the hand-drawn underline. */
.dw-knockout {
  position: relative;
}
.dw-knockout::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.5em -1.1em;
  /* A blurred solid rather than a radial gradient. A centre-origin ellipse
     tracks the box's aspect ratio, so on a wide short block with left-aligned
     text (.section-head is ~1200x155) it never reaches the eyebrow pill in the
     top-left corner and a doodle cuts straight through it. Blurring a solid
     rectangle feathers all four edges evenly whatever the block's shape. */
  background: #f4f6ff;
  filter: blur(16px);
  pointer-events: none;
}
[data-dark] .dw-knockout::before {
  background: #0b1020;
}

/* Print: plain white paper — no doodles, dots or dark ink. Quizzes and
   notes get printed as handouts; the backdrop must not cost ink. */
@media print {
  html,
  body,
  .section-page,
  [data-dark] body,
  [data-dark] .section-page {
    background-color: #fff !important;
    background-image: none !important;
  }

  /* No doodles on paper, so nothing to knock out — and a dark halo would
     print as a grey smear behind the text. */
  .dw-knockout::before {
    display: none !important;
  }
}