/* A page that is one opened picture (a scheme or a control table from the gallery of MOTOR_START_BMW_ru).
   The picture is shown WHOLE: scaled down to the screen, never up, centred, with nothing to scroll. It is
   enlarged the way any page is - browser zoom on a desktop (aep_viewer.js writes the fitted size back in
   pixels, so the zoom acts on it), fingers on a phone. ⛔ No click-to-zoom of its own: the
   owner's rule of 21.09.2026.
   The canvas of such a page is a stack of generations at one origin, of which only the top one is seen on
   the desktop; scaled here, every lower one would come out from under it, so they stay hidden. */

html.aep-viewer,
html.aep-viewer body
{
   margin: 0 !important;
   padding: 0 !important;
   background-color: #FFFFFF;
}

html.aep-viewer #container
{
   position: static !important;
   width: auto !important;
   height: auto !important;
   min-height: 0 !important;
   margin: 0 !important;
   padding: 0 !important;
   text-align: center !important;
}

/* ⛔ The column of a scheme page follows the WINDOW, not the page. On a desktop the page is never narrower
   than the canvas (`body{min-width:963px}` in the chrome - the header row keeps its width under zoom), and a
   column as wide as the page centred a drawing fitted into a window of 480 at 481 px - at the right edge of
   the window, half out of it. A viewer holds only the drawing, so its column always stays the window; a
   column with words does too until aep_viewer.js freezes it in pixels. */
html.aep-viewer:not(.aep-m) #container,
html.aep-scheme:not(.aep-viewer):not(.aep-m):not(.aep-view-px) #container
{
   max-width: 100vw !important;
}

/* the phone layer unwinds the canvas into a column: its paddings would narrow the picture */
html.aep-viewer .aep-flowroot,
html.aep-viewer .aep-flow
{
   margin: 0 !important;
   padding: 0 !important;
   border: 0 !important;
}

html.aep-viewer #container div[id^="wb_Image"]:not(.aep-view-top)
{
   display: none !important;
}

html.aep-viewer #container .aep-view-top
{
   position: static !important;
   left: auto !important;
   top: auto !important;
   width: auto !important;
   height: auto !important;
   /* The screen the picture has to itself is what is left of it under the sticky header and above the
      phone's contact bar; aep_viewer.js measures both and keeps `--aep-viewer-chrome` in pixels. */
   min-height: calc(100vh - var(--aep-viewer-chrome, 0px));
   min-height: calc(100svh - var(--aep-viewer-chrome, 0px));
   /* the contact rail of a phone held sideways stands along one edge: the picture steps aside from it */
   padding-left: var(--aep-viewer-pad-left, 0px) !important;
   padding-right: var(--aep-viewer-pad-right, 0px) !important;
   box-sizing: border-box;
   display: flex !important;
   /* `stretch` is what a flex row does to an item of automatic height by default, and it pulled the
      picture to the height of the screen: the scheme came out squashed to the shape of the window.
      The start edge plus the automatic margins below is the only pair that keeps the proportions. */
   align-items: flex-start;
   justify-content: flex-start;
   overflow: visible !important;
}

/* `margin: auto` centres the picture while it fits and lets it start at the edge once it does not:
   centring by `justify-content` would push its left part out of reach of the scroll. */
html.aep-viewer #container .aep-view-top img
{
   display: block;
   width: auto !important;
   height: auto !important;
   max-width: calc(100vw - var(--aep-viewer-pad-left, 0px) - var(--aep-viewer-pad-right, 0px)) !important;
   max-height: calc(100vh - var(--aep-viewer-chrome, 0px)) !important;
   max-height: calc(100svh - var(--aep-viewer-chrome, 0px)) !important;
   /* No `object-fit` here on purpose: with both sides automatic the picture keeps its own proportions
      anyway, while `contain` would tell check_picture_fit.js to skip it - the gate leaves a fitted
      picture alone, and the page would have nothing left to judge it by. */
   margin: auto !important;
   border: 0;
}

