/*
 * Add New Meeting - the header block and the platform picker.
 *
 * Flat selectors, `mhub-cm-` prefixed, in plain CSS rather than the plugin's
 * SCSS, for the same reason all-meetings.css is: it has to win against both
 * wp-admin and the plugin's own `meeting.scss`, and nested SCSS output makes
 * the specificity of any given rule hard to predict from reading it.
 *
 * Everything below the picker is still the old form SCSS. This file stops at
 * the picker rather than half-restyling the forms.
 */

.mhub-cm {
	--mhub-cm-brand: #085df2;
	--mhub-cm-brand-700: #0a4bc4;
	--mhub-cm-brand-tint: #e9f0fe;
	--mhub-cm-ink: #0f172a;
	--mhub-cm-ink-soft: #475569;
	--mhub-cm-ink-faint: #64748b;
	--mhub-cm-line: #e2e8f0;
	--mhub-cm-good: #12805c;
	--mhub-cm-warn: #b45309;

	/*
	 * The same column All Meetings uses: capped, centred, one gutter.
	 *
	 * All three parts matter, and an earlier version of this comment claimed the
	 * cap was already here when it was not. Without it the screen ran the full
	 * width of the window while the upgrade card below stayed capped and centred,
	 * so past about 1470px the heading and the card visibly parted company - the
	 * heading at 204 and the card at 284 on a 1760px window.
	 *
	 * The padding alone was added first, to stop the heading jumping 24px left
	 * when you clicked "Add new" from All Meetings.
	 */
	/* border-box, to match .mhub-uc-align: on content-box the cap measures
	   1420px plus two gutters and the page misses the band by one gutter. */
	box-sizing: border-box;
	/*
	 * Border-box on this element only - not on its descendants, which are still
	 * the legacy form SCSS and must keep their own box model.
	 *
	 * Without it the 1420px cap applied to the content and the two gutters sat
	 * outside it, so the column measured 1500px and everything in it started 40px
	 * left of where the upgrade card, which is border-box, put itself. Same shape
	 * of bug as .mhub-am-header.
	 */
	box-sizing: border-box;
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
	padding-left: var( --mhub-page-gutter, 24px );
	padding-right: var( --mhub-page-gutter, 24px );
}

/*
 * The font, the box model and the smoothing are set on this file's own elements
 * rather than on `.mhub-cm`.
 *
 * `.mhub-cm` is the existing `.meeting-wrapper`, and everything below the picker
 * is still the old form SCSS. A `font-family` there would restyle five forms
 * this change has not looked at; a `.mhub-cm *` box-sizing reset would change
 * the box model under every input in them, which is how a header tweak turns
 * into a layout bug three screens away.
 */

.mhub-cm-back,
.mhub-cm-title,
.mhub-cm-lede {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ back - */

/*
 * A quiet text link, not a filled violet button.
 *
 * The old control was #7856fb on a solid fill, which made the loudest thing on
 * the screen the one control that undoes the reason you came here. A filled
 * button is a promise that this is the primary action; going back never is. It
 * was also the legacy brand colour, two hues away from the header that links to
 * this screen.
 */
.mhub-cm-back,
.mhub-cm-back:link,
.mhub-cm-back:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: 0 0 0 -8px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: var( --mhub-cm-ink-faint );
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.mhub-cm-back:hover,
.mhub-cm-back:focus,
.mhub-cm-back:focus-visible,
.mhub-cm-back:active {
	background: #eef2f7;
	color: var( --mhub-cm-ink );
	text-decoration: none;
}

.mhub-cm-back:focus-visible {
	outline: 2px solid var( --mhub-cm-brand );
	outline-offset: 2px;
	box-shadow: none;
}

.mhub-cm-back svg {
	flex: none;
}

/* ---------------------------------------------------------------- header - */

/*
 * 22px/600, the same title scale as the All Meetings header, because this is
 * the same rank of screen. The old rule was 24px/700 in #333 - a fourth heading
 * size in one plugin, and a neutral that is not on the ramp.
 */
.mhub-cm-title {
	margin: 14px 0 0;
	padding: 0;
	font-size: 22px;
	font-weight: 600;

	/*
	 * 1.35, not 1.2, and it is the descenders that decide it.
	 *
	 * The title truncates, which means overflow: hidden, and at 1.2 the line
	 * box is 30px against a 31px painted height at this size - so the tail of
	 * a g or a y was sliced off by exactly one pixel. Measured on "Add New
	 * Meeting" at 1600px and at 1920px, where the size steps up to 25px and
	 * the clipping goes with it.
	 */
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var( --mhub-cm-ink );
}

@media ( min-width: 1536px ) {
	.mhub-cm-title {
		font-size: 25px;
	}
}

/*
 * One line, truncated rather than wrapped - the same rule the All Meetings
 * header follows, and the same reasoning: a lede that wraps stops being a lede,
 * and the header ends up a different height on every screen it appears on.
 *
 * The copy was shortened to fit rather than the cap widened. A longer line
 * would only move the wrap to a narrower screen, and this one was making its
 * promise twice.
 */
.mhub-cm-lede {
	margin: 6px 0 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --mhub-cm-ink-soft );
}

@media ( prefers-reduced-motion: reduce ) {

	.mhub-cm-back {
		transition: none;
	}
}


/* ------------------------------------------------------- option groups - */

/*
 * The two controls that answer a question by picking one of a short list: the
 * platform chips, and the segmented tracks. Everything visible about either is
 * a Tailwind class string in its own component. Only the two things a utility
 * cannot express are here, and both are shared, so the pair behave identically
 * under the hand however differently they are painted.
 */

/*
 * The radio is hidden from sight, never from the accessibility tree or the
 * keyboard. `display: none` and `visibility: hidden` take it out of both, and
 * with it the arrow-key navigation that is the whole reason for using a real
 * radio group here rather than five buttons.
 *
 * Written here rather than as utilities because wp-admin paints
 * `input[type=radio]` at (0,1,1) and its checked dot at (0,2,1), which a
 * (0,2,0) utility does not beat. A 1px transparent box has nothing to paint.
 *
 * Every state is named, and the selector is (0,3,1), for one rule in
 * particular: `input[type="radio"]:disabled` at (0,2,1) sets `opacity: 0.7`.
 * A single `.mhub-opt-input { opacity: 0 }` at (0,1,0) loses to it, so the
 * moment an option is disabled - a Pro-locked row, a platform a vendor cannot
 * use - WordPress's own radio came back at 70% and painted a blue disc over
 * the middle of the word. Which is the third time this exact rule has won in
 * this file: see `.mhub-sw-input` below, and the switch before it. If a
 * control here hides a native input, assume wp-admin has a `:disabled` rule
 * for it and write past (0,2,1) from the start.
 */
