/* Report an error: button, form, dialog and confirmation (demo, 14 Oct 2026). Owned by report.js. */
body.ux.cec .cec-rep-btn { min-height: 44px; gap: 0.5rem; white-space: nowrap; cursor: pointer; }
body.ux.cec .cec-rep-btn .cec-rep-ico { flex: none; color: var(--c-accent-ink); }
body.ux.cec .cec-rep-wrap { margin: 0.6rem 0 1rem; }
body.ux.cec .cec-ph-row:has(.cec-contact) .btn-row > .cec-rep-btn { margin-bottom: 0.7rem; }
body.ux.cec .cec-rep-col { max-width: 760px; padding-bottom: 36px; }
body.ux.cec .cec-rep-back { margin: 0.6rem 0 0; font-size: 0.9rem; }
body.ux.cec .cec-rep-back a { display: inline-block; padding: 0.7rem 0; }

body.ux.cec .cec-rep-form, .cec-rep-dlg-body .cec-rep-form { display: grid; gap: 18px; font-size: 0.95rem; }
.cec-rep-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cec-rep-form legend, .cec-rep-form label { font-weight: 700; color: #121314; }
.cec-rep-form legend { padding: 0; margin-bottom: 8px; }
.cec-rep-form .cec-rep-req, .cec-rep-form .cec-rep-opt { font-weight: 400; color: #5d5f63; font-size: 0.85rem; }
.cec-rep-form .cec-rep-hint, .cec-rep-form .cec-rep-count { margin: 2px 0 6px; font-size: 0.85rem; color: #5d5f63; line-height: 1.45; }
.cec-rep-form .cec-rep-count { margin: 4px 0 0; text-align: right; min-height: 1.2em; }
.cec-rep-form .cec-rep-field label { display: block; margin-bottom: 4px; }
.cec-rep-form input[type=text], .cec-rep-form input[type=url], .cec-rep-form input[type=email], .cec-rep-form select, .cec-rep-form textarea {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; font: inherit; color: #121314; background: #fff;
  border: 1px solid rgba(18,19,20,.4); border-radius: 12px; }
.cec-rep-form textarea { resize: vertical; line-height: 1.5; }
.cec-rep-form input:focus-visible, .cec-rep-form select:focus-visible, .cec-rep-form textarea:focus-visible,
.cec-rep-form .cec-rep-choice:focus-within, .cec-rep-dialog button:focus-visible, .cec-rep-btn:focus-visible { outline: 3px solid var(--c-accent, #c8102e); outline-offset: 2px; }
.cec-rep-choices { display: grid; gap: 8px; }
.cec-rep-choice { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; box-sizing: border-box; padding: 10px 14px; border: 1px solid rgba(18,19,20,.2); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; }
.cec-rep-choice:has(input:checked) { border-color: var(--c-accent-ink, #9e0c24); background: var(--c-accent-tint, #fbe9eb); }
.cec-rep-choice input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-accent, #c8102e); }
.cec-rep-choice b { display: block; font-weight: 700; }
.cec-rep-choice small { display: block; color: #5d5f63; font-size: 0.85rem; line-height: 1.4; }
.cec-rep-tick { align-items: center; }
.cec-rep-tick span { font-weight: 700; }
.cec-rep-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cec-rep-err { margin: 4px 0 0; color: #9e0c24; font-weight: 700; font-size: 0.9rem; }
.cec-rep-form [aria-invalid=true] { border-color: #9e0c24; border-width: 2px; }
.cec-rep-summary { border: 2px solid #9e0c24; border-radius: 12px; padding: 12px 16px; background: #fff; }
.cec-rep-summary ul { margin: 6px 0 0; padding-left: 20px; }
.cec-rep-summary a { display: inline-block; padding: 8px 0; font-weight: 700; }
.cec-rep-note { margin: 0; font-size: 0.88rem; color: #3a3c40; line-height: 1.5; }
.cec-rep-warn { padding: 10px 14px; border-radius: 12px; background: #fff7e6; border: 1px solid #e0b34a; }
.cec-rep-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cec-rep-actions .btn { min-height: 44px; justify-content: center; }
.cec-rep-person[hidden] { display: none; }
.cec-rep-person { display: grid; gap: 14px; }
.cec-rep-done h3 { margin: 18px 0 6px; font-size: 1.05rem; }
.cec-rep-done ul { margin: 0 0 14px; padding-left: 20px; line-height: 1.55; }
.cec-rep-refl { margin: 0; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent, #c8102e); }
.cec-rep-ref { margin: 0 0 10px; font-size: 2rem; font-weight: 300; letter-spacing: 0.04em; color: #121314; font-variant-numeric: tabular-nums; }

/* dialog */
dialog.cec-rep-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: #121314; box-shadow: 0 8px 20px rgba(18,19,20,.2), 0 30px 70px rgba(18,19,20,.35); overflow: hidden; }
dialog.cec-rep-dialog::backdrop { background: rgba(18,19,20,.6); }
.cec-rep-dialog[open] { display: flex; flex-direction: column; }
.cec-rep-dlg-bar { display: flex; justify-content: flex-end; padding: 8px 8px 0; }
.cec-rep-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; color: #121314; }
.cec-rep-close:hover { background: #f1f1ef; }
.cec-rep-dlg-scroll { overflow-y: auto; padding: 0 22px 24px; -webkit-overflow-scrolling: touch; }
.cec-rep-dlg-head { margin: -6px 0 14px; }
.cec-rep-dlg-head .eyebrow { margin: 0 0 2px; }
.cec-rep-dlg-head h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; font-weight: 700; }
.cec-rep-dlg-head h2:focus { outline: none; }
.cec-rep-meta { margin: 4px 0 0; color: #5d5f63; font-size: 0.9rem; }
.cec-rep-loading { padding: 8px 0 24px; color: #5d5f63; }
/* verify 14 Oct: cec.css "body.ux.cec p" and the text-input rules out-rank the plain classes above, so errors showed grey,
   choice hints bold, the person-name box as a pill on the full page, and input borders under 3:1 */
body.ux.cec p.cec-rep-err { color: #9e0c24; }
body.ux.cec p.cec-rep-refl { color: var(--c-accent, #c8102e); }
body.ux.cec p.cec-rep-ref { color: #121314; }
body.ux.cec .cec-rep-form .cec-rep-choice { font-weight: 400; }
body.ux.cec .cec-rep-form input[type=text], body.ux.cec .cec-rep-form input[type=url], body.ux.cec .cec-rep-form input[type=email], body.ux.cec .cec-rep-form select, body.ux.cec .cec-rep-form textarea,
body.ux.cec .ux-main .cec-rep-form input[type=text] { border-radius: 12px; border: 1px solid rgba(18,19,20,.62); }
body.ux.cec .cec-rep-form input[aria-invalid=true], body.ux.cec .cec-rep-form textarea[aria-invalid=true], body.ux.cec .ux-main .cec-rep-form input[aria-invalid=true] { border: 2px solid #9e0c24; }
/* verify 14 Oct: on the full page "body.ux.cec .cec-page a" makes links plain ink with no underline; keep them recognisable as links.
   Summary links are blocks so the bullet sits by the first line when the text wraps. */
body.ux.cec .cec-rep-summary a, body.ux.cec .cec-page .cec-rep-summary a { display: block; color: #9e0c24; text-decoration: underline; text-underline-offset: 3px; }
body.ux.cec .cec-page .cec-rep-note a, body.ux.cec .cec-page .cec-rep-back a { color: var(--c-accent-ink, #9e0c24); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .cec-rep-dlg-scroll { padding: 0 16px 20px; }
  .cec-rep-actions .btn { flex: 1 1 100%; }
  body.ux.cec .cec-rep-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: no-preference) { dialog.cec-rep-dialog[open] { animation: cecRepIn 160ms ease-out; } @keyframes cecRepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }