/* ==== F23 picture and figure sizing ([claude-diagrams], 6 October 2026) ====
   The owner: "a diagram is never too big on a slide page that it isn't visible on the page".
   This file is the one place for picture and figure sizing: lesson slide pictures, diagrams inside an explanation,
   question art, notes and textbook figures, flashcard and game pictures. It loads after the other stylesheets.
   - Every picture scales in proportion, with a maximum visible height tied to the screen.
   - Nothing is cropped or stretched. An svg keeps its own shape inside its box (the browser's default
     preserveAspectRatio "meet"), and an img uses object-fit: contain.
   - "Enlarge diagram" (diagram-viewer.js) keeps the detail.
   --sw-feed-h       the visible height of the lesson feed below the top bar (measured by diagram-fit.js; the
                     fallback assumes the 72 px top bar and uses vh, so it also works where dvh is not known).
   --sw-figure-max-h the visible-height rule for notes, textbook and Notes window figures, never below the floor.
                     [claude-textbook] uses it.
   --sw-figure-min-h the floor, so a picture never becomes too small to read on a very short screen. */
:root{--sw-figure-min-h:200px;--sw-figure-max-h:max(var(--sw-figure-min-h),calc(100vh - 200px))}
@supports(height:100dvh){:root{--sw-figure-max-h:max(var(--sw-figure-min-h),calc(100dvh - 200px))}}

/* Lesson slide pages. The room kept below or beside the picture: the card's 25 px gap under the top bar, the card
   padding, the Enlarge button and, where the words are under the picture, the heading and two lines of text.
   The amounts come from measuring every slide page of every course at five screen sizes (diagram_fit.cjs).
   The first card of a lesson sits under the lesson's title when the lesson opens, so it keeps more room. */
.cj-shell{--sw-pic-room:130px;--sw-col-room:340px;--sw-ask-room:330px;--sw-first-room:0px}
.cj-shell .cj-intro+.cj-card{--sw-first-room:170px}
.cj-shell .cj-card{
  --sw-pic-max:max(var(--sw-figure-min-h),calc(var(--sw-feed-h,calc(100vh - 72px)) - var(--sw-pic-room) - var(--sw-first-room)));
  --sw-col-max:max(var(--sw-figure-min-h),calc(var(--sw-feed-h,calc(100vh - 72px)) - var(--sw-col-room) - var(--sw-first-room)));
  --sw-ask-max:max(120px,calc(var(--sw-feed-h,calc(100vh - 72px)) - var(--sw-ask-room) - var(--sw-first-room)))}
@media(max-width:600px){.cj-shell{--sw-pic-room:300px;--sw-col-room:360px;--sw-ask-room:360px}.cj-shell .cj-intro+.cj-card{--sw-first-room:160px}}

/* The picture beside the explanation (above it on phones). On wide screens it sits at the top of its column, level
   with the heading, so a long explanation cannot push it below the screen. On phones the explanation under it takes
   the card's full width, so a long code line scrolls inside its own box instead of pushing the heading off both
   sides of the screen. */
@media(min-width:601px){.cj-shell .cj-picture{justify-content:flex-start}}
@media(max-width:600px){.cj-shell .cj-teach>.cj-explanation{align-self:stretch;width:100%}}
.cj-shell .cj-picture>svg,.cj-shell .cj-picture .ndia>svg,.cj-shell .cj-picture .note-svg svg{display:block;width:100%;height:auto;max-width:100%;max-height:var(--sw-pic-max)}
.cj-shell .cj-picture img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--sw-pic-max);object-fit:contain;margin:0 auto}
/* A diagram inside the explanation column (a slide drawn in one column). */
.cj-shell .cj-explanation .ndia>svg{display:block;width:100%;height:auto;max-width:100%;max-height:var(--sw-col-max)}
.cj-shell .cj-explanation figure img,.cj-shell .cj-explanation .teaching-visual img{width:auto;height:auto;max-width:100%;max-height:var(--sw-col-max);object-fit:contain}
/* Question art stays small enough to keep the question and its first answers on the screen. */
.cj-shell .cj-question-art svg{display:block;width:100%;height:auto;max-height:min(245px,var(--sw-ask-max))}
.cj-shell .cj-question-art img{display:block;width:auto;height:auto;max-width:100%;max-height:min(245px,var(--sw-ask-max));object-fit:contain;margin:0 auto}
.cj-shell .cj-question-art .cj-art{height:auto;max-height:min(155px,var(--sw-ask-max))}
/* A picture with answer points on it (.cj-diagram) is left as it is: its points are placed in percentages of the
   picture, and no course uses one today. */

/* Short screens (a small phone is 667 px tall): a lower floor for pictures and smaller question art keep the heading,
   the question and its first answers on the screen with the picture. */
@media(max-width:600px) and (max-height:700px){.cj-shell{--sw-pic-room:310px}}
@media(max-height:700px){:root{--sw-figure-min-h:180px}.cj-shell .cj-question-art .cj-art{max-height:min(110px,var(--sw-ask-max))}.cj-shell .cj-question-art svg{max-height:min(200px,var(--sw-ask-max))}}

/* Notes, textbook and the lesson's Notes window: each figure fits on one screen with room for its heading. */
.ndia>svg{max-height:var(--sw-figure-max-h)}
.cj-notes-dialog .ndia>svg{max-height:max(var(--sw-figure-min-h),calc(100vh - 250px))}
@supports(height:100dvh){.cj-notes-dialog .ndia>svg{max-height:max(var(--sw-figure-min-h),calc(100dvh - 250px))}}
.teaching-visual img{max-height:min(355px,var(--sw-figure-max-h));object-fit:contain}
@media(max-width:1050px){.teaching-visual img{max-height:min(320px,var(--sw-figure-max-h));object-fit:contain}}
.cell-book-illustrated figure svg,.cell-book-illustrated figure img{max-height:var(--sw-figure-max-h);object-fit:contain}

/* Flashcard and game pictures: never taller than about a third of the screen, so the words and answers stay on it. */
.question-image img{max-height:min(300px,34vh);object-fit:contain}
@supports(height:100dvh){.question-image img{max-height:min(300px,34dvh);object-fit:contain}}
@media(max-width:600px){.question-image img{max-height:min(230px,30vh);object-fit:contain}}
@supports(height:100dvh){@media(max-width:600px){.question-image img{max-height:min(230px,30dvh);object-fit:contain}}}
/* ==== end of F23 picture and figure sizing ==== */