/*
 * Commons: the shared base.
 *
 * Tokens, resets, type, buttons, notices, badges, forms, tables, and every
 * rule more than one surface uses. Loaded on every surface before the
 * surface's own file (commons-admin.css or commons-public.css), so a rule
 * here is the floor a surface file builds on, never the other way round.
 *
 * Two constraints shaped everything here. The calendar is read at a glance by
 * somebody who is walking, so status has to be legible from color and shape
 * without reading the text. And a conflict has to look like a problem without
 * looking like an error: most of them are warnings a human will accept, and a
 * wall of red trains people to stop looking.
 *
 * tools/css-check.php decides which file a class belongs in by which PHP
 * sources emit it; run it after moving anything.
 */

:root {
	--cm-ink: #1d2327;
	--cm-muted: #646970;
	--cm-line: #dcdcde;
	--cm-bg: #fff;
	--cm-soft: #f6f7f7;
	--cm-blue: #4f7499;
	--cm-good: #2f6b4f;
	--cm-warn: #8a6516;
	--cm-bad: #a8453a;

	/* Industry, available everywhere — the tour overlay, the assistant
	   panel and the console login all render outside .cm-root and
	   body.cm-app, so the palette has to live at the root as well. */
	--cm-steel: #4f7499;
	--cm-steel-deep: #416180;
	--cm-steel-soft: #eef6ff;
	--cm-steel-800: #2c455d;
	--cm-rule: #d4d4d7;
	--cm-ground: #f2f2f3;
	--cm-display-font: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--cm-body-font: "Barlow", system-ui, -apple-system, sans-serif;
}

.cm-wrap { max-width: 1100px; }
.cm-muted { color: var(--cm-muted); font-size: 13px; }

/* ─── Stat row ──────────────────────────────────────────────────── */
.cm-stat { background: var(--cm-bg); border: 1px solid var(--cm-line); border-inline-start: 4px solid var(--cm-line); border-radius: 3px; padding: 14px 16px; }

/* ─── Panels and layout ─────────────────────────────────────────── */

.cm-panel { background: var(--cm-bg); border: 1px solid var(--cm-line); border-radius: 3px; padding: 16px 20px; margin: 16px 0; }
.cm-panel h2 { margin-top: 0; font-size: 15px; }

/* Field hints: the "?" and the explanation it opens. */
/* The "?" belongs beside its label. Labels in these forms are block, so
   without this the button dropped to its own line between label and
   input — a floating orphan at phone widths. :has() is honored by every
   browser this admin supports; where it is not, the stacked fallback is
   merely the old look. */
.cm-wrap label:has(+ .cm-hint) { display: inline-block; margin-inline-end: 2px; }
.cm-hint {
	display: inline-grid; place-items: center;
	width: 16px; height: 16px; padding: 0; margin-inline-start: 6px;
	border: 1px solid var(--cm-muted); border-radius: 50%;
	background: transparent; color: var(--cm-muted);
	font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer;
	vertical-align: 1px;
}
.cm-hint:hover, .cm-hint[aria-expanded="true"] { border-color: var(--cm-steel); color: var(--cm-steel); }
.cm-hint:focus-visible { outline: 2px solid var(--cm-steel); outline-offset: 1px; }

/* A help line that follows a checkbox label. Inline, it ran straight on
   from the label — "On the facilities crew Puts the job list on their own
   page" reads as one broken sentence. It belongs on its own line, lined
   up under the label's text rather than its box. */
.cm-wrap label + .description,
.cm-wrap label + br + .description { display: block; margin: 2px 0 8px 24px; }
.cm-panel--alert { border-inline-start: 4px solid var(--cm-bad); }

/* ─── Week by room ──────────────────────────────────────────────── */

/* A box that scrolls sideways so the page does not: the week grid has a
   column per day and the season plan a column per week, and either can be
   wider than the screen it is on. */
.cm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ─── Conflicts ─────────────────────────────────────────────────── */

.cm-conflicts { list-style: none; margin: 8px 0 0; padding: 0; }
.cm-conflict { display: flow-root; padding: 8px 10px; border-inline-start: 3px solid var(--cm-warn); background: #fcf9e8; margin-bottom: 6px; border-radius: 0 2px 2px 0; font-size: 13px; }
.cm-conflict__kind { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cm-muted); margin-inline-end: 8px; }
.cm-clear { color: var(--cm-good); font-size: 13px; }

/* ─── Badges and tags ───────────────────────────────────────────── */