/* ⛔ A drawing enlarged by browser zoom has to stay REACHABLE. The chrome clips the horizontal overflow of
   a desktop page (`html:not(.aep-m) body{overflow-x:hidden}`, so that boxes parked beyond the right edge
   of the canvas give no sideways scrollbar), and that clip would cut off the right half of a drawing the
   reader has zoomed wider than the window, with no way to pan to it. The clip is lifted while the DRAWING
   or the frozen column of a page with words is wider than the window (`aep-view-wide`, kept by
   aep_viewer.js); a window narrower than the canvas scrolls sideways on every page anyway (chrome_parts.js).
   ⛔ The phone is deliberately NOT released: the page itself never scrolls sideways there, and the clip of
   the phone layer (`body{overflow-x:clip}`) stays the guarantee of that. */
html.aep-scheme.aep-view-px.aep-view-wide:not(.aep-m),
html.aep-scheme.aep-view-px.aep-view-wide:not(.aep-m) body
{
   overflow-x: visible !important;
}

/* ---- A scheme page that ALSO carries text (a title over the drawing, a caption under it) ----------
   Such a page is no viewer: the picture cannot take the whole screen while the words stand somewhere
   else on the canvas. Its canvas becomes a plain column instead, and that is what keeps its words
   readable: WWB gives every LINE of a text block a box of FIXED height placed at its own `top`, so a
   line that no longer fits its width - a font that renders wider, a word added - wraps inside a box
   that cannot grow and prints its second half over the line below. In a column every line takes the
   height it needs, and the drawing fits the width instead of reaching past the screen. */
html.aep-scheme:not(.aep-viewer):not(.aep-m) #container
{
   position: static !important;
   width: auto !important;
   height: auto !important;
   min-height: 0 !important;
   text-align: center !important;
}

/* Every div inside, not only the children: WWB puts the LINE boxes of a heading inside its `<h1>`,
   and a selector built on direct children never reaches them - such a heading would keep its 22 px
   rows while the block around it already flows. */
html.aep-scheme:not(.aep-viewer):not(.aep-m) #container div
{
   position: static !important;
   left: auto !important;
   top: auto !important;
   width: auto !important;
   height: auto !important;
   max-width: 100% !important;
}

html.aep-scheme:not(.aep-viewer):not(.aep-m) #container > div
{
   margin: 0 auto 18px !important;
}

/* The title of the column gets the air every first heading of the site has under the header: 30 px of
   empty space above its letters (owner, 18.09.2026; the gate is `_tools/pages/even_heading_gaps.js`).
   With the margin above alone its letters stand 1 px under the header line; the line box of the 37 px
   title gives that 1 px itself, hence 29. `:has(h1)` names the title block and nothing else - a drawing
   at the top of a column keeps its place, and a browser without `:has()` leaves the title at the top of
   the column. */
html.aep-scheme:not(.aep-viewer):not(.aep-m) #container > div:has(h1)
{
   margin-top: 29px !important;
}

html.aep-scheme:not(.aep-viewer):not(.aep-m) #container img
{
   max-width: 100% !important;
   width: auto !important;
   height: auto !important;
}

/* A scheme page keeps the generations of its drawing stacked at one origin, and the canvas shows only
   the top one - the rest lie underneath it. In a column each of them would print as a drawing of its
   own, so only the top is kept, exactly as on a viewer page. The phone is included: there the stack
   unwinds too. */
html.aep-scheme:not(.aep-viewer) #container div[id^="wb_Image"]:not(.aep-view-top)
{
   display: none !important;
}

/* A box parked to the right of the drawing (a file name, a note to the author) is invisible to a
   reader: the page clips its own horizontal overflow. It has to stay invisible once the canvas becomes
   a column, where there is no "beyond the right edge" any more. */
html.aep-scheme .aep-offcanvas
{
   display: none !important;
}

/* ⭐ A scheme page carries NOTHING BELOW its drawing (owner, 20.09.2026: "на этой странице внизу баг,
   отображается текст которого быть не должно под изображением"). A title ABOVE the drawing is another
   matter and stays: that is how the column page is built. What to hide is decided by the canvas
   COORDINATES, not by the order of the markup (WWB writes blocks by z-index, and a block written later
   may stand higher on the page): the class is set by `_tools/pages/mark_below_drawing.js`, and the
   words stay in the file. */
