/**
 * CM Remote Help - the layout and the looks. Every colour and space is a --cm-rmh-* variable: defaults from config.php
 * (build_global_css_properties), a site's own values from its site-specific.css. Sizes are the cm-fse classes. Two-selector rule.
 * The section spans the page; the inner wrapper carries the width classes (the sibling blocks' width) and is the container (cm-cqi-container)
 * the panel queries: the words and the steps go side by side from a 950px wrapper (the zt tier: 1001 x 0.95 = 950.95), the panel's padding
 * widens from 808px (the zu tier: 851 x 0.95). The steps' box is its own container, so the steps go into a row when THAT box is 560px wide
 (three cards of about ten ems each; the block holds at most three), wherever it sits: beside the words on a wide screen, under them on a tablet. The section's own
 * padding is 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-remote-help,
.wp-block-w4ya-cm-remote-help {
    box-sizing: border-box;
    display: block;
    clear: both;
    position: relative;
    background: var(--cm-rmh-bg);
    color: var(--cm-rmh-text);
}
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help *,
.wp-block-w4ya-cm-remote-help * { box-sizing: border-box; }

.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__inner,
.wp-block-w4ya-cm-remote-help .cm-rmh__inner { padding: var(--cm-rmh-section-pad) 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__inner,
.wp-block-w4ya-cm-remote-help .cm-rmh__inner,
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__inner p,
.wp-block-w4ya-cm-remote-help .cm-rmh__inner p { letter-spacing: normal; } /* the z width classes set a tracking on the wrapper AND on every p inside it (.zt95 p) */

/* The panel: tinted, rounded; the words then the steps, side by side from a 950px wrapper (below) */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__panel,
.wp-block-w4ya-cm-remote-help .cm-rmh__panel { display: grid; grid-template-columns: 1fr; gap: var(--cm-rmh-panel-gap); align-items: center; padding: var(--cm-rmh-panel-pad); background: var(--cm-rmh-panel-bg); border-radius: var(--cm-rmh-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__words,
.wp-block-w4ya-cm-remote-help .cm-rmh__words { min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__panel > :only-child,
.wp-block-w4ya-cm-remote-help .cm-rmh__panel > :only-child { grid-column: 1 / -1; } /* words without steps, or steps without words, take the whole panel on a wide screen */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__words > *,
.wp-block-w4ya-cm-remote-help .cm-rmh__words > * { margin: 0; } /* the size classes carry a margin */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help p.cm-rmh__kicker,
.wp-block-w4ya-cm-remote-help p.cm-rmh__kicker { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--cm-rmh-accent); } /* p: outranks the tracking reset above */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__title,
.wp-block-w4ya-cm-remote-help .cm-rmh__title { margin-top: 0.2em; color: var(--cm-rmh-text); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__lead,
.wp-block-w4ya-cm-remote-help .cm-rmh__lead { margin-top: 0.6em; line-height: 1.5; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__actions,
.wp-block-w4ya-cm-remote-help .cm-rmh__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cm-rmh-actions-gap); margin-top: var(--cm-rmh-actions-top); }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__button,
.wp-block-w4ya-cm-remote-help .cm-rmh__button { display: inline-flex; align-items: center; padding: var(--cm-rmh-button-pad); border: var(--cm-rmh-button-border) solid var(--cm-rmh-accent); border-radius: var(--cm-rmh-radius-sm); background: var(--cm-rmh-accent); color: var(--cm-rmh-button-text); font-weight: 600; line-height: 1.2; text-decoration: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__phone,
.wp-block-w4ya-cm-remote-help .cm-rmh__phone { margin: 0; color: var(--cm-rmh-phone); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }

/* The steps: their box measures its own room; one card per row, a row of cards from 560px (below); each card a circle, a title, a sentence */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__steps,
.wp-block-w4ya-cm-remote-help .cm-rmh__steps { container-type: inline-size; min-width: 0; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__list,
.wp-block-w4ya-cm-remote-help .cm-rmh__list { display: grid; gap: var(--cm-rmh-step-gap); margin: 0; padding: 0; list-style: none; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__step,
.wp-block-w4ya-cm-remote-help .cm-rmh__step { min-width: 0; padding: var(--cm-rmh-step-pad); background: var(--cm-rmh-step-bg); border: 1px solid var(--cm-rmh-border); border-radius: var(--cm-rmh-radius); }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__number,
.wp-block-w4ya-cm-remote-help .cm-rmh__number { display: grid; place-items: center; width: var(--cm-rmh-number-size); height: var(--cm-rmh-number-size); margin-bottom: var(--cm-rmh-number-gap); border-radius: 50%; background: var(--cm-rmh-accent); color: var(--cm-rmh-button-text); font-weight: 600; line-height: 1; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__step-title,
.wp-block-w4ya-cm-remote-help .cm-rmh__step-title { margin: 0 0 0.3em; color: var(--cm-rmh-text); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; } /* margin: a heading element carries one */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__step-text,
.wp-block-w4ya-cm-remote-help .cm-rmh__step-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }

/* The canvas stand-in for a step without a title or words (the page prints neither) */
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__placeholder,
.wp-block-w4ya-cm-remote-help .cm-rmh__placeholder { opacity: 0.7; border: 1px dashed var(--cm-rmh-border); border-radius: var(--cm-rmh-radius-sm); padding: 0.3em 0.5em; }
.editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__number.cm-rmh__placeholder,
.wp-block-w4ya-cm-remote-help .cm-rmh__number.cm-rmh__placeholder { padding: 0; border-radius: 50%; background: transparent; color: var(--cm-rmh-text); } /* the circle of a step the page will skip */

@container (min-width: 560px) { /* measured on the steps' box */
    .editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__list,
    .wp-block-w4ya-cm-remote-help .cm-rmh__list { grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@container (min-width: 808px) { /* measured on the inner wrapper */
    .editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__panel,
    .wp-block-w4ya-cm-remote-help .cm-rmh__panel { padding: var(--cm-rmh-panel-pad-wide); }
}
@container (min-width: 851px) { /* measured on the torso, not the inner wrapper (see the head comment) */
    .editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__inner,
    .wp-block-w4ya-cm-remote-help .cm-rmh__inner { padding: var(--cm-rmh-section-pad-wide) 0; }
}
@container (min-width: 950px) { /* measured on the inner wrapper */
    .editor-styles-wrapper .wp-block-w4ya-cm-remote-help .cm-rmh__panel,
    .wp-block-w4ya-cm-remote-help .cm-rmh__panel { grid-template-columns: var(--cm-rmh-panel-columns); }
}