/**
 * CM Stage Timeline - the layout and the looks. Every colour and space is a --cm-stl-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css; a drawing's colours are the shared --cm-draw-*
 * variables. Sizes are the cm-fse classes; a numeral is the body size times a scale variable. Two-selector rule.
 * The section spans the page; the inner wrapper carries the width classes (the sibling blocks' width) and is the container the band
 * measures: under 808 px of it the line stands at the left, the numbers on it, each stage's words and then its picture at its right;
 * from 808 the heading's sentence sits at the right of its title, the line stands in the middle, and a stage's words and picture stand
 * left and right of it, swapped on every second stage (the flip class, set by the block from the count of stages that print). The line
 * is a pseudo-element of the list. A picture is never wider than --cm-stl-picture-max nor than its column. The inner wrapper's own
 * padding is set on the inner wrapper, and a container cannot query itself: that rule measures the torso (the page's width), so it uses 851.
 */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline,
.wp-block-w4ya-cm-stage-timeline { box-sizing: border-box; display: block; clear: both; position: relative; overflow: clip; background: var(--cm-stl-bg); color: var(--cm-stl-text); }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline *,
.wp-block-w4ya-cm-stage-timeline * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner,
.wp-block-w4ya-cm-stage-timeline .cm-stl__inner { padding: var(--cm-stl-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner,
.wp-block-w4ya-cm-stage-timeline .cm-stl__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner p,
.wp-block-w4ya-cm-stage-timeline .cm-stl__inner p { letter-spacing: normal; } /* the z width classes set a tracking on the wrapper AND on every p inside it (.zt95 p) */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner :where(p, h2, h3, ul, ol, li, blockquote),
.wp-block-w4ya-cm-stage-timeline .cm-stl__inner :where(p, h2, h3, ul, ol, li, blockquote) { margin: 0; } /* the size classes and the theme carry margins */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner :where(ul, ol),
.wp-block-w4ya-cm-stage-timeline .cm-stl__inner :where(ul, ol) { padding: 0; list-style: none; }
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__inner,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__inner { padding: var(--cm-stl-pad-wide) 0; }
}

.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline p.cm-stl__kicker,
.wp-block-w4ya-cm-stage-timeline p.cm-stl__kicker { margin-bottom: 0.5em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-stl-kicker); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__title,
.wp-block-w4ya-cm-stage-timeline .cm-stl__title { color: var(--cm-stl-text); font-weight: 500; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__placeholder,
.wp-block-w4ya-cm-stage-timeline .cm-stl__placeholder { opacity: 0.7; border: 1px dashed currentColor; border-radius: 4px; padding: 0.3em 0.5em; } /* the canvas stand-ins (the page prints none) */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__head,
.wp-block-w4ya-cm-stage-timeline .cm-stl__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75em; padding-top: 0.85em; border-top: 3px solid var(--cm-stl-head-rule); }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__head-main,
.wp-block-w4ya-cm-stage-timeline .cm-stl__head-main,
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__lead,
.wp-block-w4ya-cm-stage-timeline .cm-stl__lead { min-width: 0; overflow-wrap: break-word; } /* a word longer than the band breaks rather than leave it */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline p.cm-stl__kicker,
.wp-block-w4ya-cm-stage-timeline p.cm-stl__kicker { font-weight: 500; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__title,
.wp-block-w4ya-cm-stage-timeline .cm-stl__title { letter-spacing: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__lead,
.wp-block-w4ya-cm-stage-timeline .cm-stl__lead { max-width: 34em; line-height: 1.55; }

.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stages,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stages { position: relative; margin-top: 2.1em; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stages:first-child,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stages:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stages::before,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stages::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cm-stl-disc) / 2 - var(--cm-stl-line-width) / 2); border-left: var(--cm-stl-line-width) solid var(--cm-stl-line); }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stage { position: relative; display: grid; grid-template-columns: var(--cm-stl-disc) minmax(0, 1fr); column-gap: 1em; row-gap: 0.85em; align-items: start; margin-top: 2.1em; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage:first-child,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stage:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage.cm-stl__placeholder,
.wp-block-w4ya-cm-stage-timeline .cm-stl__stage.cm-stl__placeholder { display: block; margin-left: calc(var(--cm-stl-disc) + 1em); padding: 0.3em 0.5em; border: 1px dashed currentColor; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__num,
.wp-block-w4ya-cm-stage-timeline .cm-stl__num { grid-column: 1; grid-row: 1; position: relative; display: grid; place-items: center; width: var(--cm-stl-disc); height: var(--cm-stl-disc); border: var(--cm-stl-disc-ring-width) solid var(--cm-stl-disc-ring); border-radius: 50%; background: var(--cm-stl-disc-bg); color: var(--cm-stl-disc-text); font-weight: 300; line-height: 1; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__num-text,
.wp-block-w4ya-cm-stage-timeline .cm-stl__num-text { display: block; font-size: calc(1em * var(--cm-stl-num-scale)); }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__words,
.wp-block-w4ya-cm-stage-timeline .cm-stl__words { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: break-word; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline p.cm-stl__label,
.wp-block-w4ya-cm-stage-timeline p.cm-stl__label { font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-stl-label); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__name,
.wp-block-w4ya-cm-stage-timeline .cm-stl__name { margin-top: 0.15em; color: var(--cm-stl-text); font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__name:first-child,
.wp-block-w4ya-cm-stage-timeline .cm-stl__name:first-child { margin-top: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__text,
.wp-block-w4ya-cm-stage-timeline .cm-stl__text { max-width: var(--cm-stl-text-max); margin-top: 0.4em; line-height: 1.55; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__text:first-child,
.wp-block-w4ya-cm-stage-timeline .cm-stl__text:first-child { margin-top: 0; }

/* A stage's picture: a drawing, a quote card or a status pill */
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture,
.wp-block-w4ya-cm-stage-timeline .cm-stl__picture { grid-column: 2; grid-row: 2; justify-self: start; width: min(100%, var(--cm-stl-picture-max)); min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture--pill,
.wp-block-w4ya-cm-stage-timeline .cm-stl__picture--pill { width: auto; max-width: 100%; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture.cm-stl__placeholder,
.wp-block-w4ya-cm-stage-timeline .cm-stl__picture.cm-stl__placeholder { width: auto; max-width: 100%; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__drawing,
.wp-block-w4ya-cm-stage-timeline .cm-stl__drawing { display: block; width: 100%; height: auto; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__quote,
.wp-block-w4ya-cm-stage-timeline .cm-stl__quote { padding: 1.05em 1.2em; background: var(--cm-stl-quote-bg); border: 1px solid var(--cm-stl-quote-border); border-radius: var(--cm-stl-radius); font-style: italic; line-height: 1.5; text-align: left; overflow-wrap: break-word; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__pill,
.wp-block-w4ya-cm-stage-timeline .cm-stl__pill { display: inline-flex; align-items: center; gap: 0.6em; max-width: 100%; padding: 0.6em 1.3em; background: var(--cm-stl-pill-bg); color: var(--cm-stl-pill-text); border-radius: 2em; font-weight: 500; line-height: 1.35; text-align: left; overflow-wrap: anywhere; }
.editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__dot,
.wp-block-w4ya-cm-stage-timeline .cm-stl__dot { flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cm-stl-pill-dot); }

@container (min-width: 808px) { /* the inner wrapper's own width */
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__head,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.4em; align-items: end; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__lead,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__lead { padding-bottom: 0.2em; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stages,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stages { margin-top: 3.2em; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stages::before,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stages::before { left: calc(50% - var(--cm-stl-line-width) / 2); }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stage { grid-template-columns: minmax(0, 1fr) var(--cm-stl-disc-col) minmax(0, 1fr); column-gap: 0; align-items: center; margin-top: 2.6em; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage.cm-stl__placeholder,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stage.cm-stl__placeholder { margin-left: 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__num,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__num { grid-column: 2; justify-self: center; width: var(--cm-stl-disc-wide); height: var(--cm-stl-disc-wide); }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__num-text,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__num-text { font-size: calc(1em * var(--cm-stl-num-scale-wide)); }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__words,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__words { grid-column: 1; padding-right: 1em; text-align: right; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__text,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__text { margin-left: auto; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__picture { grid-column: 3; grid-row: 1; width: min(100% - 1em, var(--cm-stl-picture-max-wide)); margin-left: 1em; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture--pill,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__picture--pill,
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__picture.cm-stl__placeholder,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__picture.cm-stl__placeholder { width: auto; max-width: calc(100% - 1em); }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__words,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__words { grid-column: 3; padding: 0 0 0 1em; text-align: left; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__text,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__text { margin-left: 0; }
    .editor-styles-wrapper .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__picture,
    .wp-block-w4ya-cm-stage-timeline .cm-stl__stage--flip .cm-stl__picture { grid-column: 1; justify-self: end; margin: 0 1em 0 0; }
}