html.aep-scheme .aep-below
{
   display: none !important;
}

/* ⭐ A scheme page has no footer at all - neither the dark one of the chrome, which its markup no
   longer carries, nor the line the phone layer builds from the contact data (owner, 20.09.2026: a page
   opened for one drawing carries nothing under it). The phone one is built by `mobile.js` from data,
   not from the markup, so it is answered here, where only these ten pages are listening. The contact
   panel itself stays: it is the way back to a human, and it floats over the page rather than under it. */
html.aep-scheme .aep-foot
{
   display: none !important;
}


/* ---- THE CHROME COVERS EMPTINESS, NEVER THE DRAWING -----------------------------------------------
   The sticky row of sections and the contact bar of the phone FLOAT over the page, and on a scheme page
   they were cutting the drawing off at the top and at the bottom (owner, 20.09.2026: "нужно вверху и
   внизу добавить пустоты, которые будут перекрываться навигацией и контактами, но не будут никогда
   перекрывать изображение").
   The cure is not a margin - a margin only helps at the two ends of a scroll. It is a BAND: the content
   is given exactly the free screen (`100svh` less the header and the bar, both measured by
   `aep_viewer.js`), so the page has nothing to scroll, the sticky row never floats over anything, and
   the bar stands below the band, on empty space. The drawing shrinks to the band and keeps its own
   proportions: both of its sides stay automatic, and the box it needs before the file arrives is held
   by the band itself - the height of the page does not change when the picture lands. */
html.aep-scheme:not(.aep-m):not(.aep-view-px) #container,
html.aep-scheme.aep-m .aep-flowroot
{
   box-sizing: border-box !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   justify-content: flex-start !important;
   /* ⛔ `height`, not `min-height`: the percentage in the picture's `max-height:100%` resolves only
      against a DEFINITE height of its parent. With `min-height` the band stays as tall as its content,
      the percentage is treated as invalid and the drawing does not shrink at all - measured, the page
      stayed 2057 px tall. */
   height: calc(100vh - var(--aep-viewer-chrome, 0px)) !important;
   height: calc(100svh - var(--aep-viewer-chrome, 0px)) !important;
}

/* ⛔⛔⛔ ON A PAGE ZOOMED WITH FINGERS THE HEADER LEAVES THE FLOW - A MARGIN GIVES ITS PLACE BACK.
   A pinch gives the phone layer the class `aep-zoom`, and by it the chrome turns the row of sections
   `position: fixed` (so that no hole is left under the logo). A fixed row takes no place in the flow,
   the canvas starts the page at zero, and the drawing ends up UNDER the header with nothing to move it
   out: the page is exactly one screen tall and does not scroll (owner, 20.09.2026: "схемы всё равно
   закрываются, вниз сдвинуть невозможно"; measured - the picture at `top: 0` under a header of 0...29).
   A margin exactly as tall as the header puts the band back where it stands unzoomed: the band keeps
   its height, the drawing does not shrink, and its top is clear. ⚠ `margin`, not `padding`: with
   `box-sizing: border-box` a padding would eat the band's height, and the zoomed drawing would come out
   smaller - the opposite of what the reader pinches for. */
html.aep-scheme.aep-zoom.aep-m .aep-flowroot,
html.aep-scheme.aep-zoom:not(.aep-m) #container
{
   margin-top: var(--aep-viewer-head, 0px) !important;
}

/* ⛔ The reserve for the contact panel that the phone layer keeps at the bottom of the body (94 px: the
   panel's 72 plus air) is SUPERFLUOUS on a scheme page - the band already ends exactly at the panel's
   top edge. Left in place, it makes the page 22 px taller than the screen and brings back the very
   scroll the band exists to avoid (measured: document 866 on a screen of 844). */
html.aep-scheme.aep-m body
{
   padding-bottom: 0 !important;
}

/* ⛔ Words NEVER shrink. A flex item has `flex-shrink: 1` by default, and the band would shrink the
   caption together with the drawing: the caption block came out 25 px for 95 px of content, and its
   `<h1>` stuck out of the band and pulled the page below the screen (measured: document 466 on a
   screen of 390). Only the picture may give way to the band - by the rule below. */
