/* public/cz-content.css
 *
 * Brand-aware classes for WYSIWYG-authored content. ONE file, loaded by the admin
 * editor (TinyMCE content_css), the portal SSR blade and the portal SPA — two
 * copies would drift and the editor would stop matching the output, which is the
 * one thing a WYSIWYG must not do.
 *
 * Cascade position: this sheet loads FIRST, before the global portal stylesheet
 * (the portal_universal_css Setting) and before a client's own portal.css, so both
 * can override it without a deploy.
 *
 * EVERY brand reference is written TWICE, deliberately:
 *   1. a literal, for parsers that reject var() outright (mPDF, Outlook);
 *   2. the CSS custom property with the literal as a fallback, because a browser
 *      with the property undefined computes to inherit/initial and does NOT fall
 *      back to the literal declaration.
 * Both are required. Removing either one breaks a real surface.
 *
 * The default #2092EC / 32, 146, 236 is the platform default brand primary,
 * matching config/brand.php's `defaults.color` entry — so a brand-less client
 * renders identically here as everywhere else that falls back to that default.
 */

.cz-table--brand { border-collapse: collapse; width: 100%; }

.cz-table--brand th {
  background-color: #2092EC;
  background-color: var(--color-brand-primary, #2092EC);
  color: #ffffff;
  text-align: left;
  padding: 0.5rem 0.625rem;
}

.cz-table--brand th,
.cz-table--brand td {
  /* ⚠️ Top-aligned, not middle: with one long cell (an address) and four short ones,
     middle alignment floats the short values into the middle of a tall row and the
     eye loses the line it is scanning across. */
  vertical-align: top;
}

.cz-table--brand td {
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid rgba(32, 146, 236, 0.18);
  border-bottom: 1px solid rgba(var(--color-brand-primary-rgb, 32, 146, 236), 0.18);
}

.cz-table--brand tbody tr:nth-child(even) {
  background-color: rgba(32, 146, 236, 0.06);
  background-color: rgba(var(--color-brand-primary-rgb, 32, 146, 236), 0.06);
}

.cz-brand-heading {
  color: #2092EC;
  color: var(--color-brand-primary, #2092EC);
}

.cz-brand-text {
  color: #2092EC;
  color: var(--color-brand-primary, #2092EC);
}

.cz-callout {
  padding: 0.75rem 1rem;
  border-left: 3px solid #2092EC;
  border-left: 3px solid var(--color-brand-primary, #2092EC);
  background-color: rgba(32, 146, 236, 0.06);
  background-color: rgba(var(--color-brand-primary-rgb, 32, 146, 236), 0.06);
}

/* ── Email stimulus ────────────────────────────────────────────────────────────
 *
 * A recognisable email, for comprehension questions whose answers live in the
 * message (a reference number, a postcode, a phone number). It REPLACES a
 * screenshot: as an image those details are pixels — unsearchable, unselectable,
 * invisible to a screen reader, fixed-width on a phone — and the file has to be
 * carried between environments, where its path is the thing that breaks.
 *
 * ⛔⛔ TABLE LAYOUT, NOT FLEX OR GRID. This sheet is registered with mPDF
 * (PdfRenderer::contentCss), and mPDF supports NEITHER — a flex row silently
 * renders as stacked blocks in a candidate's PDF while looking perfect in the
 * editor. A table is the one layout primitive TinyMCE, the portal and mPDF agree
 * on. Guarded by OutputContentStylesheetTest.
 *
 * ⚠️ Deliberately NOT brand-coloured, and so deliberately NOT written twice the
 * way the brand rules above are. This is a neutral mock of somebody else's mail
 * client; painting it in the client's brand would make it read as a message FROM
 * the client, which is the opposite of what the question is asking the candidate
 * to examine. The greys are chrome, not brand.
 *
 * ⚠️ An empty field cell needs a   in the authored HTML — both TinyMCE and
 * mPDF collapse a truly empty cell and the row loses its height.
 */

.cz-email {
  border: 1px solid #c8ccd0;
  margin: 0 0 1rem;
}

.cz-email__head {
  border-collapse: collapse;
  width: 100%;
}

.cz-email__head th {
  width: 5.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #c8ccd0;
  background-color: #f1f3f4;
  color: #3c4043;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
}

.cz-email__head td {
  padding: 0.25rem 0.5rem;
  border: 1px solid #c8ccd0;
  background-color: #ffffff;
}

.cz-email__body {
  padding: 0.75rem 1rem;
  background-color: #ffffff;
}

.cz-email__body p {
  margin: 0 0 0.75rem;
}

/* A value that should not break across lines — an account number, a phone number, a
 * postcode. In a table a candidate is scanning for discrepancies, a number split over two
 * lines is not cosmetic: it invents a difference that is not in the data.
 *
 * ⛔⛔ mPDF IGNORES `white-space: nowrap` — MEASURED 2026-09-01. An 8-digit account number
 * in a narrow cell breaks to `058528` / `93` identically with and without this class. So
 * this protects the EDITOR AND THE PORTAL ONLY, and in a PDF the sole protection is
 * giving the column enough width to hold the value. ⛔ Do not force widths on every
 * column to make one fit: squeezing the others is what causes the breaks.
 */
.cz-nowrap {
  white-space: nowrap;
}


/* Key/value panel — an account profile, a summary card, a record extract.
 *
 * ⭐ Pairs with `.cz-callout` as the container, which supplies the brand tint and accent.
 * That is the whole point: the panels this replaces hard-coded their own blues
 * (`background: #c5daef; border: 2px solid #375f87`), which freeze at authoring time and
 * cannot follow a client's brand — the exact objection that created this stylesheet.
 *
 * ⛔ Borderless BY DESIGN. A key/value grid is a layout, not a data table; ruling every
 * cell makes a record extract read as a spreadsheet. Use `.cz-table--brand` when the data
 * genuinely has columns and a header row.
 *
 * ⚠️ Still a TABLE, because mPDF has no flex or grid (see the email stimulus note).
 */
.cz-kv {
  width: 100%;
  border-collapse: collapse;
}

.cz-kv td {
  padding: 0.2rem 0.75rem 0.2rem 0;
  vertical-align: top;
}

/* Text alignment utilities.
 *
 * ⭐ Alignment is the cheapest structure a data table has: uniform-width codes — an
 * account number, a reference, a phone number — centred between left-aligned prose
 * columns give the eye a spine to scan down. All-left is what makes a five-column table
 * read as ragged.
 *
 * ⚠️ Specificity: `.cz-table--brand th` already sets `text-align: left`, which is one
 * class + one element. A bare `.cz-text-center` would LOSE to it, so the element-qualified
 * selectors below are deliberate — and this block must stay AFTER the table rules.
 */
.cz-text-center,
td.cz-text-center,
th.cz-text-center {
  text-align: center;
}

.cz-text-right,
td.cz-text-right,
th.cz-text-right {
  text-align: right;
}