.mhub-tw input.mhub-opt-input,
.mhub-tw input.mhub-opt-input:hover,
.mhub-tw input.mhub-opt-input:focus,
.mhub-tw input.mhub-opt-input:checked,
.mhub-tw input.mhub-opt-input:disabled,
.mhub-tw input.mhub-opt-input:checked:disabled {
	position: absolute;
	width: 1px;
	height: 1px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	opacity: 0;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

/* wp-admin draws the checked dot as a `::before` glyph, which an appearance
   reset does not remove on its own. */
.mhub-tw input.mhub-opt-input::before {
	content: none;
}

/*
 * The focus ring belongs to the option, but the focus lands on the input inside
 * it, and no utility can style an ancestor. 2px of brand at 2px offset, the
 * same ring every other control on this screen draws.
 */
.mhub-opt:has( .mhub-opt-input:focus-visible ) {
	outline: 2px solid var( --mhub-cm-brand );
	outline-offset: 2px;
}

/*
 * Inside a segmented track the ring turns inward.
 *
 * The track wraps its tiles in 4px of padding, so a ring drawn 2px outside a
 * tile lands on the track rather than around the tile, and on the first and
 * last tile it is clipped by the track's own radius. Drawn 2px inside, it reads
 * as a ring on the thing that has focus, which is what it is for.
 */
.mhub-seg .mhub-opt:has( .mhub-opt-input:focus-visible ) {
	outline-offset: -2px;
}

/* ============================================================================
 * The setup notice
 *
 * The Connect chip that used to sit on every unconnected card is gone. Five
 * cards each carrying a call to action made the row compete with itself: the
 * question here is "which platform", and four chips answering a different
 * question were louder than the choice being asked for.
 *
 * The notice below the picker already appears the moment a platform needing
 * credentials is selected, which is the right moment - the answer arrives when
 * the question has been asked, not before. It was only ever a styling problem.
 *
 * The markup belongs to the four platform forms (`ZoomForm`, `WebexForm`,
 * `GoogleMeetForm`, `MsTeamsForm`, plus their Edit twins) and is identical in
 * all eight: a `.mhub_*_error.error` wrapper, an `h3` filled by
 * `dangerouslySetInnerHTML`, and a close `span`. Styling it here fixes every
 * one of them without touching the JS that raises real API errors through the
 * same element.
 * ========================================================================== */

/*
 * Scoped under `.mhub-cm`, so only the Add New Meeting screen is restyled and
 * the same component keeps its old look wherever else it is used.
 *
 * `.mhub-cm .mhub_zoom_error.error` is (0,3,0) against the SCSS rule's (0,2,0),
 * which is what lets these win without a single `!important`.
 */
.mhub-cm .mhub_zoom_error.error,
.mhub-cm .mhub_googlem_error.error,
.mhub-cm .mhub_msteams_error.error {
	/* The notice sits outside the picker, so the reset at the top of this file
	   does not reach it. Without this the max-width caps the content box and the
	   60px of padding lands outside it - 1180 wide against a 1120 grid. */
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 44px 14px 16px;
	max-width: 1120px;

	border: 0;
	border-radius: 12px;

	/*
	 * Amber, not the crimson left bar it had. Nothing has failed here - a
	 * platform simply has not been connected yet, and the person is two clicks
	 * from connecting it. Crimson is for things that broke.
	 */
	background: #fffbf3;
	box-shadow: inset 0 0 0 1px rgba( 180, 83, 9, 0.18 );
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* The glyph. A pseudo-element because the markup is fixed by the forms and
   there is no element here to hang an icon on. */
.mhub-cm .mhub_zoom_error.error::before,
.mhub-cm .mhub_googlem_error.error::before,
.mhub-cm .mhub_msteams_error.error::before {
	content: '';
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background-color: #b45309;

	/* An exclamation in a disc, drawn as a mask so the colour above shows
	   through it and the two never disagree. */
	-webkit-mask: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.2 1.2 0 0 1 1.2 1.3l-.35 5a.85.85 0 0 1-1.7 0l-.35-5A1.2 1.2 0 0 1 12 7Zm0 9.2a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6Z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 5a1.2 1.2 0 0 1 1.2 1.3l-.35 5a.85.85 0 0 1-1.7 0l-.35-5A1.2 1.2 0 0 1 12 7Zm0 9.2a1.3 1.3 0 1 1 0 2.6 1.3 1.3 0 0 1 0-2.6Z'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

/*
 * The message is an `h3` in the markup and is not a heading. Reset to body
 * text: at 16px in a heading's weight it was the loudest line on a screen whose
 * actual heading is "Add New Meeting".
 */
.mhub-cm .mhub_zoom_error.error h3,
.mhub-cm .mhub_googlem_error.error h3,
.mhub-cm .mhub_msteams_error.error h3 {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
	color: #7c3f06;
}

/* The "Configure Zoom" link is the way out of the state the notice describes,
   so it is a control rather than a word with an underline. */
.mhub-cm .mhub_zoom_error.error h3 a,
.mhub-cm .mhub_googlem_error.error h3 a,
.mhub-cm .mhub_msteams_error.error h3 a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	margin-left: 2px;
	padding: 0 10px;
	border-radius: 999px;
	background: #b45309;
	font-size: 12.5px;
	font-weight: 600;
	color: #ffffff;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 150ms ease;
}

.mhub-cm .mhub_zoom_error.error h3 a:hover,
.mhub-cm .mhub_zoom_error.error h3 a:focus,
.mhub-cm .mhub_zoom_error.error h3 a:focus-visible,
.mhub-cm .mhub_zoom_error.error h3 a:active,
.mhub-cm .mhub_googlem_error.error h3 a:hover,
.mhub-cm .mhub_googlem_error.error h3 a:focus,
.mhub-cm .mhub_googlem_error.error h3 a:focus-visible,
.mhub-cm .mhub_googlem_error.error h3 a:active,
.mhub-cm .mhub_msteams_error.error h3 a:hover,
.mhub-cm .mhub_msteams_error.error h3 a:focus,
.mhub-cm .mhub_msteams_error.error h3 a:focus-visible,
.mhub-cm .mhub_msteams_error.error h3 a:active {
	background: #8a3f07;
	color: #ffffff;
	text-decoration: none;
	box-shadow: none;
}

.mhub-cm .mhub_zoom_error.error h3 a:focus-visible,
.mhub-cm .mhub_googlem_error.error h3 a:focus-visible,
.mhub-cm .mhub_msteams_error.error h3 a:focus-visible {
	outline: 2px solid #b45309;
	outline-offset: 2px;
}

/*
 * The dismiss, as a quiet icon rather than a red glyph.
 *
 * It was crimson and bold, which made the loudest thing in the notice the
 * control for making the notice go away. 28px face inside a 40px target - the
 * span is not a button, so it gets its hit area from padding.
 */
.mhub-cm .mhub_zoom_error.error .close-icon,
.mhub-cm .mhub_googlem_error.error .close-icon,
.mhub-cm .mhub_msteams_error.error .close-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #a16207;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.mhub-cm .mhub_zoom_error.error .close-icon:hover,
.mhub-cm .mhub_googlem_error.error .close-icon:hover,
.mhub-cm .mhub_msteams_error.error .close-icon:hover {
	background: rgba( 180, 83, 9, 0.12 );
	color: #7c3f06;
}

@media ( prefers-reduced-motion: reduce ) {
	.mhub-cm .mhub_zoom_error.error h3 a,
	.mhub-cm .mhub_googlem_error.error h3 a,
	.mhub-cm .mhub_msteams_error.error h3 a,
	.mhub-cm .mhub_zoom_error.error .close-icon,
	.mhub-cm .mhub_googlem_error.error .close-icon,
	.mhub-cm .mhub_msteams_error.error .close-icon {
		transition: none;
	}
}

/*
 * The primary action, directly under the two required fields.
 *
 * It used to sit at the foot of a 2199px column, which is why a floating
 * duplicate had to follow the reader down the page. With the optional fields
 * collapsed, the form is complete at this point for anybody taking the
 * defaults, so the button belongs here and the follower is gone.
 */
.mhub-cm-primary {
	/*
	 * Lines up with the inputs, not the labels.
	 *
	 * Every row in this form is a flex pair: a 30% label column, a 25px gutter,
	 * then the control. A button outside that structure collapses to the far
	 * left and reads as though it belongs to the label above it, which is
	 * exactly how it first rendered.
	 */
	margin: 8px 0 28px;
	padding-left: calc( 30% + 25px );
}

/*
 * The button's own styling has to be restated here.
 *
 * `.save-meeting` in _common_form_style.scss is nested inside
 * `.mhub-form-actions`, so a button that leaves that wrapper leaves its
 * appearance behind and falls back to the browser default. Values are copied
 * from that rule so the two stay identical; the states below are the part it
 * never had.
 */
.mhub-cm-primary .save-meeting {
	min-width: 150px;
	padding: 13px 16px;
	border: 0;
	border-radius: 8px;
	background-color: #085df2;

	/* White on #085df2 measures 5.06:1. */
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: rgba( 10, 10, 10, 0.12 ) 0 2px 4px 0;
	transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.mhub-cm-primary .save-meeting:hover {
	background: #004dd6;
	color: #fff;
	box-shadow: rgba( 10, 10, 10, 0.2 ) 0 2px 4px 0;
	transform: translateY( -1px );
}

.mhub-cm-primary .save-meeting:focus-visible {
	outline: 2px solid #0f172a;
	outline-offset: 2px;
}

.mhub-cm-primary .save-meeting:active {
	background: #0043bb;
	transform: translateY( 0 );
	box-shadow: inset 0 1px 3px rgba( 0, 0, 0, 0.25 );
}

/*
 * Disabled is the saving state, so it must stay readable rather than fading to
 * grey: it is on screen while somebody waits, and an unreadable button during a
 * wait reads as a failure.
 */
.mhub-cm-primary .save-meeting:disabled {
	background: #7ba5f0;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

@media ( max-width: 782px ) {

	/* The label column stacks below this width, so the offset would strand the
	   button in the middle of the screen. */
	.mhub-cm-primary {
		padding-left: 0;
	}
}

/*
 * A collapsed group of optional fields.
 *
 * Card-shaped rather than a bare row, because three of these sit under the
 * primary action and a run of underlined rows would read as a list of links to
 * elsewhere. A card reads as a container: what is inside is still this page.
 */
.mhub-disc {
	margin: 0 0 10px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mhub-disc.is-open {
	border-color: #cbd5e1;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
}

.mhub-disc__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;

	/* Fitts: the whole row is the target, and it clears 44px on every screen. */
	min-height: 56px;
	padding: 12px 16px;
	border: 0;
	background: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.mhub-disc__head:hover,
.mhub-disc__head:focus-visible {
	background: #f8fafc;
}

.mhub-disc__head:focus-visible {
	outline: 2px solid #085df2;
	outline-offset: -2px;
}

.mhub-disc__head:active {
	background: #f1f5f9;
}

/*
 * Points right when closed and down when open, which is the one convention a
 * reader does not have to be taught. Doherty: 180ms, well inside the 260ms
 * where a transition starts reading as lag.
 */
.mhub-disc__chevron {
	flex: 0 0 auto;
	color: #64748b;
	transition: transform 180ms cubic-bezier( 0.2, 0.8, 0.3, 1 );
}

.mhub-disc.is-open .mhub-disc__chevron {
	transform: rotate( 90deg );
}

.mhub-disc__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mhub-disc__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 18px;

	/* Slate-900. Measured 16.7:1 on white. */
	color: #0f172a;
}

/*
 * Slate-600, measured 7.6:1 on white and 7.2:1 on the hovered #f8fafc. The
 * obvious slate-400 would be 2.9:1 and fail, and this line is the only thing
 * telling somebody which group holds the password.
 */
.mhub-disc__summary {
	font-size: 12.5px;
	line-height: 16px;
	color: #475569;
}

/*
 * The panel keeps the form's own column layout. Padding-top is 0 because the
 * first field inside brings its own, and doubling them opened a gap that made
 * the group look emptier than it is.
 */
.mhub-disc__panel {
	padding: 0 16px 8px;
	border-top: 1px solid #eef2f7;
}

.mhub-disc__panel[hidden] {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.mhub-disc,
	.mhub-disc__head,
	.mhub-disc__chevron {
		transition: none;
	}
}

/* ============================================================================
 * The form surface
 *
 * The comment at the top of this file says it stops at the picker rather than
 * half-restyling the forms. This section is the other half: the rows, the
 * controls, and the button that commits them.
 *
 * Written with Tailwind's `@apply` against the theme in tailwind.config.js, so
 * the brand ramp and the `edge` boundary colour have one definition rather than
 * a copy here and a copy there. Webpack runs postcss-loader over `.css` as well
 * as `.scss`, so `@apply` resolves in this file exactly as it does in
 * tailwind.scss. Geometry stays as plain declarations: `@apply` with arbitrary
 * values reads as noise and carries no token.
 *
 * `important: '.mhub-tw'` in the config scopes utility *classes* behind that
 * wrapper, but `@apply` copies declarations without it, so these rules win on
 * specificity alone. That is what the `.mhub-cm` prefix on every selector below
 * is for, and it is also what keeps this off Platform Settings: the same
 * components render there, and those screens are not part of this change.
 *
 * Specificity was counted before each rule was written, because
 * _common_form_style.scss nests four deep and puts `!important` on two widths.
 * Where the old declaration is `!important`, the new one has to be too - an
 * important declaration beats a normal one regardless of specificity, and only
 * then does specificity decide between the two.
 * ========================================================================== */

.mhub-cm .mhub-jitsi-meeting-form,
.mhub-cm .mhub-zoom-meeting-form,
.mhub-cm .mhub-googlem-meeting-form,
.mhub-cm .mhub-msteams-meeting-form {
	margin-top: 28px;
}

/* --------------------------------------------------------------- the card - */

/*
 * Two selectors because there are two shapes of form on these screens.
 *
 * `.mhub-cm-req` is the wrapper JitsiForm puts around its two required fields
 * and the primary button. Everything else in that form is inside a disclosure,
 * which is already a card, so carding the whole form would nest a card in a
 * card.
 *
 * The `:has()` selector catches the other nine components - four create forms
 * and five edit forms - which have no disclosure groups and are a flat column
 * of twenty to thirty rows. Those rows were sitting directly on the page grey
 * while the optional groups on the Jitsi form were cards, which inverted the
 * weight: the fields somebody must fill in looked lighter than the ones they
 * can ignore.
 *
 * `:has()` rather than a class because it needs no edit to nine files, and this
 * file already relies on it for the platform card's focus ring.
 */
.mhub-cm .mhub-cm-req,
.mhub-cm .form-wrapper:not( :has( .mhub-disc ) ) {
	@apply mhub-bg-white mhub-border mhub-border-solid mhub-border-slate-200 mhub-rounded-xl;

	box-sizing: border-box;
	max-width: 780px;
	margin-bottom: 18px;
	padding: 22px 24px 24px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.04 );
}

/*
 * The disclosure groups share the card's cap, so every left and right edge on
 * the screen agrees.
 *
 * `box-sizing` is not decoration here. `.mhub-disc` carries a 1px border and is
 * content-box by default, so the same `max-width: 780px` measured 782px on the
 * group and 780px on the card - the two right edges landed at 1002 and 1000,
 * which is exactly the kind of two-pixel drift that reads as "slightly off"
 * without anybody being able to say why.
 */
.mhub-cm .mhub-disc {
	box-sizing: border-box;
	max-width: 780px;
}

/*
 * The panel's rows line up with the card's rows.
 *
 * Measured before this rule: the group's labels started at 252 and the card's
 * at 260, and its controls at 516 against 524 - a consistent 8px, because the
 * panel indented its rows by 16px and the card by 24px. Two label columns eight
 * pixels apart on one screen is a vertical edge that almost lines up, which is
 * worse than one that plainly does not.
 */
.mhub-cm .mhub-disc__panel {
	padding-left: 24px;
	padding-right: 24px;
}

/* ---------------------------------------------------------------- the row - */

/*
 * A fixed 240px label column, not 30%.
 *
 * The percentage is the defect this whole section exists to fix. On the 1420px
 * column this screen uses it made the label about 420px wide and left roughly
 * 570px of every row empty, so the wider somebody's admin screen, the further a
 * field travelled from the label naming it. 240px is enough for every label
 * these forms carry at 13px, and it stays 240px.
 *
 * `minmax( 0, 1fr )` rather than `1fr`: a grid track's default `min-width: auto`
 * refuses to shrink below its content, and the date picker and the WYSIWYG both
 * have intrinsic widths that would push the row wider than its card.
 */
.mhub-cm .mhub-form-group {
	display: grid;
	grid-template-columns: 240px minmax( 0, 1fr );
	gap: 24px;
	align-items: start;
	width: 100%;
	padding: 14px 0;
}

/* The rows are separated by a hairline rather than by 30px of air, which is what
   tells a long group of switches apart from a short one. */
.mhub-cm .mhub-col-lg-12 {
	margin-top: 0;
	border-top: 1px solid #f1f5f9;
}

.mhub-cm .mhub-col-lg-12:first-child,
.mhub-cm .mhub-disc__panel .mhub-col-lg-12:first-child {
	border-top: 0;
}

.mhub-cm .mhub-cm-req .mhub-col-lg-12:first-child .mhub-form-group {
	padding-top: 0;
}

/* 11px, so the label's first line sits optically centred against a 44px control
   rather than mathematically level with the top of its box. */
.mhub-cm .mhub-form-group > label {
	width: auto !important;
	margin-right: 0;
	padding-top: 11px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;

	/* Slate-900, 16.7:1 on white. */
	@apply mhub-text-slate-900;
}

/*
 * Slate-600: 7.58:1 on white. The rule it replaces was #888 at 3.54:1, which
 * fails AA on the one line that explains what a field does.
 */
.mhub-cm .mhub-form-group > label small.description {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	@apply mhub-text-slate-600;
}

/* The components render the `small` whether or not there is a description to put
   in it, and an empty one still spends its margin. */
.mhub-cm .mhub-form-group > label small.description:empty {
	display: none;
}

.mhub-cm .mhub-form-group .input-wrapper,
.mhub-cm .mhub-form-group .editor-wrapper,
.mhub-cm .mhub-form-group .thumbnail-wrapper,
.mhub-cm .mhub-form-group .multi-checkbox-wrapper {
	width: auto;
	min-width: 0;
}

/* ----------------------------------------------------------- the controls - */

/*
 * `#8492A6`, the `edge` token: 3.16:1 on white, the lightest neutral that still
 * clears the 3:1 WCAG asks of a control's boundary. The border it replaces was
 * #d1dbe8 at 1.40:1 - a field whose edge nobody can see is a field nobody can
 * tell is a field.
 *
 * 44px minimum height, up from 40. `min-height` rather than `height` so the
 * WYSIWYG and the textarea can still grow.
 */
.mhub-cm .mhub-form-group .input-wrapper input[type="text"],
.mhub-cm .mhub-form-group .input-wrapper input[type="datetime-local"],
.mhub-cm .mhub-form-group .input-wrapper input[type="time"],
.mhub-cm .mhub-form-group .input-wrapper input[type="number"],
.mhub-cm .mhub-form-group .input-wrapper input[type="password"],
.mhub-cm .mhub-form-group .input-wrapper input[type="email"],
.mhub-cm .mhub-form-group .input-wrapper select,
.mhub-cm .mhub-form-group .input-wrapper textarea {
	@apply mhub-border mhub-border-solid mhub-border-slate-300 mhub-bg-white mhub-text-slate-900;

	box-sizing: border-box;
	width: 100%;
	max-width: 460px;
	min-height: 44px;
	height: auto;
	margin: 0;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.mhub-cm .mhub-form-group .input-wrapper select {
	padding-right: 34px;
	background-position: right 12px center;
}

.mhub-cm .mhub-form-group .input-wrapper textarea {
	min-height: 110px;
}

/* Never resting-state only. A field that looks the same under the pointer as it
   does at rest gives no sign it can be typed in. The pair is slate-300 at rest
   and #8492a6 (3.16:1) on hover, matching the All Meetings toolbar. */
.mhub-cm .mhub-form-group .input-wrapper input[type="text"]:hover,
.mhub-cm .mhub-form-group .input-wrapper input[type="number"]:hover,
.mhub-cm .mhub-form-group .input-wrapper input[type="password"]:hover,
.mhub-cm .mhub-form-group .input-wrapper input[type="email"]:hover,
.mhub-cm .mhub-form-group .input-wrapper select:hover,
.mhub-cm .mhub-form-group .input-wrapper textarea:hover {
	border-color: #8492a6;
}

/*
 * A ring, not just a hue change on the border.
 *
 * The old rule swapped #d1dbe8 for #1c6dff and set `box-shadow: none`, so the
 * only signal that a field had focus was a one-pixel colour change - invisible
 * to most people, and to all of them in bright light.
 */
.mhub-cm .mhub-form-group .input-wrapper input[type="text"]:focus,
.mhub-cm .mhub-form-group .input-wrapper input[type="datetime-local"]:focus,
.mhub-cm .mhub-form-group .input-wrapper input[type="time"]:focus,
.mhub-cm .mhub-form-group .input-wrapper input[type="number"]:focus,
.mhub-cm .mhub-form-group .input-wrapper input[type="password"]:focus,
.mhub-cm .mhub-form-group .input-wrapper input[type="email"]:focus,
.mhub-cm .mhub-form-group .input-wrapper select:focus,
.mhub-cm .mhub-form-group .input-wrapper textarea:focus {
	@apply mhub-border-brand;

	outline: none;
	box-shadow: 0 0 0 3px rgba( 8, 93, 242, 0.18 );
}

/* The date picker sets its own 400px width four levels deep, which would leave
   one control on the screen a different width from every other. */
.mhub-cm .mhub-form-group .input-wrapper .react-datepicker-wrapper,
.mhub-cm .mhub-form-group .input-wrapper .rdt {
	display: block;
	width: 100%;
	max-width: 460px;
}

.mhub-cm .mhub-form-group .input-wrapper .react-datepicker-wrapper .react-datepicker__input-container input[type="text"] {
	width: 100%;
	max-width: 460px;
}

.mhub-cm .mhub-form-group .editor-wrapper .rsw-editor {
	width: 100%;
	max-width: 460px;
	border-radius: 10px;
}

/* ------------------------------------------------------------ the switch -- */

.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Hidden from sight, never from the keyboard.
 *
 * The rule this overrides is `display: none !important`, which takes the
 * checkbox out of the accessibility tree and out of the tab order with it. The
 * visible track is a `<label>`, and a label is not focusable, so every switch on
 * these screens was mouse-only: no tab stop, no ring, no space bar. Clipping the
 * input instead keeps the native control doing its job while the label carries
 * the appearance.
 *
 * `!important` because the declaration being overridden is important; the
 * `.mhub-cm` prefix is what decides between the two.
 */
.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field input[type="checkbox"] {
	display: block !important;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/*
 * 44x26 rather than 65x35, and the knob loses its grey drop shadow. Those
 * proportions and that shadow are the two details that dated the control most.
 * The track is the `edge` token at 3.16:1, because an off switch is still a
 * boundary somebody has to be able to see.
 */
.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field label {
	@apply mhub-bg-edge;

	width: 44px !important;
	height: 26px;
	border-radius: 999px;
	transition: background-color 180ms ease;
}

.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field label::after {
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	box-shadow: 0 1px 2px rgba( 15, 23, 42, 0.25 );
}

.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field input[type="checkbox"]:checked + label {
	@apply mhub-bg-brand;
}

.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field input[type="checkbox"]:checked + label::after {
	left: 21px;
}

/* The ring the control never had, now that there is something to put it on. */
.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field input[type="checkbox"]:focus-visible + label {
	outline: 2px solid #085df2;
	outline-offset: 3px;
}

/* ----------------------------------------------------------- the Pro pill - */

/*
 * Nothing here any more. The Pro badge is `common/MhProBadge`, which brings its
 * own ground, type and padlock in Tailwind utilities and needs no help from
 * this file.
 *
 * What was here re-coloured a `.mhub-pro-tag` span - an amber pill that six
 * screens each spelled out for themselves. No element has carried that class
 * since MhProBadge replaced them, so this block matched nothing and was
 * describing a badge the plugin no longer draws.
 *
 * Its siblings in `scss/dashboard/_common_form_style.scss` are dead for the
 * same reason, including the `.input-pro` / `.select-pro` offsets nested under
 * them - which means the badge MhInput and MhSelect position with those class
 * names is currently getting no offset at all. That is a pre-existing gap on
 * the old-shell screens, not something to fix from here.
 */

/* ------------------------------------------------------- the primary row - */

/*
 * The `calc( 30% + 25px )` offset is gone with the percentage that produced it.
 *
 * That rule positioned the button by arithmetic against a width declared in a
 * different file, which is why it floated mid-screen under nothing. The button
 * now sits at the card's own left edge, aligned with the labels, under a rule
 * that separates committing the form from filling it in.
 */
.mhub-cm .mhub-cm-primary {
	margin: 20px 0 0;
	padding-left: 0;
	padding-top: 18px;
	border-top: 1px solid #f1f5f9;
}

/*
 * One primary button for the plugin.
 *
 * Same height, radius, weight and states as `.setting-save-button` on Platform
 * Settings, so the control that commits a change looks the same wherever the
 * change is being made. Covers `.mhub-cm-primary .save-meeting` on the Jitsi
 * form and `.mhub-form-actions .save-meeting` on the other nine.
 */
.mhub-cm .mhub-cm-primary .save-meeting,
.mhub-cm .mhub-form-actions .save-meeting {
	@apply mhub-bg-brand mhub-border mhub-border-solid mhub-border-brand;

	box-sizing: border-box;
	width: auto;
	min-width: 150px;
	min-height: 44px;
	margin-top: 0;
	padding: 11px 20px;
	border-radius: 10px;

	/* White on #085df2 measures 5.44:1. */
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.mhub-cm .mhub-cm-primary .save-meeting:hover,
.mhub-cm .mhub-form-actions .save-meeting:hover {
	background: #0a4bc4;
	border-color: #0a4bc4;
	color: #fff;
	box-shadow: none;
	transform: none;
}

.mhub-cm .mhub-cm-primary .save-meeting:focus-visible,
.mhub-cm .mhub-form-actions .save-meeting:focus-visible {
	outline: 2px solid #0f172a;
	outline-offset: 2px;
	color: #fff;
}

.mhub-cm .mhub-cm-primary .save-meeting:active,
.mhub-cm .mhub-form-actions .save-meeting:active {
	background: #08409e;
	border-color: #08409e;
	transform: translateY( 1px );
	box-shadow: none;
}

/*
 * Disabled is the saving state. It stays readable rather than fading out,
 * because it is on screen while somebody is waiting and an unreadable button
 * during a wait reads as a failure. #55617a on #c6d2e6 measures 4.63:1.
 */
.mhub-cm .mhub-cm-primary .save-meeting:disabled,
.mhub-cm .mhub-form-actions .save-meeting:disabled {
	background: #c6d2e6;
	border-color: #c6d2e6;
	color: #55617a;
	cursor: not-allowed;
	transform: none;
}

/*
 * The floating duplicate of the save button, still rendered by the nine forms
 * that have no disclosure groups. Removing it changes behaviour rather than
 * appearance, so it is out of scope here and only kept from looking broken
 * against the new card: it clears the column rather than sitting over it.
 */
.mhub-cm .mhub-form-actions.sticky-save-btn {
	top: 120px;
	right: 24px;
}

/* --------------------------------------------------------- the wide view - */

@media ( min-width: 783px ) {

	/* The panel brings its own 16px indent, so its rows do not need the card's
	   as well. */
	.mhub-cm .mhub-disc__panel .mhub-form-group {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ------------------------------------------------------- the narrow view - */

@media ( max-width: 782px ) {

	/*
	 * One column, label above field. The same breakpoint `.mhub-cm-primary`
	 * already used, and it also covers the 768px stack in the SCSS.
	 */
	.mhub-cm .mhub-form-group {
		display: grid;
		grid-template-columns: minmax( 0, 1fr );
		gap: 8px;
	}

	.mhub-cm .mhub-form-group > label {
		width: 100% !important;
		margin-bottom: 0;
		padding-top: 0;
	}

	.mhub-cm .mhub-form-group .input-wrapper input[type="text"],
	.mhub-cm .mhub-form-group .input-wrapper input[type="datetime-local"],
	.mhub-cm .mhub-form-group .input-wrapper input[type="time"],
	.mhub-cm .mhub-form-group .input-wrapper input[type="number"],
	.mhub-cm .mhub-form-group .input-wrapper input[type="password"],
	.mhub-cm .mhub-form-group .input-wrapper input[type="email"],
	.mhub-cm .mhub-form-group .input-wrapper select,
	.mhub-cm .mhub-form-group .input-wrapper textarea {
		max-width: none !important;
	}

	.mhub-cm .mhub-cm-req,
	.mhub-cm .form-wrapper:not( :has( .mhub-disc ) ) {
		padding: 16px;
	}

	.mhub-cm .mhub-cm-primary .save-meeting,
	.mhub-cm .mhub-form-actions .save-meeting {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.mhub-cm .mhub-form-group .input-wrapper input,
	.mhub-cm .mhub-form-group .input-wrapper select,
	.mhub-cm .mhub-form-group .input-wrapper textarea,
	.mhub-cm .mhub-form-group .input-wrapper .mhub-switch-field label,
	.mhub-cm .mhub-cm-primary .save-meeting,
	.mhub-cm .mhub-form-actions .save-meeting {
		transition: none;
	}
}

/* ------------------------------------------------- a field with a gap ---- */

/*
 * The control a message is pointing at.
 *
 * Written here rather than as a Tailwind utility on the input, because the
 * input already carries one shadow utility and a second of the same kind on one
 * element is emitted in Tailwind's order, not the order of the class string.
 * Which ring won would not have been the markup's decision. The duration
 * selects hit exactly this with two arbitrary widths.
 *
 * `input[aria-invalid]:focus` is (0,3,1) against the focus utility's (0,3,0),
 * so it wins on specificity rather than on which stylesheet happens to load
 * second.
 *
 * The red survives focus. A field that turns blue the moment you click into it
 * stops saying anything is wrong at exactly the moment you are looking at it.
 *
 * #B42318 on white is 6.05:1, and it is never the only carrier: the sentence
 * under the label says what is missing.
 */
.mhub-tw input[aria-invalid="true"],
.mhub-tw input[aria-invalid="true"]:hover {
	box-shadow:
		0 0 0 1px #b42318,
		0 1px 2px 0 rgba( 15, 23, 42, 0.04 );
}

.mhub-tw input[aria-invalid="true"]:focus {
	box-shadow:
		0 0 0 1px #b42318,
		0 0 0 3px rgba( 180, 35, 24, 0.22 );
}

/* ------------------------------------------------ the switch's own input - */

/*
 * The real checkbox under every kit switch, kept invisible by something
 * wp-admin cannot outrank.
 *
 * The switch draws a 44x24 pill and lays the native checkbox over it at 44x44
 * with `mhub-opacity-0`, so the control keeps its label association, its
 * space-bar toggle and its place in the tab order. That utility compiles to
 * `.mhub-tw .mhub-opacity-0` at (0,2,0). wp-admin's forms.css carries
 * `input[type="checkbox"]:disabled` at (0,2,1), and an element beats nothing,
 * so on every *disabled* switch WordPress won and set opacity back to 0.7.
 *
 * What that looked like: wp-admin's own checkbox, blown up to 44x44 by the
 * utilities meant to size an invisible hit area, painted over the pill with its
 * grey ground, its 4px radius and its border. A rounded grey box with a pale
 * disc in it, where a switch should be - and only ever on the Pro-locked rows,
 * which is why it read as "this feature is broken" rather than "this stylesheet
 * lost".
 *
 * Every state is named because the win has to hold in all of them, and the
 * appearance reset is here so nothing of WordPress's paint can come back if a
 * future release moves the opacity rule somewhere else. (0,4,1) against (0,2,1).
 *
 * The house switch on Platform Settings never had this: it hides its input from
 * `.mhub-sl-group .mhub-form-group .input-wrapper .mhub-switch-field
 * input[type="checkbox"]`, which is (0,4,2) and was already out of reach.
 */
.mhub-tw input[type="checkbox"].mhub-sw-input,
.mhub-tw input[type="checkbox"].mhub-sw-input:hover,
.mhub-tw input[type="checkbox"].mhub-sw-input:focus,
.mhub-tw input[type="checkbox"].mhub-sw-input:checked,
.mhub-tw input[type="checkbox"].mhub-sw-input:disabled,
.mhub-tw input[type="checkbox"].mhub-sw-input:checked:disabled {
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* wp-admin draws the tick as a `::before` glyph, which an appearance reset does
   not remove on its own. */
.mhub-tw input[type="checkbox"].mhub-sw-input::before {
	content: none;
}

/* ------------------------------------------------------- back, on create - */

/*
 * The breadcrumb sits directly on the toolbar it precedes.
 *
 * `.mhub-back` carries a 12px bottom margin for the screens where a heading
 * follows it on its own line. On the wizard the heading moved into the toolbar,
 * so what follows is a 44px row of buttons, and 12px on top of the control's
 * own 10px of internal padding measured 36px of white between a 13px label and
 * the title under it. That is the gap you would leave between two sections,
 * not between a page's name and the way back out of it.
 *
 * Zero here, not a smaller number: the control is a 34px target around a 13px
 * label, so it brings roughly 10px of its own space with it, and that is the
 * separation. Scoped to `.mhub-cm` at (0,2,0), so every other screen keeps the
 * margin it was built with.
 */
.mhub-cm .mhub-back {
	margin-bottom: 0;

	/*
	 * Pulled 4px further left so the chevron's ink lands on the title's ink.
	 *
	 * `.mhub-back` already pulls itself -8px, which puts its padding edge on the
	 * page's left edge - and that is where the alignment stopped being true. The
	 * chevron is a 14px box holding a path that runs from x=5.3 to x=9.9 of a
	 * 16-unit viewBox, so its stroke starts about 3.8px inside its own box.
	 * Measured on the live page: box left 212 for both, chevron ink at 215.8
	 * against the title's 212. Two lines of a header, one above the other,
	 * starting on visibly different edges.
	 *
	 * -12px lands the ink at 211.8. Boxes are what CSS aligns; ink is what the
	 * eye aligns, and only the second one is the reason anybody looks at a left
	 * edge. Same lesson as the 1px icon nudge elsewhere in this admin: the
	 * number has to be measured, not reasoned about.
	 */
	margin-left: -12px;
}

/* ------------------------------------------- the wizard column, and the -- */
/* ------------------------------------------- footer band that follows it - */

/*
 * One number for the wizard's width, and the Pro band reads it too.
 *
 * The wizard caps itself at the rail plus the gutter plus the panel: 236 + 18 +
 * 760. Everything on the screen ends on that right edge - the toolbar, the
 * hairline under the cards, the Create button.
 *
 * Everything except the Pro band, which is printed by PHP into `#wpfooter` and
 * laid out by `.mhub-uc-align`: capped at 1420, centred, 32px gutters. That is
 * the right rule for All Meetings, where the content really is that wide. On
 * the wizard it left the band ending at 1388 while the cards above it ended at
 * 1226 - measured - so the last thing on the page was the one thing that did
 * not line up with the rest.
 *
 * The left edges already agreed at 212, because both start from the same page
 * gutter. Only the right had to come in.
 *
 * `:has()` rather than a body class set from React, because the condition is
 * "is a wizard on screen", and that is a fact about the DOM rather than state
 * worth keeping. It also stays true through the platform picker: choose Jitsi,
 * the wizard unmounts, and the band goes back to full width on its own, which
 * is correct - the old shell really is that wide. Browsers without `:has()`
 * (Chrome under 105) keep the old full-width band, which is a wide card rather
 * than a broken one.
 */
/*
 * The three numbers the whole wizard is built from, in one place.
 *
 * The rail, the gutter and the panel. Everything else is derived: the wrapper
 * caps at their sum, the grid uses two of them as its columns, and the Pro band
 * in the footer measures its inset from the first two. They were written out
 * three times - a Tailwind arbitrary value for the grid, a literal 1014 here,
 * and the band copying that literal - which is three chances to retune the
 * column and leave the band behind.
 */
:root {
	--mhub-wiz-rail-w: 236px;
	--mhub-wiz-gap: 18px;
	--mhub-wiz-panel-w: 760px;
	--mhub-wiz-w: calc( var( --mhub-wiz-rail-w ) + var( --mhub-wiz-gap ) + var( --mhub-wiz-panel-w ) );
}

/*
 * The label column, and how far a nested group steps in from it.
 *
 * A group of rows that exists only because a switch above it is on has to read
 * as belonging to that switch. Indenting it is the clearest way to say so, and
 * the naive way to indent - pad the group - moves its controls right along with
 * its labels, which breaks the one straight edge running down the card that the
 * eye actually uses to scan it.
 *
 * So the step comes out of the label column instead of being added outside it:
 * the group is padded by the step, and inside the group the label column is
 * narrower by the same amount. Labels move in by 18, controls do not move at
 * all, and the column stays true from the first row of the card to the last.
 *
 * `--mhub-row-label-base` is the one place the width is written. The live value
 * is `--mhub-row-label`, which `.mhub-nest` re-derives; a custom property
 * cannot read its own inherited value, which is why there are two names rather
 * than one.
 */
:root {
	--mhub-row-label-base: 220px;
	--mhub-row-label: var( --mhub-row-label-base );
	--mhub-nest-step: 18px;
}

.mhub-nest {
	--mhub-row-label: calc( var( --mhub-row-label-base ) - var( --mhub-nest-step ) );
}

.mhub-wiz {
	max-width: var( --mhub-wiz-w );
}

.mhub-wiz-shell {
	display: grid;
	gap: var( --mhub-wiz-gap );
	align-items: start;
}

@media ( min-width: 1280px ) {

	.mhub-wiz-shell {
		grid-template-columns: var( --mhub-wiz-rail-w ) minmax( 0, var( --mhub-wiz-panel-w ) );
	}
}

/*
 * The seam between the form and the Pro band.
 *
 * Measured, the last card's painted edge sat 110px above the band, out of three
 * decisions that had never met: 14px of the card's own bottom margin, 40px from
 * `.meeting-wrapper` in the old stylesheet, and the band's own 56px. Each is
 * defensible alone and together they make a hole big enough to read as a
 * section that failed to load.
 *
 * The 56 is not wrong where it was written. It exists for screens that finish
 * on a line of text - Frontend Meetings ends on a vendor note - where less air
 * would let a dark full-width banner read as part of that paragraph. This
 * screen finishes on a bordered card with a hard edge, which is the case that
 * reasoning excludes, so it takes the smaller number.
 *
 * 32px from the card's edge to the band: the wrapper's 40 goes entirely, and
 * the band asks for 18 on top of the 14 the last card already carries. A
 * section break rather than a gap.
 */
/*
 * Two ids, because the rule being answered has two.
 *
 * _create_meeting.scss writes a bare .meeting-wrapper, but it is nested under
 * a list of sixteen page wrappers, so it compiles to
 * #meeting_hub_admin_dasboard #meeting_hub .meeting-wrapper - (2,1,0). A class
 * pair at (0,2,0) does not touch it, and neither does #wpwrap:has(...) at
 * (1,3,0), because the id count is compared before anything else. Written with
 * both structural ids it is (2,2,0) and wins on the same terms.
 */
#wpbody-content #meeting_hub .mhub-cm.meeting-wrapper {
	margin-bottom: 0;
}

#wpwrap:has( .mhub-wiz ) .mhub-uc {
	max-width: var( --mhub-wiz-w );
	--mhub-uc-gap-top: 18px;


	/* Left-aligned, not centred: `.mhub-uc-align`'s padding box already starts
	   on the page's left edge, so the band only has to stop growing rightwards.
	   Both margins are named because `auto` on the left would centre it. */
	margin-left: 0;
	margin-right: auto;
}

/* ------------------------------------ what stays put while the page moves - */

/*
 * The toolbar and the step rail both stick; the panel is what scrolls.
 *
 * Neither did before, and the rail's failure was the quieter one: it *was*
 * `position: sticky`, at `top: 16px`, which is underneath wp-admin's own bar.
 * That bar is `position: fixed` and 32px tall, so the rail stuck itself half
 * behind it and the first step's name was sliced off - measured, rail top 16
 * against an admin bar occupying 0 to 32. Sticky was working perfectly and
 * parking the card in the one place it could not be read.
 *
 * The toolbar simply left: at 230px of scroll its top was at -58, so Create
 * meeting - the reason the screen exists - was gone by the second field of a
 * long step, and getting back to it meant scrolling to the top.
 *
 * Offsets are derived from WordPress's own `--wp-admin--admin-bar--height`
 * rather than from 32, because that variable is what moves when the admin bar
 * changes height. The rail then clears the toolbar by stacking the bar's own
 * height on top of it, so the two never overlap at any window size.
 */
:root {
	/* 44px of action row plus the 12px this file puts above and below it. One
	   number, because the rail's offset is measured from it. */
	--mhub-wiz-bar-h: 68px;
}

.mhub-wiz-bar {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 32px );

	/* Above the cards that pass beneath it. Nothing else on this screen sets a
	   z-index, so 20 leaves room underneath rather than claiming a ceiling. */
	z-index: 20;

	/*
	 * The ground, so the cards disappear under the bar instead of through it.
	 *
	 * No line under it: the bar is the page's own colour, and a rule there was
	 * removed on purpose - see the note over TOPBAR. What separates it from the
	 * cards is the space, and the space is enough.
	 *
	 * The colour is read from the page at runtime into `--mhub-wiz-bg` (see
	 * Wizard.js). It cannot be hardcoded: no stylesheet in this plugin sets it -
	 * it comes from the admin colour scheme, so on Midnight or Coffee a fixed
	 * #f4f7ff would paint a pale blue band across a dark admin. The fallback is
	 * the default scheme's value, for the moment before the effect runs.
	 */
	background: var( --mhub-wiz-bg, #f4f7ff );

	/*
	 * Ten pixels of bleed each side, cancelled by equal padding, so the painted
	 * box is wider than the content while the content does not move. Card rings
	 * and shadows reach a couple of pixels past the card's own box, and without
	 * this they clip out from under the bar as they pass.
	 */
	margin-left: -10px;
	margin-right: -10px;
	padding: 12px 10px;
}

.mhub-wiz-rail {
	position: sticky;

	/* Under the toolbar, never behind it: admin bar, then the bar's full height,
	   then a gap of the same 12px the bar pads itself with. */
	top: calc( var( --wp-admin--admin-bar--height, 32px ) + var( --mhub-wiz-bar-h ) + 12px );
}

/*
 * Below 783px wp-admin's bar stops being fixed and scrolls away with the page,
 * so an offset for it would hold the toolbar 32px down from nothing.
 */
@media ( max-width: 782px ) {

	.mhub-wiz-bar {
		top: 0;
	}
}

/*
 * The pill row is the rail's stand-in below 1280px, so it stays put too.
 *
 * Without this the narrow layout kept the toolbar and lost the steps, which is
 * the half of the problem the rail solves on wide screens. It sits directly
 * under the bar with no gap - the two read as one header - and one z-index
 * below it, so on the short scroll where their grounds meet the bar is on top.
 *
 * `overflow-x: auto` here is what makes the pills scroll sideways, and it does
 * not break the sticky: the scroll container that matters for `position:
 * sticky` is the nearest ancestor that scrolls, and this element's own overflow
 * is not an ancestor of itself.
 */
.mhub-wiz-pills {
	position: sticky;
	top: calc( var( --wp-admin--admin-bar--height, 32px ) + var( --mhub-wiz-bar-h ) );
	z-index: 19;
	margin-left: -10px;
	margin-right: -10px;
	padding-left: 10px;
	padding-right: 10px;
	background: var( --mhub-wiz-bg, #f4f7ff );
}

@media ( max-width: 782px ) {

	.mhub-wiz-pills {
		top: var( --mhub-wiz-bar-h );
	}
}

/* ------------------------------------------------- the rich text editor -- */

/*
 * `react-simple-wysiwyg`, wearing the house control.
 *
 * Its own stylesheet is the one thing on the meeting form that still looked
 * like a different product: a 1px grey border where every other control draws a
 * ring, square 26px toolbar buttons with no hover, full-height separators
 * running the whole 40px of the bar, and a "Styles" dropdown left at the
 * browser default - 2px radius and a #949494 border, which is the one control
 * on the screen wp-admin had never been talked out of.
 *
 * Measured before: editor radius 10px against the card's 8px, toolbar buttons
 * r0, the select r2 with a native border. Every number below comes from
 * `kit/tokens.js` rather than being picked to look close.
 *
 * Not scoped to the wizard. The same editor renders on all five platforms and
 * on every edit form, so a global rule fixes the ones this pass is not looking
 * at rather than leaving them behind.
 */
.mhub-tw .rsw-editor {
	border: 0;
	border-radius: 8px;
	background: #fff;

	/* The ring INPUT uses, so the description and the agenda above it are the
	   same object. Preflight is off; a border here would also add a pixel. */
	box-shadow:
		0 0 0 1px #8492a6,
		0 1px 2px 0 rgba( 15, 23, 42, 0.04 );
	transition: box-shadow 150ms cubic-bezier( 0.4, 0, 0.2, 1 );

	/* The toolbar's own corners are square; this is what rounds them off
	   against the field's. */
	overflow: hidden;
}

.mhub-tw .rsw-editor:hover {
	box-shadow:
		0 0 0 1px #64748b,
		0 1px 2px 0 rgba( 15, 23, 42, 0.04 );
}

/*
 * The whole field lights up when the caret is in it.
 *
 * `:focus-within` rather than `:focus`, because what actually takes focus is
 * the contenteditable inside, and a halo drawn on that would sit inside the
 * frame instead of around it. This is the same two-layer halo every other
 * control on the card uses.
 */
.mhub-tw .rsw-editor:focus-within {
	box-shadow:
		0 0 0 1px #085df2,
		0 0 0 3px rgba( 59, 130, 246, 0.25 );
}

.mhub-tw .rsw-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	border: 0;
	background: #f8fafc;

	/* Inset, so the line costs the toolbar no height. */
	box-shadow: inset 0 -1px 0 #eef2f7;
}

/*
 * 28px buttons on a 6px radius: small enough that eleven of them fit without
 * the bar becoming the loudest thing in the card, big enough to hit.
 *
 * slate-600 is 7.6:1 on the toolbar's ground. The icons are drawn as text
 * glyphs by the library, so this is a text contrast, not an icon one.
 */
.mhub-tw .rsw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #475569;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 150ms cubic-bezier( 0.4, 0, 0.2, 1 ), color 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.mhub-tw .rsw-btn:hover {
	background: #e9eef5;
	color: #0f172a;
}

.mhub-tw .rsw-btn:active {
	background: #dde5ef;
}

/*
 * On, in the brand tint - the same pair the Kind chips and the current step
 * use, so "this is switched on" looks the same everywhere on the screen.
 * #0A52D0 on #EEF4FE measures 6.2:1.
 */
.mhub-tw .rsw-btn[data-active="true"],
.mhub-tw .rsw-btn[aria-pressed="true"] {
	background: #eef4fe;
	color: #0a52d0;
}

.mhub-tw .rsw-btn:focus-visible {
	outline: 2px solid #085df2;
	outline-offset: 1px;
}

/*
 * A hairline between groups, not a rule down the whole bar.
 *
 * It measured 40px tall - the toolbar's full height - which turned three
 * dividers into three columns and made a small bar look like a table.
 */
.mhub-tw .rsw-separator {
	width: 1px;
	height: 18px;
	margin: 0 5px;
	border: 0;
	background: #e2e8f0;
}

/* The "Styles" dropdown: the house select, at toolbar scale. */
.mhub-tw .rsw-dd {
	height: 28px;
	min-height: 0;
	margin: 0 0 0 2px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #0f172a;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px #8492a6;
	transition: box-shadow 150ms cubic-bezier( 0.4, 0, 0.2, 1 );
}

.mhub-tw .rsw-dd:hover {
	box-shadow: inset 0 0 0 1px #64748b;
}

.mhub-tw .rsw-dd:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 1px #085df2,
		0 0 0 3px rgba( 59, 130, 246, 0.25 );
}

/*
 * The writing area.
 *
 * 132px is a shade over four lines at this leading - enough that the field
 * reads as somewhere to write a paragraph rather than a single-line input that
 * grew a toolbar, and it matches the agenda textarea's proportions.
 *
 * It grows with what is typed, which is why the old `resize: both` handle is
 * gone from the markup: it let the field be dragged wider than its own column.
 */
.mhub-tw .rsw-ce {
	min-height: 132px;
	padding: 10px 12px;
	color: #0f172a;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
}

.mhub-tw .rsw-ce:focus {
	outline: none;
}

.mhub-tw .rsw-ce > :first-child {
	margin-top: 0;
}

.mhub-tw .rsw-ce > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------- react-select's own input - */

/*
 * The search input inside the control, stripped of wp-admin.
 *
 * react-select renders a real `<input type="text">` to type into, and wp-admin
 * styles every one of those: `input[type="text"]:focus` at (0,1,1) gives it a
 * blue border and a 1px blue box-shadow. So focusing the alternative-host field
 * drew a second, smaller blue box *inside* the control's own focus halo -
 * visible in the corner as a stray rectangle, and it also forced the input to
 * wp-admin's 40px min-height inside a 40px control.
 *
 * Nothing here can be done from the `styles` object: those land on
 * react-select's own wrappers, not on the input element. `classNamePrefix`
 * gives the stable hook, and (0,3,1) is what it takes to outrank wp-admin.
 */
.mhub-tw .mhub-rs__input-container input,
.mhub-tw .mhub-rs__input-container input:focus,
.mhub-tw .mhub-rs__input-container input:hover {
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font-family: inherit;
	font-size: 14px;
	color: #0f172a;
}

/* ------------------------------- the band belongs to the content column - */

/*
 * Once there is a rail, the Pro band starts where the cards start.
 *
 * It ran the full 1014px, so its left edge sat under a 236px column of step
 * names and the band read as the bottom of the rail as much as the bottom of
 * the form. The rail is navigation; the band is about what you are filling in.
 * Nothing in the rail's column belongs to it.
 *
 * Same move `.mhub-uc-align--inset` already makes on Integrations, which is the
 * other screen with a sidebar, and for the same reason.
 *
 * Only above 1280px. Below that the wizard is a single column and the rail is
 * not on screen at all, so there is nothing to step around and the band keeps
 * the full width.
 */
@media ( min-width: 1280px ) {

	#wpwrap:has( .mhub-wiz ) .mhub-uc {
		margin-left: calc( var( --mhub-wiz-rail-w ) + var( --mhub-wiz-gap ) );
		max-width: var( --mhub-wiz-panel-w );
	}
}

/* ----------------------------------------- the rail, which does not leave - */

/*
 * Fixed above 1280px, not sticky, and the difference is the whole point.
 *
 * `position: sticky` only travels inside its own parent, and the rail's parent
 * is the grid row - which is exactly as tall as the panel beside it. On a short
 * step (Basics is the shortest) the panel runs out before the page does, so the
 * last stretch of scrolling dragged the rail up and clipped its first row off
 * the top of the window. Measured on a 546px window: 307px of travel against
 * 554px of scroll.
 *
 * No amount of tuning fixes that, because the numbers move with the window and
 * the step. Sticky was the wrong tool: the rail is not meant to scroll with
 * anything, it is meant to stay.
 *
 * The wrapper stays in the grid and keeps its column, which is what reserves
 * the 236px and gives the card its left edge and width - measured from it at
 * runtime into `--mhub-rail-left` and `--mhub-rail-w` (see Wizard.js), because
 * a fixed element has no column to inherit from and the admin menu can collapse
 * under it.
 *
 * Both vars carry fallbacks, so if that effect never runs the card falls back
 * to its own static position and the rail is merely sticky-less rather than
 * broken.
 *
 * `max-height` plus its own scroll is the case this has to survive: six steps
 * on a laptop with a short window, where a fixed card taller than the viewport
 * would put its last step somewhere unreachable.
 */
@media ( min-width: 1280px ) {

	.mhub-wiz-rail > * {
		position: fixed;

		/*
		 * The larger of "where the column is" and "just under the toolbar".
		 *
		 * --mhub-rail-top is the wrapper's live top, republished on every
		 * animation frame while scrolling (Wizard.js). Taking the max of the two
		 * is what makes a fixed card behave: it sits in its column until the
		 * scroll brings it up to the toolbar, and pins there for the rest of the
		 * page. A constant offset instead meant the card ignored everything
		 * above it, so any admin notice put it behind the page title.
		 *
		 * The floor is measured too (--mhub-rail-floor: the toolbar's live bottom
		 * plus 12) rather than assumed from the toolbar's pinned offset. A
		 * constant floor is only correct once the toolbar has pinned; at the top
		 * of the page the toolbar sits 128px lower, so a constant would let the
		 * card settle behind the page title any time the position above went
		 * stale. Both numbers come from one measurement, so they cannot disagree.
		 *
		 * Both fallbacks matter: the floor falls back to the old constant, and
		 * the position to a large number, so before the effect has run once the
		 * max resolves to the floor rather than to the top of the window.
		 */
		top: max(
			var(
				--mhub-rail-floor,
				calc( var( --wp-admin--admin-bar--height, 32px ) + var( --mhub-wiz-bar-h ) + 12px )
			),
			var( --mhub-rail-top, 9999px )
		);
		left: var( --mhub-rail-left, auto );
		width: var( --mhub-rail-w, var( --mhub-wiz-rail-w ) );
		max-height: calc( 100vh - var( --wp-admin--admin-bar--height, 32px ) - var( --mhub-wiz-bar-h ) - 28px );
		overflow-y: auto;
	}
}

/*
 * The native select's own arrow, replaced.
 *
 * Two dropdowns on this screen are native and the rest of the controls are
 * not: the kit's listbox draws a chevron, and a native select next to it drew
 * whatever Windows felt like - a filled triangle, in a grey nobody chose. The
 * two sit one row apart on the Schedule card, which is exactly where the
 * mismatch shows.
 *
 * `appearance: none` removes the platform's arrow; the background image is the
 * same 24x24 chevron the listbox trigger renders, at slate-500, inlined
 * because a CSS file cannot reach a React component's SVG.
 *
 * The right padding lives on the utility class, not here, so a select that
 * wants a different width still lines its text up correctly.
 */
.mhub-cm-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px 16px;
}

/* The arrow is decoration, so it does not follow the text colour into the
   disabled state on its own. */
.mhub-cm-select:disabled {
	opacity: 1;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E" );
}

/*
 * The HTML toggle, out on its own at the end of the bar.
 *
 * Everything to its left changes the words; this one swaps the whole field for
 * its markup, which is a different kind of act and should not sit in the same
 * run as bold and italic. The gap does the separating, so it needs no divider.
 */
.mhub-tw .rsw-toolbar > :last-child {
	margin-left: auto;
}