html.aep-scheme:not(.aep-m) #container > *,
html.aep-scheme.aep-m .aep-flowroot > *
{
   flex: 0 0 auto !important;
}

/* The block of the drawing is the one that gives way: the words keep their size, the picture takes what
   is left of the band. `min-height: 0` is what allows a flex item to shrink below its content at all.
   ⛔ The block is named by its CLASS (`aep-view-top`), never by `div[id^="wb_Image"]`: the lower
   generations of the stack are hidden by a rule of exactly the same weight, and a later rule naming
   them by id would hand them `display:flex` back - measured, the page grew from 2057 to 5272 px with
   three drawings in the column instead of one. */
html.aep-scheme:not(.aep-m) #container > .aep-view-top,
html.aep-scheme.aep-m .aep-flow.aep-view-top
{
   flex: 0 1 auto !important;
   min-height: 0 !important;
   display: flex !important;
   align-items: flex-start !important;
   justify-content: center !important;
   width: 100% !important;
}

/* ⛔ Both sides of the picture stay AUTOMATIC. A definite width would turn the band's height limit into
   a squash - the browser would clamp the height alone and keep the stated width, which is exactly how
   the three control tables came out flattened when the rule reached them (ИСКАЖЕНО 3 of 3,
   `check_picture_fit.js`). */
html.aep-scheme:not(.aep-m):not(.aep-view-px) #container > .aep-view-top img,
html.aep-scheme.aep-m:not(.aep-view-px) .aep-flow.aep-view-top img
{
   max-height: 100% !important;
   width: auto !important;
   height: auto !important;
}

/* ---- The drawing of a scheme page FITS the phone, and nothing scrolls sideways ---------------------
   Everywhere else a wide diagram keeps its size and scrolls inside its own box - that is how the phone
   layer shows drawings wider than the column. On a page that IS one drawing the owner asked for no
   sideways scrolling at all (19.09.2026): the picture is fitted, and the reader zooms it with fingers. */
html.aep-scheme.aep-m .aep-flow.aep-wide
{
   overflow-x: visible !important;
}

/* The viewer pages are left out on purpose: their picture is limited by the free screen above, and a
   second limit of equal weight coming later would replace it. */
html.aep-scheme:not(.aep-viewer).aep-m .aep-flow.aep-wide img,
html.aep-scheme:not(.aep-viewer).aep-m #container img
{
   max-width: 100% !important;
   height: auto !important;
}

/* ---- SIZE IN PIXELS: BROWSER ZOOM ENLARGES THE DRAWING ITSELF ----------------------------------------
   The band fits the drawing as a FRACTION of the window, and a fraction does not care about zoom: the
   window in css pixels shrinks by exactly the zoom, so a fitted drawing keeps its physical size while
   the row of sections, set in pixels, grows (owner, 20-21.09.2026: "увеличивается только заголовок, а
   схема не меняется"). So on a desktop `aep_viewer.js` writes the fitted size of the drawing back in
   pixels and sets `aep-view-px`: the band lets go (its rules above are switched off by this class), and
   the limits of the viewer and of the column are lifted - otherwise a `max-height` in fractions of the
   window would shrink the zoomed drawing again.
   ⛔ The weight (1 id, 4 classes, 2 elements) beats the limit of the viewer (1/2/2) and of the column
   (1/3/2).
   ⛔ A drawing zoomed wider than the window must START at the left edge. Centred by `justify-content`,
   it overflows on BOTH sides, and the part beyond the start of the page cannot be reached by any scroll
   (measured: 117 px of CONTROL_MOTOR_START_V2.3.0_SCH_ru cut off at 150 %). Automatic side margins
   centre it while it fits and give way once it does not; the block of the drawing (1/4/1) beats the
   column's `justify-content: center` (1/3/1). */
html.aep-scheme.aep-view-px:not(.aep-m) #container > .aep-view-top
{
   justify-content: flex-start !important;
}

html.aep-scheme.aep-view-px:not(.aep-m) #container .aep-view-top img
{
   max-width: none !important;
   max-height: none !important;
   margin-left: auto !important;
   margin-right: auto !important;
}