(the account request form), is two cells side by side, not four.
The rule above once caught the wrappers too and dealt both into the same
cell, so "Last name" printed over "First name" and covered its box. The
request form's own pair is a
whose script adds a line inside it; that
line still takes its own row, so this is scoped to the
form. */
.cm-root div.cm-field-pair { grid-template-rows: none; grid-auto-flow: row; }
.cm-root div.cm-field-pair > p { grid-column: auto; grid-row: auto; margin-top: 0; min-width: 0; }
@media (max-width: 560px) {
.cm-root .cm-field-pair { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.cm-root .cm-field-pair > *:not(label):not(input) { grid-column: auto; grid-row: auto; }
}
/* ── Facility needs & work orders ── */
.cm-root .cm-needs .cm-need { display: inline-flex; align-items: center; gap: 7px; margin: 4px 12px 4px 0; padding: 8px 14px; border: 1px solid var(--cm-rule); border-radius: 0; font-size: 14px; cursor: pointer; background: #fff; }
.cm-root .cm-needs .cm-need:has(input:checked) { border-color: var(--cm-steel); background: var(--cm-steel-soft); }
.cm-root .cm-needs input[type=checkbox] { width: auto; min-height: 0; margin: 0; }
/* ── Guided tours ── */
/* The second-door offer on the portal: present, never pushy. */
.cm-root .cm-portal__signin { margin-top: 26px; padding: 16px 18px; border: 1px dashed var(--cm-rule); border-radius: 0; }
.cm-root .cm-portal__signin p { margin: 0 0 10px; font-size: 14px; color: #33484c; }
/* ── The public hub: the front door that shows the life of the place ── */
.cm-hub h2 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cm-hub__date { font-size: 14px; font-weight: 500; color: var(--cmr-muted, #5b7276); }
.cm-hub__list { list-style: none; margin: 10px 0 26px; padding: 0; }
.cm-hub__list li { display: grid; grid-template-columns: 150px 1fr auto; gap: 14px; padding: 9px 12px; border-bottom: 1px solid #e3edee; align-items: baseline; border-radius: 8px; }
.cm-hub__list--week li { grid-template-columns: 64px 90px 1fr auto; }
.cm-hub__list li.is-now { background: #ecf7f1; }
.cm-hub__time { color: #5b7276; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.cm-hub__day { font-weight: 700; font-size: 13px; color: var(--cm-steel-deep); white-space: nowrap; }
.cm-hub__what { font-weight: 600; }
/* #127049, not #1a9e6a: the brighter green is 3.42:1 on white and this is
12.5px — under the 4.5 that size needs. */
.cm-hub__now { color: #127049; font-size: 12.5px; font-weight: 700; }
.cm-hub__where { color: #5b7276; font-size: 13.5px; text-align: end; }
.cm-hub__quiet { color: #5b7276; margin: 8px 0 24px; }
.cm-hub__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 26px; }
.cm-hub__card { border: 1px solid var(--cm-rule); border-top: 3px solid var(--cm-steel); border-radius: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
.cm-hub__card span { color: #5b7276; font-size: 13px; }
.cm-hub__doors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid #e3edee; }
@media (max-width: 640px) {
.cm-hub__list li, .cm-hub__list--week li { grid-template-columns: 1fr; gap: 2px; }
.cm-hub__where { text-align: start; }
}
.cm-hub__card { border-radius: 0; }
.cm-root .cm-need { border-radius: 0; }
/* A person's own name is not a label: the greeting keeps the condensed
face but never shouts, because an uppercased email address is unreadable. */
.cm-root .cm-portal__hello { text-transform: none; letter-spacing: .01em; }
/* ─── What we email you, on the coach's own page ────────────────── */
.cm-portal__prefs { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--cmr-line, #dcdcdf); }
.cm-portal__prefs h3 { margin: 0 0 10px; }
.cm-portal__pref { margin: 0 0 10px; }
.cm-portal__pref label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.cm-portal__pref .cm-fineprint { display: block; margin-inline-start: 26px; }
/* ── QR labels (Resources → Print QR labels) ─────────────────────────
A grid of stick-on labels on screen; a clean sheet when printed, with
the admin chrome hidden. */
.cm-agreement__text, .cm-agreement-doc__text { max-height: 260px; overflow: auto; padding: 10px 12px; background: #fff; border: 1px solid var(--cm-line, #d4d4d7); font-size: 14px; line-height: 1.5; white-space: normal; }
.cm-agreement-doc__facts { border-collapse: collapse; margin: 0 0 14px; }
.cm-agreement-doc__facts th { text-align: start; padding: 3px 14px 3px 0; color: #646970; font-weight: 500; vertical-align: top; }
.cm-agreement-doc__facts td { padding: 3px 0; }
.cm-agreement-doc__signed { margin-top: 14px; font-weight: 600; }
.cm-agreement-doc__blank { margin-top: 28px; }
@media print {
.cm-agreement-doc__text { max-height: none; overflow: visible; border: 0; padding: 0; }
}
/* ─── The conversation on a job ─────────────────────────────────── */
/* The thread is above the Done button on purpose, so a question the
office asked is read before the job is closed. With ten photographs in
it that purpose costs the person in the plant room eight screens of
scrolling to reach the one button they came for. The link keeps the
order and gives them the shortcut. */
.cm-thread__skip { margin: 0 0 10px; font-size: 14px; }
/* ─── 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.
*/
.cm-portal__lang select { min-width: 12rem; }
/* ── The big days: real links, never clipped ── */
.cm-hub__cards { list-style: none; padding: 0; }
.cm-hub__cards li { margin: 0; padding: 0; min-width: 0; list-style: none; }
.cm-root a.cm-hub__card {
height: 100%;
color: var(--cmr-ink, #1d1f20);
text-decoration: none;
overflow-wrap: anywhere;
cursor: pointer;
transition: border-color .12s, box-shadow .12s;
}
.cm-root a.cm-hub__card strong { font-size: 16px; line-height: 1.25; }
.cm-root a.cm-hub__card:hover { border-color: var(--cmp, #4f7499); box-shadow: 0 1px 0 var(--cmp, #4f7499); }
.cm-root a.cm-hub__card:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cm-root a.cm-hub__card:focus-visible { outline: 2px solid var(--cmp-dark, #416180); outline-offset: 2px; }
/* ── Files, and the View as button ─────────────────────────────────────── */
/* The door code beside a booking on the person's page: plain and copyable, nothing
that looks like a button, because the only thing to do with it is read it. */
.cm-portal__door { display: block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--cm-ink, #1d2327); }