.cm-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 0; background: var(--cm-soft); border: 1px solid var(--cm-line); }
.cm-badge--approved { background: #e5f3e8; border-color: #a7d3b0; color: var(--cm-good); }
.cm-badge--requested { background: #fdf6e3; border-color: #e3d4a0; color: var(--cm-warn); }
.cm-badge--denied, .cm-badge--bad, .cm-badge--block { background: #fbeaea; border-color: #e0b0b0; color: var(--cm-bad); }
/* Room-ready on the coach's portal — the crew finished the setup, and the
   coach walking in tonight can see it. Both greens checked at 4.5:1. */
.cm-ready { display: inline-block; margin-inline-start: 6px; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #e7f4ec; color: #14572f; }
.cm-ready--wait { background: #fdf1dc; color: #7d5110; }
.cm-badge--in { background: #e5f3e8; border-color: #a7d3b0; color: var(--cm-good); }
.cm-badge--warn { background: #fdf6e3; border-color: #e3d4a0; color: var(--cm-warn); }

/* ─── Forms ─────────────────────────────────────────────────────── */
.cm-toolbar__views { margin-inline-start: auto; }

.cm-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
/* The add-a-date row: every field named above it and lined up on one grid, so a long
   room-setup name or a narrow window cannot push the end time up above its neighbors. */
.cm-date-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; align-items: end; }
.cm-date-form select, .cm-date-form input[type="datetime-local"], .cm-date-form input[type="number"] { width: 100%; box-sizing: border-box; max-width: none; }
.cm-date-form > button, .cm-date-form > .button-link { justify-self: start; }
.cm-date-form > .cm-resources, .cm-date-form > .cm-preview { grid-column: 1 / -1; }
.cm-date-form > .cm-preview:empty { display: none; }
/* order: only the admin screens draw the resources fold, but this rule has to
   stay ahead of the phone-width .cm-wrap summary rule further down, which has
   always come later and won. Loaded after base from its own file it would win
   instead, and the fold's summary would lose its 44px tap target on a phone. */
.cm-resources summary { cursor: pointer; font-weight: 600; display: inline-block; margin-inline-end: 2px; }
.cm-panel form p { margin: 0 0 12px; }
.cm-panel form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 3px; }
.cm-panel form input[type=text], .cm-panel form input[type=email], .cm-panel form input[type=number],
.cm-panel form select, .cm-panel form textarea { width: 100%; }
.cm-panel form input[type=checkbox] + span, .cm-panel form label > input[type=checkbox] { font-weight: 400; }
.cm-panel form label:has(> input[type=checkbox]) { font-weight: 400; }
.cm-repeat { background: var(--cm-soft); padding: 12px; border-radius: 3px; margin-top: 8px; }
.cm-rule-params { border: 1px solid var(--cm-line); padding: 10px 12px; margin: 0 0 12px; border-radius: 3px; }
.cm-rule-params legend { font-size: 12px; color: var(--cm-muted); padding: 0 4px; }
.cm-copy { width: 100%; font-size: 11px; color: var(--cm-muted); }

/* ─── Reports ───────────────────────────────────────────────────── */
/* Follow-up questions offered as buttons — "which room?" answered by tapping
   rather than by retyping the sentence with a name glued on the end. */
.cm-assist-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.cm-assist-choice { cursor: pointer; }

/* Spoken, never shown. Clipped rather than display:none or visibility:hidden,
   both of which take an element out of the accessibility tree entirely and
   would silence the live region this exists for. */
.cm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ─── Live conflict preview ─────────────────────────────────────── */

.cm-preview { margin-top: 8px; font-size: 13px; }
.cm-preview__offers { margin-top: 10px; }
.cm-preview__lead { margin: 0 0 6px; font-weight: 600; }
.cm-preview__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 480px; }
.cm-preview__apply { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; width: 100%; text-align: start; padding: 8px 12px; border: 1px solid var(--cm-line); border-radius: 6px; background: var(--cm-bg, #fff); cursor: pointer; font: inherit; }
.cm-preview__apply:hover, .cm-preview__apply:focus { border-color: var(--cm-accent, #4f7499); }
.cm-preview__what { grid-row: span 2; align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-steel-deep, #416180); }
.cm-preview__apply--space .cm-preview__what { color: #7a5b12; }
.cm-preview__apply--note .cm-preview__what { color: #555; }
.cm-preview__label { font-weight: 600; }
.cm-preview__why { grid-column: 2; font-size: 12px; color: #555; }
.cm-preview__held { color: var(--cm-muted); }

/* ─── Front end ─────────────────────────────────────────────────── */

.cm-button { display: inline-block; padding: 7px 14px; border: 1px solid var(--cm-line); border-radius: 3px; text-decoration: none; background: var(--cm-bg); color: var(--cm-ink); }
/* Compound, so the modifier outranks the base rule by specificity and not by the
   order two files happen to load in. */
.cm-button.cm-button--primary { background: var(--cm-blue); border-color: var(--cm-blue); color: #fff; }
.cm-notice { padding: 12px 16px; border-radius: 3px; margin-bottom: 16px; border-inline-start: 4px solid var(--cm-line); background: var(--cm-soft); }
.cm-notice--warn { border-left-color: var(--cm-warn); }
.cm-notice--bad { border-left-color: var(--cm-bad); }

/* The answer to an action low on a long page: a copy of the notice floats where the person is looking. */
.notice.cm-toast { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); z-index: 100000; box-sizing: border-box; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 10px 40px 10px 16px; background: #fff; color: #1d2327; border: 1px solid #c3c4c7; border-left: 4px solid #00a32a; border-radius: 3px; box-shadow: 0 4px 16px rgba(0, 0, 0, .22); font-size: 14px; line-height: 1.4; }
.cm-toast p { margin: 0; }
.cm-toast .notice-dismiss { display: none; }
.cm-toast__close { position: absolute; top: 2px; right: 4px; width: 32px; height: 32px; border: 0; background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.cm-toast__close:focus-visible { outline: 2px solid #2271b1; }
.cm-request-form p { margin-bottom: 14px; }
.cm-request-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.cm-request-form input, .cm-request-form select, .cm-request-form textarea { width: 100%; max-width: 480px; }
.cm-fineprint { font-size: 13px; color: var(--cm-muted); }

/* ─── Hall display ──────────────────────────────────────────────── */

.cm-board { padding: 24px; }
.cm-board h1 { font-size: 42px; margin: 0; }

/* ─── Portal ────────────────────────────────────────────────────── */

.cm-portal__table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.cm-portal__table th, .cm-portal__table td { text-align: start; padding: 8px 10px; border-bottom: 1px solid var(--cm-line); font-size: 14px; }
/* On a phone the four columns run a few pixels past the measure and the
   page scrolls sideways for them; the table scrolls inside itself instead,
   the same treatment the week grid below it gets at every width. */
@media (max-width: 600px) {
	.cm-portal__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* The campus week is seven day columns plus a room column, wider than a
   phone and wider than the portal's measure on a desktop. It scrolls
   inside this box; the page itself never scrolls sideways. */
/* No scroll box: the calendar fits its column, and a scroll box here would also
   be the thing its sticky bar sticks to. */
.cm-portal__week { margin-bottom: 16px; }

/* ─── Day sheet ─────────────────────────────────────────────────── */

@media print {
	/*
	 * WordPress admin chrome is not part of the work order. Hiding it here
	 * rather than building a separate template means the sheet can never
	 * drift from the screen somebody just checked.
	 */
	#adminmenumain, #wpadminbar, #wpfooter, .cm-noprint, .notice, #screen-meta, #screen-meta-links { display: none !important; }
	a { text-decoration: none; color: #000; }
	body { background: #fff; }
}

/* ─── Notification center ───────────────────────────────────────── */

.cm-notes { list-style: none; margin: 12px 0; padding: 0; }

/* ─── Help & tour ───────────────────────────────────────────────── */

.cm-checklist { list-style: none; margin: 8px 0; padding: 0; }
.cm-checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--cm-line); }
.cm-checklist__mark { color: var(--cm-muted); font-size: 16px; width: 20px; text-align: center; }
.cm-checklist--done .cm-checklist__mark { color: var(--cm-good); }
.cm-checklist--done a { color: var(--cm-muted); }

/* ── The topbar: deep ink, one quiet aurora ── */
.cm-shellnav { margin-bottom: 0; }
/* The letterhead a printed page starts with. Off on screen; the print rules turn it on. */
.cm-print-brand { display: none; }

/* ── The floating segmented nav ── */
.cm-shellnav {
	display: flex; flex-wrap: wrap; gap: 2px;
	margin-top: -1px; padding: 0;
	background: var(--cm-card);
	border: 1px solid var(--cm-hairline);
	border-radius: 0;
	box-shadow: none;
	width: 100%; max-width: 100%;
}

/* ── Narrow screens ── */
@media (max-width: 900px) {
	/*
	 * The labels stay. Hiding them left a row of unlabelled icons — a
	 * bell, a calendar, a building — where the badge counts survived but
	 * the meaning did not, and "which one is Setup?" is not a question a
	 * phone should ask. They stack under the icon instead, smaller, and
	 * the row wraps.
	 */
	.cm-shellnav { flex-wrap: wrap; }
}

/* ── The Help Center (front end) ── */
/* order: the Help Center is only public, but this rule has to stay ahead of
   the .cm-root block below. Both are one class deep and both set max-width,
   and the center has always rendered at .cm-root's 940px because .cm-root
   came later in the one stylesheet. Moved to its own file it would load
   after base and win, narrowing every help page to 720px. */
.cm-helpcenter { max-width: 720px; }
/* order: public only, but the .cm-root input rules below have always come
   later and kept their own shadow on the focused ask box; after base this
   one would win and the focus ring would change. */
.cm-helpcenter__ask input:focus { border-color: var(--cm-steel); box-shadow: 0 0 0 2px rgba(89,128,166,.22); outline: none; }

/* ═════════════════════════════════════════════════════════════════════
   The public design system (0.13.0)

   Everything a visitor sees renders inside .cm-root: one token block,
   one radius, 44px touch targets, and fields that look like a product
   rather than whatever the theme left behind. Scoped hard so it wins
   over theme resets without leaking out of Commons' own markup.
   ═══════════════════════════════════════════════════════════════════ */

.cm-root {
	/* The public face wears the same steel as the console — one product,
	   one palette — but keeps its generous tap targets and 16px inputs. */
	/* 4.89:1 with white text. The old #5980a6 was 4.14 and failed AA on the
	   most important button in the product — "Approve", "Send the request",
	   seventy instances of it. Anything lighter than this fails again. */
	--cmp: #4f7499;
	--cmp-dark: #416180;
	--cmp-soft: #eef6ff;
	--cmp-on: #ffffff;
	--cmr-ink: #1d1f20;
	--cmr-muted: #5d5d60;
	--cmr-line: #d4d4d7;
	--cmr-line-soft: #e7e7ea;
	--cmr-surface: #ffffff;
	--cmr-surface-2: #f2f2f3;
	--cmr-danger: #a8453a;
	--cmr-warn: #8a6516;
	--cmr-success: #2f6b4f;
	--cmr-radius: 3px;
	--cmr-tap: 44px;
	--cmr-shadow: 0 1px 2px rgba(17, 24, 39, .06);
	max-width: 940px;
	/* Left, not centered. The block already sits inside whatever column the
	   theme centers, so centering it again inside that column pushed it two
	   hundred pixels right of the page's own heading — the shortcode output
	   floating away from the title above it on every public page. Capped for
	   reading, aligned with the page it was dropped into. */
	margin: 0 auto 0 0;
	font-family: "Barlow", system-ui, -apple-system, sans-serif;
	padding: 8px 0 56px;
	box-sizing: border-box;
	color: var(--cmr-ink);
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
}
.cm-root *, .cm-root ::before, .cm-root ::after { box-sizing: inherit; }

/* Form pages read at a form's width; the calendar keeps the full measure. */
.cm-form-public.cm-root { max-width: 640px; }

/* ── Fields ── */
.cm-root label { font-weight: 600; color: var(--cmr-ink); }
.cm-root .cm-request-form p,
.cm-root .cm-report-form p,
.cm-root .cm-survey-form p,
.cm-root .cm-support-form p { margin: 0 0 18px; }
.cm-root .cm-request-form label,
.cm-root .cm-report-form label,
.cm-root .cm-survey-form label,
.cm-root .cm-support-form label { display: block; margin-bottom: 6px; font-size: 15px; }

.cm-root input[type=text],
.cm-root input[type=email],
.cm-root input[type=password],
.cm-root input[type=search],
.cm-root input[type=url],
.cm-root input[type=tel],
.cm-root input[type=number],
.cm-root input[type=date],
.cm-root input[type=time],
.cm-root input[type=datetime-local],
.cm-root select,
.cm-root textarea {
	width: 100%;
	min-height: var(--cmr-tap);
	padding: 10px 14px;
	border: 1px solid var(--cmr-line);
	border-radius: var(--cmr-radius);
	background: var(--cmr-surface);
	color: var(--cmr-ink);
	font: inherit;
	font-size: 16px; /* under 16 and iOS zooms the page into the field */
	box-shadow: var(--cmr-shadow);
}
.cm-root textarea { min-height: 96px; }
.cm-root input:focus-visible,
.cm-root select:focus-visible,
.cm-root textarea:focus-visible {
	outline: none;
	border-color: var(--cmp);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmp) 22%, transparent);
}
.cm-root ::placeholder { color: #9aa5b1; }
.cm-root input[type=checkbox], .cm-root input[type=radio] { width: auto; min-height: 0; box-shadow: none; accent-color: var(--cmp); }
/* The focus rule above trades the outline for a box-shadow ring, and the
   line above this one strips box-shadow from checkboxes — so a focused
   checkbox showed nothing at all. Tabbing the public request form, the
   seven "what should the facilities team set up?" boxes were seven stops
   with no indication of where you were. Outline for these, since the ring
   is the thing they cannot have.

   axe cannot catch this: whether focus is visible is not decidable from
   static markup, which is why the keyboard pass exists separately. */
.cm-root input[type=checkbox]:focus-visible,
.cm-root input[type=radio]:focus-visible {
	outline: 2px solid var(--cmp);
	outline-offset: 2px;
}

/* ── Buttons: 44px, brand, visible focus ── */
.cm-root .cm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--cmr-tap);
	padding: 10px 22px;
	border: 1px solid var(--cmr-line);
	border-radius: var(--cmr-radius);
	background: var(--cmr-surface);
	color: var(--cmr-ink);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var(--cmr-shadow);
	transition: background .12s, border-color .12s;
}
.cm-root .cm-button:hover { border-color: var(--cmp); color: var(--cmp-dark); }
.cm-root .cm-button--primary { background: var(--cmp); border-color: var(--cmp-dark); color: var(--cmp-on); }
.cm-root .cm-button--primary:hover { background: var(--cmp-dark); color: var(--cmp-on); }
.cm-root .cm-button:focus-visible,
.cm-root .cm-helpcenter__chip:focus-visible,
.cm-root a:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cmp) 45%, transparent);
	outline-offset: 2px;
}

/* ── Notices as toned cards ── */
.cm-root .cm-notice {
	border: 1px solid var(--cmr-line);
	border-left-width: 4px;
	border-radius: var(--cmr-radius);
	background: var(--cmr-surface);
	box-shadow: var(--cmr-shadow);
	padding: 14px 18px;
	margin: 0 0 18px;
}
.cm-root .cm-notice--warn { border-left-color: var(--cmr-warn); background: #fffbeb; }
.cm-root .cm-notice--bad { border-left-color: var(--cmr-danger); background: #fef2f2; }

.cm-root .cm-fineprint { color: var(--cmr-muted); font-size: 13px; }

/* ── Survey fieldsets read as choices, not bare boxes ── */
.cm-root fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.cm-root legend { font-weight: 600; margin-bottom: 8px; padding: 0; }

.cm-root .cm-button--ghost { background: transparent; }

/* ── Phones ── */
@media (max-width: 620px) {
	.cm-root { padding-bottom: 72px; }
	.cm-root .cm-button { width: 100%; }
}

/* ── Facility needs & work orders ── */
@media print {
	#adminmenumain, #wpadminbar, .cm-shell-chrome, .cm-signup-card__actions, .notice, #wpfooter { display: none !important; }
}

/* ── Guided tours ── */
.cm-tour { position: fixed; inset: 0; z-index: 100000; pointer-events: none; }
.cm-tour__scrim { position: absolute; inset: 0; }
.cm-tour__ring { position: fixed; border-radius: 0; box-shadow: 0 0 0 2px var(--cm-steel), 0 0 0 9999px rgba(29, 31, 32, .55); transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease; pointer-events: none; }
.cm-tour__pop { position: fixed; width: min(420px, calc(100vw - 24px)); background: #fff; border-radius: 0; border-top: 3px solid var(--cm-steel); box-shadow: 0 18px 50px rgba(29, 31, 32, .3); padding: 20px 22px 16px; pointer-events: auto; }
.cm-tour__pop.is-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 18px 50px rgba(8, 30, 34, .35), 0 0 0 9999px rgba(11, 33, 38, .55); }
.cm-tour__kicker { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-steel-deep); }
.cm-tour__pop h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; color: #10272c; }
.cm-tour__body { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #33484c; }
.cm-tour__controls { display: flex; align-items: center; gap: 8px; }
.cm-tour__spacer { flex: 1; }
.cm-tour__btn { border: 1px solid #cfe0e0; background: #fff; color: #0f5f68; border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.cm-tour__btn--primary { background: var(--cm-steel); border-color: var(--cm-steel); color: #fff; }
.cm-tour__btn:hover { filter: brightness(.97); }

/* Getting set up: quiet, gone when done. */
.cm-setup__list { margin: 6px 0 0 18px; }
.cm-setup__list li { margin: 4px 0; }

/* ── The public hub: the front door that shows the life of the place ── */

/* The assistant's "show me" — a tour, one tap from the answer. */

/* The layered answer: the plain sentence, then the exact clicks. */
/* Live figures read from the schedule: a short stack of facts, set apart
   from prose because they are the answer, not support for it. */
.cm-assist-facts { margin: 8px 0 4px; padding: 10px 12px; background: #f4f6f8; border-inline-start: 3px solid var(--cm-steel); border-radius: 0 8px 8px 0; }
.cm-assist-facts__h { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cm-steel-deep); margin-bottom: 4px; }
.cm-assist-facts__l { margin: 0; padding: 0; list-style: none; }
.cm-assist-facts__l li { margin: 3px 0; font-size: 13.5px; line-height: 1.45; color: #1d2327; font-variant-numeric: tabular-nums; }
.cm-assist-steps { margin: 8px 0 4px; padding: 10px 12px; background: #f2f8f8; border-radius: 8px; }
/* Deep steel, not steel: 11px uppercase is small text for contrast purposes
   and the lighter token only reaches 3.8:1 against this panel. */
.cm-assist-steps__h { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cm-steel-deep); margin-bottom: 4px; }
.cm-assist-steps ol { margin: 0; padding-inline-start: 18px; }
.cm-assist-steps li { margin: 3px 0; font-size: 13.5px; line-height: 1.45; }

/* Public headings share the console's condensed voice. */
.cm-root h1, .cm-root h2, .cm-root h3,
.cm-hub h2 {
	font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.cm-root .cm-button {
	font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}

/* ─── "Why this answer" in the help panel ───────────────────────────
	Folded away by default: it is the receipt, not the answer. Open it
	and the panel says which layer decided and what it read, which is
	the difference between a help box you can check and one you cannot. */
.cm-assist-why { margin-top: 10px; font-size: 12px; }
.cm-assist-why summary { cursor: pointer; color: var(--cm-steel, #4f7499); }
.cm-assist-why p { margin: 6px 0 4px; }
.cm-assist-why ul { margin: 0; padding-inline-start: 16px; }
.cm-assist-why li { margin-bottom: 3px; }
.cm-assist-why .cm-assist-why__kind { text-transform: uppercase; letter-spacing: .07em; font-size: 10px; opacity: .7; }

/* ─── The calendar pop-out ──────────────────────────────────────────
	A month cell can hold two clipped lines, and the answer to "what is
	that?" was a browser tooltip: invisible on a phone, gone the moment the
	finger moves. This is the rest of it.

	Every value is written out rather than inherited. It sits on whatever
	page the shortcode was dropped into, and a theme that styles h2, button
	and ul — which is every theme — must not get a say in a dialog. */
.cm-pop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(16, 32, 34, .55);
	overflow-y: auto;
}
.cm-pop__sheet {
	position: relative;
	box-sizing: border-box;
	width: min(560px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	color: var(--cm-ink, #17282b);
	border-radius: 12px;
	box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
	padding: 26px 28px 24px;
	font-family: var(--cm-body, var(--cm-body-font, "Barlow", system-ui, -apple-system, sans-serif));
	text-align: start;
}
.cm-pop__x {
	position: absolute; top: 12px; right: 12px;
	width: 34px; height: 34px; padding: 0;
	border: 1px solid var(--cm-rule, #d6e1e1);
	border-radius: 8px;
	background: #fff; color: var(--cm-ink, #17282b);
	font-size: 20px; line-height: 1; cursor: pointer;
}
.cm-pop__x:hover { background: var(--cm-soft, #f2f6f6); }
.cm-pop__badge {
	display: inline-block;
	font-family: var(--cm-display, var(--cm-display-font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif));
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: #fff; background: var(--cm-steel-deep, #416180);
	padding: 4px 9px; border-radius: 4px; margin: 0 0 10px;
}
.cm-pop__title {
	font-family: var(--cm-display, var(--cm-display-font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif));
	font-size: 24px; line-height: 1.15; font-weight: 700;
	margin: 0 0 6px; padding: 0; text-transform: none; color: inherit;
}
.cm-pop__when-big { font-size: 15px; font-weight: 600; color: var(--cm-steel-deep, #416180); margin: 0 0 14px; }
.cm-pop__facts { display: grid; gap: 4px; margin: 0 0 14px; }
.cm-pop__line { display: flex; gap: 10px; font-size: 14px; }
.cm-pop__label { flex: 0 0 84px; color: var(--cm-muted, #5b7276); }
.cm-pop__value { font-weight: 600; }
.cm-pop__about { font-size: 14.5px; line-height: 1.5; margin: 0 0 14px; }
.cm-pop__ticket { font-size: 13.5px; font-weight: 600; margin: 0 0 14px; color: var(--cm-warn, #97561a); }
.cm-pop__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
/* Three buttons that do the same kind of thing, two of them anchors and one
   a button element, which every theme styles differently from each other.
   Written out so all three are one control. */
.cm-pop__acts .cm-button,
.cm-pop__acts a.cm-button,
.cm-pop__acts button.cm-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 9px 14px;
	min-height: 40px;
	font-family: var(--cm-display, var(--cm-display-font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif));
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	border: 1px solid var(--cm-rule, #d6e1e1);
	border-radius: 8px;
	background: #fff;
	color: var(--cm-ink, #17282b);
	cursor: pointer;
}
.cm-pop__acts .cm-button:first-child {
	background: var(--cm-steel-deep, #416180);
	border-color: var(--cm-steel-deep, #416180);
	color: #fff;
}
.cm-pop__acts .cm-button:hover { filter: brightness(1.06); }
.cm-pop__more { border-top: 1px solid var(--cm-rule, #d6e1e1); padding-top: 14px; margin-top: 4px; }
.cm-pop__more h3 {
	font-family: var(--cm-display, var(--cm-display-font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif));
	font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--cm-muted, #5b7276); margin: 0 0 8px; padding: 0;
}
.cm-pop__more ul { list-style: none; margin: 0; padding: 0; }
.cm-pop__more li { margin: 0 0 4px; padding: 0; }
.cm-pop__jump {
	display: flex; gap: 12px; align-items: baseline;
	width: 100%; text-align: start; cursor: pointer;
	background: var(--cm-soft, #f2f6f6);
	border: 0; border-inline-start: 3px solid var(--cm-steel, #6d8ba8);
	border-radius: 0 6px 6px 0;
	padding: 8px 10px; font-size: 14px; color: inherit;
}
.cm-pop__jump:hover { background: var(--cm-brand-soft, #e6efef); }
.cm-pop__when { flex: 0 0 88px; color: var(--cm-muted, #5b7276); font-size: 13px; }
.cm-pop__what { font-weight: 600; }

/* A chip is a control now, so it has to stop looking like a browser button
   and start looking like the chip it replaced. */

@media (max-width: 560px) {
	.cm-pop { padding: 0; align-items: flex-end; }
	.cm-pop__sheet { width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; padding: 22px 18px 20px; }
	.cm-pop__acts .cm-button { width: 100%; }
	.cm-pop__line { flex-direction: column; gap: 0; }
	.cm-pop__label { flex: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.cm-pop__sheet { animation: cm-pop-in .16s ease-out; }
	@keyframes cm-pop-in { from { transform: translateY(8px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ─── The campus timeline ───────────────────────────────────────────
	Rooms down the side, the campus's own open hours across. Built from
	the Industry design direction: a single steel in four tonal steps
	rather than a color per program, because six hues stop being
	readable at about four and a calendar wearing all of them reads as
	noise. The program's own color survives on the left edge, which is
	what keeps identity when the tones repeat. */
.cm-lanes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cm-lanes__row { display: flex; align-items: center; gap: 10px; }
.cm-lanes__name {
	width: 116px;
	flex: none;
	font-size: 11.5px;
	text-align: end;
	color: var(--cm-muted, #666);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* The school day, behind everything. Deliberately a wash rather than a
   border: it is the ground a block sits on, not another block. */
.cm-lanes__school {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(38, 70, 98, .10);
	border-inline-start: 1px solid rgba(38, 70, 98, .35);
	border-inline-end: 1px solid rgba(38, 70, 98, .35);
	pointer-events: none;
	z-index: 0;
}
.cm-lanes__block { position: relative; z-index: 1; }

.cm-lanes__track {
	flex: 1;
	height: 20px;
	position: relative;
	border: 1px solid var(--cm-rule, #d4d4d7);
	/* An hour rule every 24px, so a block's length reads as a duration
	   rather than as an abstract proportion. */
	background: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 23px,
		rgba(29, 31, 32, .06) 23px,
		rgba(29, 31, 32, .06) 24px
	);
}
.cm-lanes__block {
	position: absolute;
	top: 2px;
	bottom: 2px;
	/* A block, not a flex box: text-overflow only takes effect on block
	   text, and as a flex container this cut "Open gym this afternoon"
	   to "Open gym this afterno" with no ellipsis. The line-height is the
	   block's own height, which is what the flex centering was for. */
	display: block;
	line-height: 14px;
	padding: 0 6px;
	font-size: 10px;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	border-inline-start: 2px solid var(--cm-chip, #4f7499);
}
/* One step darker than the design direction's own sample, because that
   sat on the gray page ground and these sit on a white panel: accent-100
   on #f2f2f3 reads as a block, on #fff it reads as nothing. Four values,
   all legible against white, still a single hue. */
.cm-lanes__block--solid { background: #2c455d; color: #f2f2f3; }
.cm-lanes__block--mid   { background: #416180; color: #f2f2f3; }
.cm-lanes__block--tint  { background: #b5d9fd; color: #1d2d3d; }
.cm-lanes__block--line  { background: #eef6ff; color: #2c455d; box-shadow: inset 0 0 0 1px rgba(65, 97, 128, .35); }
a.cm-lanes__block:hover, a.cm-lanes__block:focus { filter: brightness(1.06); text-decoration: none; }

.cm-lanes__axis { display: flex; gap: 10px; }
.cm-lanes__ticks {
	flex: 1;
	display: flex;
	justify-content: space-between;
	font-size: 9.5px;
	letter-spacing: .06em;
	color: var(--cm-muted, #666);
}

@media (max-width: 782px) {
	.cm-lanes__name { width: 78px; font-size: 10.5px; }
	.cm-lanes__block { font-size: 0; padding: 0; }
	.cm-lanes__ticks { font-size: 9px; }
}

/* ── The console on a phone ──────────────────────────────────────────
   Two failures a screenshot found and no test could.

   The topbar is a flex row that does not fit 375px, and it carried
   `overflow: hidden` — so instead of wrapping it CLIPPED, cutting the
   campus name in half and shredding the date into one token per line
   against the right edge. Hidden overflow hides the symptom, not the
   problem. Letting it wrap costs a few pixels of height and is legible.

   And every table in the console is a plain `.widefat`, wrapped in
   nothing, so a narrow screen starves the columns rather than scrolling:
   a role called "Ticket gate — north entrance, cash and card" came out
   one word per line while the column beside it was cut off the screen
   entirely. The table scrolls sideways in its own box now, which is the
   behavior a wide table has always needed and never had. */
@media (max-width: 782px) {

	.cm-wrap table.widefat,
	.cm-wrap table.wp-list-table { display: block; width: 100%; overflow-x: auto; }
	/* The head and the body stay row groups of one (anonymous) table, so they
	   share columns. Making each its own display:table gave each its own
	   column widths, and on a phone every heading sat over the wrong column,
	   up to 450px off. */
	.cm-wrap table.widefat > thead,
	.cm-wrap table.wp-list-table > thead { display: table-header-group; }
	.cm-wrap table.widefat > tbody,
	.cm-wrap table.wp-list-table > tbody { display: table-row-group; }

	/* A cell may still wrap; it simply may not be squeezed to nothing. */
	.cm-wrap table.widefat td,
	.cm-wrap table.widefat th { min-width: 92px; }
	.cm-wrap table.widefat td:first-child,
	.cm-wrap table.widefat th:first-child { min-width: 150px; }
}

/* ── Putting something into the season ───────────────────────────────
   A hatched cell is somebody's thinking, not a booking. It has to be
   legible as "not real yet" at a glance, or a draft on a shared screen
   reads as a schedule and somebody plans around it. */
/* `.cm-panel form label { display: block }` outranks a single-class selector,
   so the seven day boxes stacked into a column however much room they had. */
/* order: the season plan's day boxes are admin only, but the
   .cm-wrap label:has(> input[type="checkbox"]) rule further down has always
   come later and won, giving each box its 24px target and the gap between
   them. After base this rule would win and the boxes would close up. */
.cm-panel form .cm-proposer__days label { display: inline-block; min-width: 0; margin: 0 18px 0 0; font-weight: 400; }

.cm-preview { border-top: 1px solid var(--cm-hairline); margin-top: 14px; padding-top: 14px; }

/* ─── A checkbox's target is its label, and the label was 18px tall ──
	axe flags the 16px box; the box is not the target, because the label
	wraps it and a click on the words toggles it. Checked rather than
	assumed either way: the label measured 210 by 18, so it failed on the
	axis nobody looks at. Twenty-four in both directions, and the words sit
	in the middle of it.

	:has() is a progressive enhancement here — where it is not supported the
	rule simply does not apply and nothing regresses. */
.cm-wrap label:has(> input[type="checkbox"]),
.cm-wrap label:has(> input[type="radio"]),
.cm-map__app label:has(> input[type="checkbox"]),
.cm-root label:has(> input[type="checkbox"]),
.cm-root label:has(> input[type="radio"]) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
}

/* ── Field width is a hint about what goes in the field ──────────────
   The settings panels the 5.0 modules added had it exactly backwards: an
   https endpoint cramped into 400px while "minutes early the code starts
   working" — two digits — sprawled across 600. Size by type, once, so
   every panel agrees without each one remembering to. */
/* One scale, five steps, and the step says what the field holds. Settings —
   the largest form in the product — was not covered by any of this, because
   it is a WordPress `form-table` and these rules named `.cm-form` only: five
   arbitrary widths on one screen (350, 118, 65, 61, 54) and a number field
   whose padding did not match the field beside it, so the digits sat on a
   different line to the times. Both containers now share the scale. */
.cm-wrap {
	/* Every control on a line is the same height, or the line is not one.
	   Inputs came out at 34px and selects and buttons at 40, so a row of
	   "What recurs? / Where / Every (days) / First due / Add the routine"
	   staggered by six pixels four times across. */
	--cm-control-h: 38px;
	--cm-f-xs: 5.5rem;   /* a count: minutes, hours, days, people */
	--cm-f-sm: 8rem;     /* a clock time, a currency code */
	--cm-f-md: 12rem;    /* a date, a datetime */
	--cm-f-lg: 22rem;    /* a name, a title, a phrase */
	--cm-f-xl: 30rem;    /* an address, a URL, an endpoint */
}

.cm-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.cm-wrap select {
	height: var(--cm-control-h);
	box-sizing: border-box;
}

/* ── QR labels (Resources → Print QR labels) ─────────────────────────
   A grid of stick-on labels on screen; a clean sheet when printed, with
   the admin chrome hidden. */
@media print {
	#adminmenumain, #wpadminbar, #wpfooter, .cm-shell-chrome, .cm-shellnav, .cm-noprint { display: none !important; }
}

/* The facility-use agreement: on the request form, the signing page, and in print. */
.cm-agreement { border: 1px solid var(--cm-line, #d4d4d7); padding: 14px 16px; margin: 18px 0; background: #fafafa; }
.cm-agreement h3 { margin: 0 0 8px; }
@media print {
	.cm-noprint, .cm-nav, .cm-public-header, #adminmenumain, #wpadminbar, #wpfooter { display: none !important; }
}

/* ─── The quote on the request form ─────────────────────────────── */

.cm-quote { border: 1px solid var(--cm-line, #d4d4d7); border-inline-start: 4px solid var(--cm-accent, #4f7499); padding: 12px 16px; margin: 14px 0; background: #fafafa; font-size: 14px; }
.cm-quote__title { margin: 0 0 8px; font-size: 15px; }
.cm-quote__idle { margin: 0; }
.cm-quote__lines { margin: 0; display: grid; gap: 6px; }
.cm-quote__line { display: grid; grid-template-columns: minmax(110px, 160px) 1fr; gap: 0 12px; }
.cm-quote__line dt { margin: 0; color: var(--cm-muted, #646970); }
.cm-quote__line dd { margin: 0; }
.cm-quote__line:last-child strong { font-size: 16px; }
.cm-quote__note { display: block; font-size: 12px; color: var(--cm-muted, #646970); }
.cm-quote__fine { margin: 10px 0 0; font-size: 12px; color: var(--cm-muted, #646970); }
@media (max-width: 480px) {
	.cm-quote__line { grid-template-columns: 1fr; }
}

/* The line the script puts above a box that scrolls sideways. */
.cm-scroll-hint { margin: 0 0 6px; font-size: 12.5px; color: var(--cm-text-soft, #5d5d60); }
.cm-scroll-hint::before { content: "\2194  "; }

/* ─── The conversation on a job ─────────────────────────────────── */

/* A thread is a conversation, not a log file: each turn gets room around
   it and a rule down its edge, and the contractor's own turns are told
   apart from the office's by that rule as well as by a tint, so a page
   printed in black and white still carries the difference.

   7.19.0 shipped this markup with no styling at all, which read as a flat
   wall the moment photographs started arriving in the middle of it. */
.cm-thread { margin: 18px 0; }
.cm-thread h3 { margin: 0 0 10px; }
.cm-thread__line { padding: 10px 12px 10px 14px; border-inline-start: 3px solid var(--cm-line, #dcdcde); }
.cm-thread__line + .cm-thread__line { margin-top: 2px; }
.cm-thread__line--contractor { border-left-color: var(--cm-steel, #4f7499); background: var(--cm-steel-soft, #eef6ff); }
.cm-thread__line p { margin: 0 0 4px; }
.cm-thread__line p:last-child { margin: 0; }

/* A tech support request. The thread reuses the work order's lines; what is
   said to the requester is tinted, what is hand-over between levels is
   marked, and the facts table gives its labels a fixed share so a long
   email address wraps instead of widening the panel on a phone. */
.cm-thread__line--reply { border-left-color: var(--cm-steel, #4f7499); background: var(--cm-steel-soft, #eef6ff); }
.cm-thread__line--escalated,
.cm-thread__line--returned { border-left-color: var(--cm-warn, #b26a00); }
.cm-thread__line--resolved { border-left-color: var(--cm-good, #2e7d32); }
.cm-sup-body { margin: 0 0 4px; overflow-wrap: anywhere; }

/* ─── Files on a work order ─────────────────────────────────────── */

/* A photograph belongs at a size somebody can judge from a phone in a
   corridor: big enough to see the crack, small enough that ten of them do
   not bury the conversation they arrived in. The name and size sit under
   the picture rather than on it, because a caption over an image is
   unreadable against half the photographs anybody sends. */
.cm-file { display: inline-block; margin: 4px 10px 4px 0; vertical-align: top; max-width: 100%; }

/* The picture takes its own line, flush with the text above it. Left
   inline, each thumbnail began wherever its sentence happened to end, and
   a job carrying ten files stair-stepped diagonally down the card. */
.cm-file--image { display: block; margin-inline-end: 0; }
.cm-file--image img {
	display: block;
	max-width: 220px;
	max-height: 160px;
	/* A panorama 2400px wide and 240px tall is 22px of picture at that
	   cap, which reads as a rule ruled across the page rather than as a
	   photograph. A floor under the height keeps it legible as an image,
	   cropping the sides; the whole frame is one tap away either way.

	   The floor under the width is for the moment before a lazy image
	   arrives, when the browser knows no dimensions at all: without it
	   the reserved box is a two-pixel sliver, and a job with ten files
	   scrolls past ten of them. */
	min-width: 80px;
	min-height: 60px;
	width: auto;
	height: auto;
	object-fit: cover;
	border: 1px solid var(--cm-line, #d4d4d7);
	border-radius: 3px;
	background: #fff;
}

/* A name may be 190 characters, and under a 107px-wide portrait thumbnail
   that is six lines of caption for one picture, taller than the picture.
   Two lines and then an ellipsis; the whole name stays in the link's
   title and in the image's alt text, so nothing is lost to anybody. */
.cm-file--image .cm-muted,
.cm-file--doc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.cm-file--image .cm-muted { font-size: 12px; max-width: 220px; }
.cm-file--doc { font-size: 13px; max-width: 340px; }

/* A disabled button has to look disabled. Nothing here said so until a
   job could be full of files, and a contractor at the cap was offered a
   Send button that looked exactly like a live one. */
.cm-button:disabled,
.cm-root .cm-button:disabled {
	opacity: .55;
	box-shadow: none;
	cursor: not-allowed;
}
.cm-root .cm-button:disabled:hover { border-color: var(--cmr-line); color: var(--cmr-ink); }

@media (max-width: 480px) {
	/* A phone screen is 375px wide and the thread is the whole of it.
	   A shorter cap keeps a job's ten photographs from turning the page
	   into a scroll nobody reaches the end of. */
	.cm-file--image img { max-height: 120px; }
}

/* ─── Eight languages ─────────────────────────────────────────────────
 *
 * The rest of this stylesheet uses logical properties, so Arabic flips on
 * its own from the dir="rtl" CM_I18n puts on every page root. What is left
 * here is the handful of rules that cannot: four floats, whose logical form
 * (float: inline-start) is too recent to rely on in a school's older iPads,
 * and anything genuinely anchored to a side of the screen.
 */

/* The picker itself. Plain links, because it has to work on the kiosk and
   on a printed QR code as well as in a browser with JavaScript. */
.cm-lang { position: relative; display: flex; justify-content: flex-end; margin-block-end: 8px; font-size: 12px; }
.cm-lang__menu { position: relative; }
.cm-lang__summary { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border-radius: 4px; color: var(--cm-muted); cursor: pointer; list-style: none; }
.cm-lang__summary::-webkit-details-marker { display: none; }
.cm-lang__summary::after { content: ""; width: 0; height: 0; border-inline: 3.5px solid transparent; border-block-start: 4px solid currentColor; }
.cm-lang__summary:hover,
.cm-lang__menu[open] > .cm-lang__summary { color: var(--cm-ink); }
.cm-lang__summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cm-lang__globe { flex: none; }
.cm-lang__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-lang__list { position: absolute; inset-block-start: calc(100% + 4px); inset-inline-end: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 9rem; margin: 0; padding: 6px; list-style: none; background: var(--cm-bg); border: 1px solid var(--cm-line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: 13px; }
.cm-lang__item { margin: 0; }
.cm-lang__link { display: block; text-align: match-parent; padding: 5px 8px; border-radius: 5px; color: var(--cm-muted); text-decoration: none; }
.cm-lang__link:hover,
.cm-lang__link:focus-visible { color: var(--cm-ink); background: rgba(127, 127, 127, .12); }

/*
 * The current language is marked with weight and a rule, never with color
 * alone: a color-blind visitor and a screen reader both need to be able to
 * tell, and aria-current carries it for the second of those.
 */
.cm-lang__link.is-current { color: var(--cm-ink); font-weight: 700; }

/* Each name is written in its own language, so it needs its own direction
   even inside an English page, and the reverse. */
.cm-lang__link[dir="rtl"] { direction: rtl; unicode-bidi: isolate; }
.cm-lang__link[dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

/* ═══ The calendar ═══════════════════════════════════════════════════
	One component (assets/calendar.js) for the public page, the portal and
	the console. It borrows the surface's own tokens and falls back to the
	design direction's values, so it looks like Commons wherever it lands.

	Every control is written out rather than inherited, at two classes
	deep: it sits on whatever theme the shortcode was dropped into, and a
	theme that styles button, select, ul and h2 (every theme does) must not
	get a say in a calendar. */
.cm-cal {
	--cal-ink: var(--cmr-ink, var(--cm-text, #1d1f20));
	--cal-muted: var(--cmr-muted, var(--cm-text-soft, #5d5d60));
	--cal-line: var(--cmr-line, var(--cm-hairline, #d4d4d7));
	--cal-soft: #f5f8f8;
	--cal-surface: #fff;
	--cal-accent: var(--cmp, var(--cm-brand, #4f7499));
	--cal-deep: var(--cmp-dark, var(--cm-brand-deep, #416180));
	--cal-tint: var(--cmp-soft, var(--cm-brand-soft, #eef6ff));
	--cal-bad: #a8453a;
	--cal-warn: #8a6516;
	--cal-stick: 0px;
	container: cal / inline-size;
	--cal-display: var(--cm-display-font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif);
	position: relative;
	color: var(--cal-ink);
	font-family: var(--cm-body-font, "Barlow", system-ui, -apple-system, sans-serif);
	font-size: 15px;
	line-height: 1.4;
}
/* The console already sits under the WordPress admin bar. */
.wp-admin .cm-cal { --cal-stick: 32px; }
@media (max-width: 782px) {
 .wp-admin .cm-cal { --cal-stick: 46px; }
}
.cm-cal *, .cm-cal *::before, .cm-cal *::after { box-sizing: border-box; }
/* A class that sets display on an element must not undo its hidden attribute. */
.cm-cal [hidden] { display: none !important; }

.cm-cal button, .cm-cal select, .cm-cal input, .cm-cal a.cm-cal__plus {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.cm-cal :focus-visible {
	outline: 2px solid var(--cal-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* ── The bar: sticky, so the date and the controls never scroll away ── */
.cm-cal__bar {
	position: sticky;
	top: var(--cal-stick);
	z-index: 20;
	background: var(--cal-surface);
	border: 1px solid var(--cal-line);
	border-radius: 3px;
	padding: 10px 8px;
	margin-bottom: 12px;
}
.cm-cal__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cm-cal__nav { display: flex; gap: 6px; }
.cm-cal .cm-cal__title {
	margin: 0;
	padding: 0;
	flex: 1 0 auto;
	font-family: var(--cal-display);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.15;
	white-space: nowrap;
	color: var(--cal-ink);
}
.cm-cal__title:focus { outline: none; }

.cm-cal .cm-cal__btn {
	appearance: none;
	min-height: 38px;
	padding: 0 12px;
	background: var(--cal-surface);
	color: var(--cal-ink);
	border: 1px solid var(--cal-line);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
}
.cm-cal .cm-cal__btn:hover { border-color: var(--cal-accent); color: var(--cal-deep); }
.cm-cal .cm-cal__btn--icon { width: 38px; padding: 0; font-size: 22px; }
.cm-cal__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.cm-cal__views { display: inline-flex; }
.cm-cal__views .cm-cal__btn { border-radius: 0; margin-inline-start: -1px; padding: 0 10px; }
.cm-cal__views .cm-cal__btn:first-child { border-start-start-radius: 3px; border-end-start-radius: 3px; margin-inline-start: 0; }
.cm-cal__views .cm-cal__btn:last-child { border-start-end-radius: 3px; border-end-end-radius: 3px; }
.cm-cal .cm-cal__btn[aria-pressed="true"] {
	background: var(--cal-deep);
	border-color: var(--cal-deep);
	color: #fff;
	position: relative;
	z-index: 1;
}
.cm-cal .cm-cal__btn--filters { display: none; }

/* ── Filters and view as ── */
.cm-cal__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 14px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--cal-line);
}
.cm-cal__field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.cm-cal__fieldlabel { font-size: 12px; font-weight: 600; color: var(--cal-muted); letter-spacing: .04em; text-transform: uppercase; }
.cm-cal .cm-cal__field select {
	width: auto;
	min-width: 150px;
	max-width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 28px 0 10px;
	background-color: var(--cal-surface);
	color: var(--cal-ink);
	border: 1px solid #ccdada;
	border-radius: 9px;
	box-shadow: none;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}
.cm-cal .cm-cal__field select:focus-visible {
	outline: 2px solid var(--cal-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}
.cm-cal__viewas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-inline-start: auto; padding-inline-start: 14px; border-inline-start: 1px solid var(--cal-line); }

.cm-cal .cm-cal__linkbtn {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 2px;
	color: var(--cal-deep);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none;
}

/* ── The preview banner and the subscribe panel ── */
.cm-cal__notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin-bottom: 12px;
	padding: 10px 14px;
	background: #fdf6e3;
	border: 1px solid #e6d7a8;
	border-inline-start: 4px solid var(--cal-warn);
	border-radius: 3px;
	color: #4b3a0c;
}
.cm-cal__notice[hidden], .cm-cal__panel[hidden], .cm-cal__legend[hidden] { display: none; }
.cm-cal.is-preview .cm-cal__stage { box-shadow: inset 0 0 0 2px #e6d7a8; }

.cm-cal__panel {
	margin-bottom: 12px;
	padding: 14px 16px;
	background: var(--cal-surface);
	border: 1px solid var(--cal-line);
	border-radius: 3px;
}
.cm-cal__panelhead { margin: 0 0 4px; font-weight: 700; font-size: 16px; }
.cm-cal__caveat, .cm-cal__nofeed { margin: 0 0 10px; color: var(--cal-muted); font-size: 14px; }
.cm-cal__panelacts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cm-cal__feedlabel { display: block; font-size: 14px; color: var(--cal-muted); margin-bottom: 8px; }
.cm-cal .cm-cal__feedurl {
	display: block;
	width: 100%;
	max-width: 560px;
	margin-top: 4px;
	padding: 8px 10px;
	border: 1px solid var(--cal-line);
	border-radius: 3px;
	font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--cal-ink);
	background: var(--cal-soft);
}

/* ── The stage ── */
.cm-cal__stage { min-height: 160px; transition: opacity .12s; }
.cm-cal__stage.is-loading { opacity: .55; pointer-events: none; }
.cm-cal__empty { margin: 24px 4px; color: var(--cal-muted); }
.cm-cal__error { padding: 24px 4px; color: var(--cal-bad); }
.cm-cal__hint, .cm-cal__keys { margin: 10px 2px 0; font-size: 13px; color: var(--cal-muted); }
.cm-cal__live {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ── Booking chips ──
	Tone is value, the left edge is the program: four steps of one steel
	stay legible against each other and the page, and the edge keeps
	identity when the tones repeat. Status is the fill: confirmed is solid,
	tentative is faded, a request is dashed. */
.cm-cal .cm-ev {
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 3px 6px 3px 7px;
	text-align: start;
	font-size: 12.5px;
	line-height: 1.3;
	font-weight: 500;
	border: 0;
	border-inline-start: 4px solid var(--ev, #4f7499);
	border-radius: 3px;
	cursor: pointer;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	box-shadow: none;
	min-width: 0;
}
.cm-cal .cm-ev--tone-solid { background: #2c455d; color: #f2f2f3; }
.cm-cal .cm-ev--tone-mid { background: #416180; color: #f2f2f3; }
.cm-cal .cm-ev--tone-tint { background: #b5d9fd; color: #1d2d3d; }
.cm-cal .cm-ev--tone-line { background: #eef6ff; color: #2c455d; box-shadow: inset 0 0 0 1px rgba(65, 97, 128, .35); }
.cm-cal .cm-ev:hover { filter: brightness(1.08); }
.cm-cal .cm-ev--tentative { opacity: .72; background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .22) 6px 8px); }
.cm-cal .cm-ev--requested {
	background: var(--cal-surface);
	color: var(--cal-ink);
	box-shadow: none;
	border: 1px dashed var(--ev, #64748b);
	border-inline-start: 4px solid var(--ev, #64748b);
}
.cm-cal .cm-ev--conflict-warn { box-shadow: inset 0 0 0 2px var(--cal-warn); }
.cm-cal .cm-ev--conflict-block { box-shadow: inset 0 0 0 2px var(--cal-bad); }
.cm-ev__time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-ev__title { font-weight: 600; }
.cm-ev__where { display: block; font-size: 11.5px; font-weight: 500; opacity: .92; }
.cm-cal .cm-ev.is-movable { cursor: grab; }
.cm-cal .cm-ev.is-dragging { opacity: .4; }

/* ── The + ──
	One shape, three sizes. The modifiers sit at the same specificity as the
	base and come after it, so the last one written is the one that wins. */
/* contrast-ok: --cal-accent is the surface's own steel, #4f7499 by default; white on it is 4.9:1 */
.cm-cal a.cm-cal__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cal-accent);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	flex: none;
}
.cm-cal a.cm-cal__plus:hover { background: var(--cal-deep); color: #fff; }
.cm-cal a.cm-cal__plus--primary {
	width: auto;
	height: auto;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 3px;
	border: 1px solid var(--cal-deep);
	font-size: 14px;
	white-space: nowrap;
}
.cm-cal a.cm-cal__plus--wide {
	display: flex;
	width: 100%;
	height: auto;
	min-height: 44px;
	margin-top: 10px;
	border-radius: 3px;
	font-size: 15px;
}
.cm-cal .cm-cal__colhead a.cm-cal__plus { width: 22px; height: 22px; font-size: 16px; }
.cm-cal .cm-cal__rcell a.cm-cal__plus--cell { position: absolute; inset-inline-end: 4px; bottom: 4px; width: 22px; height: 22px; font-size: 16px; }
.cm-cal .cm-cal__roomname a.cm-cal__plus--room { width: 22px; height: 22px; font-size: 16px; }

/* ── Month ── */
.cm-cal__monthgrid { border: 1px solid var(--cal-line); border-radius: 3px; overflow: clip; background: var(--cal-surface); }
.cm-cal__dows, .cm-cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cm-cal__dows { background: var(--cal-soft); border-bottom: 1px solid var(--cal-line); }
.cm-cal__dow { padding: 8px 6px; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cal-muted); }
.cm-cal__week + .cm-cal__week { border-top: 1px solid var(--cal-line); }
.cm-cal__day {
	position: relative;
	min-width: 0;
	min-height: 124px;
	padding: 4px 5px 6px;
	border-inline-start: 1px solid var(--cal-line);
}
.cm-cal__week > .cm-cal__day:first-child { border-inline-start: 0; }
.cm-cal__day.is-outside { background: var(--cal-soft); }
.cm-cal__day.is-outside .cm-cal__daynum { color: var(--cal-muted); font-weight: 500; }
.cm-cal__day.is-today { box-shadow: inset 0 3px 0 var(--cal-accent); }
.cm-cal__day.is-noschool { background: rgba(38, 70, 98, .045); }
.cm-cal__noschool { margin: 0 2px 4px; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--cal-muted); overflow-wrap: anywhere; }
.cm-cal__quietnote { margin: 0; padding: 6px 12px; font-size: 13px; color: var(--cal-muted); background: rgba(38, 70, 98, .045); border-bottom: 1px solid var(--cal-line); }
.cm-cal__daytop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; min-height: 28px; }
.cm-cal .cm-cal__daynum {
	appearance: none;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	background: none;
	border: 0;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cal-ink);
	cursor: pointer;
	box-shadow: none;
}
.cm-cal .cm-cal__daynum:hover { background: var(--cal-tint); }
.cm-cal__day.is-today .cm-cal__daynum { background: var(--cal-deep); color: #fff; }
.cm-cal__evs { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.cm-cal__evs li { margin: 0; padding: 0; list-style: none; min-width: 0; }
.cm-cal .cm-cal__more {
	appearance: none;
	width: 100%;
	padding: 2px 6px;
	background: none;
	border: 0;
	text-align: start;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cal-deep);
	cursor: pointer;
}
.cm-cal .cm-cal__more:hover { text-decoration: underline; }
.cm-cal__dots { display: none; }
.cm-cal__daylist { display: none; }

/* The + is there when you look for it: on hover or focus with a pointer,
   always with a finger. */
@media (hover: hover) {
	.cm-cal__day .cm-cal__plus { opacity: 0; transition: opacity .1s; }
	.cm-cal__day:hover .cm-cal__plus, .cm-cal__day:focus-within .cm-cal__plus,
	.cm-cal__colhead:hover .cm-cal__plus, .cm-cal__colhead:focus-within .cm-cal__plus { opacity: 1; }
}

/* ── Week and day: a time grid ── */
.cm-cal__grid { border: 1px solid var(--cal-line); border-radius: 3px; background: var(--cal-surface); overflow: clip; }
.cm-cal__gridhead, .cm-cal__gridbody { display: grid; grid-template-columns: 66px repeat(var(--cols), minmax(0, 1fr)); }
.cm-cal__gridhead { background: var(--cal-soft); border-bottom: 1px solid var(--cal-line); }
.cm-cal__colhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; padding: 6px 4px; border-inline-start: 1px solid var(--cal-line); min-width: 0; }
.cm-cal__colhead.is-today .cm-cal__colbtn-num { background: var(--cal-deep); color: #fff; }
.cm-cal .cm-cal__colbtn { appearance: none; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px 4px; color: var(--cal-ink); cursor: pointer; box-shadow: none; }
.cm-cal__colbtn-dow { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cal-muted); }
.cm-cal__colbtn-num { min-width: 28px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 15px; font-weight: 700; }
.cm-cal__hours { position: relative; }
.cm-cal__hour { position: absolute; inset-inline: 0; white-space: nowrap; transform: translateY(-50%); padding-inline-end: 8px; text-align: end; font-size: 11.5px; color: var(--cal-muted); font-variant-numeric: tabular-nums; }
.cm-cal__hours .cm-cal__hour:first-child { transform: none; }
.cm-cal__col {
	position: relative;
	border-inline-start: 1px solid var(--cal-line);
	background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rowh) - 1px), var(--cal-line) calc(var(--rowh) - 1px), var(--cal-line) var(--rowh));
	cursor: cell;
}
.cm-cal__col.is-today { background-color: #f7fbff; }
.cm-cal .cm-ev--timed { position: absolute; overflow: hidden; overflow-wrap: normal; font-size: 12px; padding-block: 2px; z-index: 1; border: 0; border-inline-start: 4px solid var(--ev, #4f7499); border-radius: 3px; box-shadow: 0 0 0 1px #fff; }
.cm-cal .cm-ev--timed.cm-ev--requested { border: 1px dashed var(--ev, #64748b); border-inline-start: 4px solid var(--ev, #64748b); }
.cm-cal .cm-ev--timed { padding-inline: 4px 3px; }
.cm-cal .cm-ev--timed .cm-ev__time { white-space: normal; }
.cm-cal .cm-ev--short { white-space: nowrap; text-overflow: ellipsis; }
.cm-cal .cm-ev--short .cm-ev__where { display: none; }
.cm-cal__now { position: absolute; inset-inline: 0; height: 2px; background: var(--cal-bad); z-index: 2; pointer-events: none; }
.cm-cal__now::before { content: ""; position: absolute; inset-inline-start: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--cal-bad); }

/* ── Agenda ── */
.cm-cal__agenda { border: 1px solid var(--cal-line); border-radius: 3px; background: var(--cal-surface); }
.cm-cal__agendaday { padding: 0 14px 12px; }
.cm-cal__agendaday + .cm-cal__agendaday { border-top: 1px solid var(--cal-line); }
.cm-cal__agendahead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0 6px; }
.cm-cal .cm-cal__agendadate { appearance: none; background: none; border: 0; padding: 4px 0; font-family: var(--cal-display); font-size: 18px; font-weight: 700; color: var(--cal-ink); cursor: pointer; text-align: start; box-shadow: none; }
.cm-cal__agendaday.is-today .cm-cal__agendadate { color: var(--cal-deep); }
.cm-cal__evs--list { gap: 6px; }
.cm-cal__evs--list .cm-ev { padding: 8px 10px 8px 12px; font-size: 14.5px; }
.cm-cal__evs--list .cm-ev__where { font-size: 13px; }

/* ── Rooms: space rows against day columns ── */
.cm-cal__busy { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 14px; }
.cm-cal__roomgrid { border: 1px solid var(--cal-line); border-radius: 3px; background: var(--cal-surface); overflow: clip; }
.cm-cal__roomhead, .cm-cal__roomrow { display: grid; grid-template-columns: minmax(150px, 200px) repeat(7, minmax(0, 1fr)); }
.cm-cal__roomhead { background: var(--cal-soft); border-bottom: 1px solid var(--cal-line); }
.cm-cal__roomrow + .cm-cal__roomrow { border-top: 1px solid var(--cal-line); }
.cm-cal__roomname { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 8px 10px; font-weight: 700; background: var(--cal-soft); }
.cm-cal__roomhead .cm-cal__roomname { align-items: center; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--cal-muted); }
.cm-cal__roomtitle { min-width: 0; overflow-wrap: break-word; }
.cm-cal__roomdate { display: flex; align-items: center; justify-content: center; padding: 6px 4px; border-inline-start: 1px solid var(--cal-line); }
.cm-cal__roomdate.is-today .cm-cal__colbtn-dow { color: var(--cal-deep); }
.cm-cal__roomdate .cm-cal__colbtn { flex-direction: column; gap: 0; }
.cm-cal__roomdate .cm-cal__colbtn-num { height: auto; min-width: 0; padding: 0; font-size: 13px; font-weight: 600; }
.cm-cal__rcell { position: relative; display: grid; align-content: start; gap: 3px; min-width: 0; min-height: 64px; padding: 5px 4px 30px; border-inline-start: 1px solid var(--cal-line); }
.cm-cal__rcell.is-today { background: #f7fbff; }
.cm-cal__rcell.is-over { outline: 2px dashed var(--cal-accent); outline-offset: -2px; background: var(--cal-tint); }
@media (hover: hover) {
	.cm-cal__rcell .cm-cal__plus { opacity: 0; transition: opacity .1s; }
	.cm-cal__rcell:hover .cm-cal__plus, .cm-cal__rcell:focus-within .cm-cal__plus { opacity: 1; }
}

/* ── Narrow: no sideways scroll, anywhere ──
	Asked of the calendar's own width, not the window's. A theme that gives a
	page a 480px column on a 1400px screen needs the phone layout just as much
	as a phone does, and a media query cannot tell the difference. */
@container cal (max-width: 720px) {
	/* Five rows of controls would eat a phone's screen if they followed it down. */
	.cm-cal__bar { position: static; padding: 8px; }
	.cm-cal__row { gap: 8px; }
	.cm-cal .cm-cal__title { order: 1; flex: 1 1 100%; font-size: 20px; white-space: normal; }
	.cm-cal__nav { order: 2; flex: 1 1 100%; }
	.cm-cal__views { order: 3; flex: 1 1 100%; }
	.cm-cal__views .cm-cal__btn { flex: 1 1 0; padding: 0 2px; }
	.cm-cal__acts { order: 4; flex: 1 1 100%; flex-wrap: nowrap; }
	.cm-cal__keys { display: none; }
	.cm-cal__acts > * { flex: 1 1 auto; justify-content: center; }
	.cm-cal .cm-cal__btn--filters { display: inline-block; margin-inline-start: auto; }
	.cm-cal__filters { display: none; }
	.cm-cal__filters.is-open { display: flex; flex-direction: column; align-items: stretch; }
	.cm-cal .cm-cal__field select { width: 100%; }
	.cm-cal__viewas { margin-inline-start: 0; padding-inline-start: 0; border-inline-start: 0; flex-direction: column; align-items: stretch; }

	.cm-cal__day { min-height: 56px; padding: 3px 2px 4px; }
	.cm-cal__daytop { justify-content: center; }
	.cm-cal .cm-cal__day a.cm-cal__plus { display: none; }
	.cm-cal__monthgrid .cm-cal__evs, .cm-cal__monthgrid .cm-cal__noschool { display: none; }
	.cm-cal__dots { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
	.cm-cal__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ev, #4f7499); }
	.cm-cal__day.is-selected { background: var(--cal-tint); }
	.cm-cal__dow { padding: 6px 0; font-size: 11px; letter-spacing: .02em; }
	.cm-cal__daylist { display: block; margin-top: 14px; }
	.cm-cal__daylist-h { margin: 0 0 8px; font-family: var(--cal-display); font-size: 19px; }
	.cm-cal__daylist .cm-cal__evs { display: grid; }
	.cm-cal__daylist .cm-cal__linkbtn { margin-top: 6px; }

	.cm-cal__gridhead, .cm-cal__gridbody { grid-template-columns: 58px repeat(var(--cols), minmax(0, 1fr)); }
	.cm-cal__colbtn-dow { display: none; }

	/* Rooms become a list: each room, then only the days that have
	   something on, each labeled with its date. */
	.cm-cal__roomhead { display: none; }
	.cm-cal__roomrow { display: block; }
	.cm-cal__roomname { background: var(--cal-soft); border-bottom: 1px solid var(--cal-line); }
	.cm-cal__rcell { display: block; min-height: 0; padding: 8px 10px; border-inline-start: 0; border-top: 1px solid var(--cal-line); }
	.cm-cal__rcell.is-empty { display: none; }
	.cm-cal__rcell::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cal-muted); }
	.cm-cal__rcell .cm-ev { margin-bottom: 4px; }
	.cm-cal .cm-cal__rcell a.cm-cal__plus--cell { display: none; }
	.cm-cal__agendaday { padding-inline: 10px; }
}

@media (hover: none) {
	.cm-cal__day .cm-cal__plus, .cm-cal__rcell .cm-cal__plus { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-cal *, .cm-cal *::before { transition: none !important; }
}

/* ── The script-free calendar ── */
.cm-cal__fallback h3 { margin: 16px 0 4px; font-size: 17px; }
.cm-cal__fallback ul { margin: 0 0 8px 18px; }
.cm-cal__fb-nav { display: flex; gap: 14px; align-items: center; }
.cm-cal__fb-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.cm-cal.is-ready .cm-cal__fallback { display: none; }

/* ── The setup guide ──
   One ring, one bar, one tick. The ring is a conic gradient driven by --p
   (0 to 100) so it needs no image and no script, and the same three shapes
   are reused by the slim bar on every step screen, the card on Today and the
   guide itself. Progress is steel; a finished thing is green. */

/* The slim bar. A native <details>, so it folds with no script. */
.cm-gbar {
	margin: 0 0 18px; background: var(--cm-steel-soft); border: 1px solid #c3d8ea;
	border-inline-start: 5px solid var(--cm-steel); border-radius: 3px;
}
.cm-gbar > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 9px 16px 9px 12px; cursor: pointer; }
.cm-gbar > summary::-webkit-details-marker { display: none; }
.cm-gbar > summary:focus-visible { outline: 2px solid var(--cm-steel); outline-offset: -2px; }
/* order: the setup guide's phase folds are admin only, but on a phone the
   .cm-wrap summary rule further down has always come later and won; after
   base this rule would win and the fold would lose its tap height. */
.cm-gphase > summary { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 12px 18px; cursor: pointer; background: var(--cm-soft); }

@media (max-width: 782px) {
	.cm-gbar > summary { flex-wrap: wrap; gap: 8px 12px; padding: 9px 12px; }
	/* order: the setup guide's phase folds are admin only, but on a phone the
   .cm-wrap summary rule further down has always come later and won; after
   base this rule would win and the fold would lose its tap height. */
	.cm-gphase > summary { padding: 12px; }
}
.cm-sup-facts-line { color: var(--cm-muted); font-size: 13px; margin: 0 0 12px; }
@media (max-width: 782px), (pointer: coarse) {
	.cm-wrap summary, .cm-org-node__edit summary { display: list-item; min-height: 44px; padding-block: 10px; box-sizing: border-box; }
}

@media print {
	.cm-print-brand { display: flex; align-items: center; gap: 14px; padding: 0 0 8px; margin: 0 0 14px; border-bottom: 2px solid #000; break-after: avoid; }
	.cm-print-brand__logo { max-height: 64px; width: auto; max-width: 180px; object-fit: contain; }
	.cm-print-brand__text { display: flex; flex-direction: column; font-size: 12px; color: #000; }
	.cm-print-brand__text strong { font-size: 16px; }
}

/* ── Files, and the View as button ─────────────────────────────────────── */

/* The question a dragged series date asks before it moves. */
.cm-seriesask { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 100002; width: min(460px, calc(100vw - 32px)); background: #fff; color: #1d2327; border: 1px solid var(--cm-line); border-radius: 8px; box-shadow: 0 10px 34px rgba(0, 0, 0, .3); padding: 18px 20px; }
.cm-seriesask p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.cm-seriesask__row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Touch targets ──
   On a phone or a tablet every control a thumb has to hit is at least 44px
   tall, and a checkbox or radio is 24px with the whole label as its hit area.
   WCAG 2.2 AA asks for 24px; 44px is the size a thumb actually lands on. */
@media (pointer: coarse), (max-width: 782px) {
	.cm-root input[type=checkbox], .cm-root input[type=radio],
	.cm-app input[type=checkbox], .cm-app input[type=radio] { width: 24px; height: 24px; flex: none; }
	.cm-root label:has(> input[type=checkbox]), .cm-root label:has(> input[type=radio]),
	.cm-app label:has(> input[type=checkbox]), .cm-app label:has(> input[type=radio]) {
		display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
	}
	.cm-root a.cm-button, .cm-root button, .cm-app .cm-button, .cm-app button:not(.cm-cal__daybtn),
	.cm-app .button, .cm-app .button-small { min-height: 44px; box-sizing: border-box; }
	/* The console's own control height, which its buttons and fields read. */
	.cm-wrap { --cm-control-h: 44px; }
	/* A link that is the whole row of a list (a booking title on Today) gets
	   its 44px from padding, so a multi-line title still wraps normally. */
	.cm-wrap li > a:only-child:not(.button):not(.cm-button) { display: block; padding-block: 10px; }
	.cm-panel > ul > li > a:first-child:not(.button):not(.cm-button) { display: inline-block; padding-block: 10px; }
	/* The public header (standalone) and the language menu. */
	.cm-public-header__brand, .cm-public-header nav a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; }
	.cm-lang__summary { min-height: 44px; padding-inline: 8px; box-sizing: border-box; }
	.cm-lang__link { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
}

/* The Settings index: a sticky row of links to each section of the one long
   form. It scrolls sideways on a phone rather than wrapping into a block that
   takes the screen. */
.cm-settings__index { position: sticky; top: 0; z-index: 20; background: var(--cm-bg, #fff); border-bottom: 1px solid var(--cm-line); margin: 0 0 16px; padding: 6px 0; }
.cm-settings__index ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.cm-settings__index li { margin: 0; flex: none; }
.cm-settings__index a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--cm-line); border-radius: 999px; background: #fff; color: #2f5578; text-decoration: none; font-size: 13px; white-space: nowrap; }
.cm-settings__index a:hover, .cm-settings__index a:focus-visible { border-color: #345a7c; background: #eef2f6; }
@media (max-width: 782px), (pointer: coarse) { .cm-settings__index a { min-height: 44px; } }
@media print { .cm-settings__index { display: none; } }

/* A row tucked away for the chosen kind of event. The attribute alone loses to
   the inline-block some of these carry, so it is stated here. */
[data-cm-kinds][hidden] { display: none !important; }

/* Settings: the words and lists card. */
.cm-vocab-form { max-width: 760px; }