/* styles/claimant.css */
/* mal-claimant-access (D7): the claimant page's only stylesheet (claimant.html; the CSP allows no inline style).
   Plain, readable, mobile first. C7 runs the accessibility pass on this file. */
:root {
  --claimant-ink: #1d2433;
  --claimant-muted: #4b5568;
  --claimant-line: #d5d9e2;
  --claimant-surface: #ffffff;
  --claimant-page: #f4f5f8;
  --claimant-accent: #1f4fbf;
  --claimant-alert: #9b1c1c;
  --claimant-on-accent: #ffffff;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--claimant-page); color: var(--claimant-ink);
  font: 1.0625rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
::selection { background: var(--claimant-accent); color: var(--claimant-on-accent); }
.claimant-shell { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.claimant-heading { font-size: 1.4rem; line-height: 1.25; margin: 0 0 0.75rem; }
/* mal-i18n (WCAG 2.4.7): the heading the router focuses keeps a ring for keyboard users */
.claimant-heading:focus:not(:focus-visible) { outline: none; }
.claimant-heading:focus-visible { outline: 3px solid var(--claimant-accent); outline-offset: 2px; }
.claimant-card { background: var(--claimant-surface); border: 1px solid var(--claimant-line); border-radius: 0.5rem;
  padding: 1rem 1.25rem; margin: 0 0 1rem; }
.claimant-card-heading { font-size: 1.1rem; margin: 0 0 0.5rem; }
.claimant-firm, .claimant-status-updated, .claimant-task-due, .claimant-loading { color: var(--claimant-muted); }
.claimant-status-updated, .claimant-task-due { font-variant-numeric: tabular-nums; }
.claimant-status-label { font-size: 1.2rem; font-weight: 600; margin: 0 0 0.25rem; }
.claimant-status-description { margin: 0 0 0.5rem; }
.claimant-task-list { list-style: none; margin: 0; padding: 0; }
.claimant-task { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 0.5rem;
  padding: 0.1rem 0; border-top: 1px solid var(--claimant-line); }
.claimant-task:first-child { border-top: 0; }
.claimant-link, .claimant-task-link { color: var(--claimant-accent); text-underline-offset: 0.15em; }
/* the tap area: the text line plus 0.5rem above and below (44px at the default size) */
.claimant-link, .claimant-task-link { display: inline-block; padding-block: 0.5rem; }
.claimant-link:hover, .claimant-task-link:hover { text-decoration-thickness: 2px; }
.claimant-notice { color: var(--claimant-alert); font-weight: 600; }
.claimant-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 16rem; }
.claimant-label { font-weight: 600; }
.claimant-input { font: inherit; font-size: 1.25rem; letter-spacing: 0.2em; padding: 0.5rem 0.75rem;
  border: 1px solid var(--claimant-muted); border-radius: 0.375rem; font-variant-numeric: tabular-nums;
  caret-color: var(--claimant-accent); }
.claimant-input[aria-invalid="true"] { border-color: var(--claimant-alert); }
.claimant-button { font: inherit; padding: 0.6rem 1rem; border-radius: 0.375rem; border: 1px solid var(--claimant-accent);
  cursor: pointer; min-height: 2.75rem; }
.claimant-button.primary { background: var(--claimant-accent); color: var(--claimant-on-accent); }
.claimant-button.secondary { background: var(--claimant-surface); color: var(--claimant-accent); }
.claimant-button.primary:hover { background: var(--claimant-ink); border-color: var(--claimant-ink); }
.claimant-button.secondary:hover { box-shadow: inset 0 0 0 1px var(--claimant-accent); }
.claimant-button:focus-visible, .claimant-input:focus-visible, a:focus-visible { outline: 3px solid var(--claimant-accent);
  outline-offset: 2px; }
/* the staff preview frame (src/matters/claimant-access.js) renders these class names inside .ca-preview; the staff
   page does not load this sheet, so 39-arbitration.css styles them there with the staff tokens */
/* mal-esign (step 2, D12): the signing page #/esign/<ref>. Additive; every target at least 2.75rem tall; no fixed-width
   text box (the pseudo-locale's 40 percent expansion wraps). */
.claimant-esign .claimant-form { max-width: none; }
.claimant-esign-doc, .claimant-esign-due { color: var(--claimant-muted); margin: 0 0 0.75rem; }
.claimant-esign-step { border-top: 1px solid var(--claimant-line); padding-top: 1rem; margin-top: 1rem; }
.claimant-esign-disclosure p { margin: 0 0 0.6rem; }
.claimant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; }
.claimant-check { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.5rem 0; }
.claimant-check input { width: 1.5rem; height: 1.5rem; margin: 0.15rem 0 0; flex: none; accent-color: var(--claimant-accent); }
.claimant-check label { flex: 1 1 auto; min-width: 0; min-height: 1.5rem; overflow-wrap: anywhere; }
.claimant-check input:focus-visible { outline: 3px solid var(--claimant-accent); outline-offset: 2px; }
.claimant-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
.claimant-esign .claimant-input { letter-spacing: normal; font-size: 1.125rem; width: 100%; }
.claimant-esign .claimant-input-short { width: auto; min-width: 6rem; max-width: 100%; }
.claimant-field-error { color: var(--claimant-alert); font-weight: 600; margin: 0; }
.claimant-hint { color: var(--claimant-muted); margin: 0 0 0.25rem; }
.claimant-esign-method, .claimant-esign-reasons { border: 0; margin: 0; padding: 0; }
.claimant-esign-pages { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.claimant-esign-page-img { display: block; width: 100%; height: auto; border: 1px solid var(--claimant-line); background: var(--claimant-surface); }
.claimant-esign-text { border: 1px solid var(--claimant-line); border-radius: 0.375rem; padding: 0.75rem; margin: 0.5rem 0; }
.claimant-esign-text-heading { font-size: 1rem; margin: 0.5rem 0 0.25rem; }
.claimant-esign-text-body { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
.claimant-esign-pad { display: block; width: 100%; max-width: 37.5rem; aspect-ratio: 3 / 1; height: auto; touch-action: none;
  border: 2px dashed var(--claimant-muted); border-radius: 0.375rem; background: var(--claimant-surface); cursor: crosshair; }
.claimant-esign-pad[aria-invalid="true"] { border-color: var(--claimant-alert); }
.claimant-esign-pad:focus-visible { outline: 3px solid var(--claimant-accent); outline-offset: 2px; }
.claimant-esign-decline { border: 1px solid var(--claimant-line); border-radius: 0.375rem; padding: 0.75rem; margin-top: 0.75rem; }
.claimant-button.danger { background: var(--claimant-alert); border-color: var(--claimant-alert); color: var(--claimant-on-accent); }
.claimant-button.danger:hover { background: var(--claimant-ink); border-color: var(--claimant-ink); }
a.claimant-button { display: inline-flex; align-items: center; text-decoration: none; }
.claimant-esign-idle { border: 1px solid var(--claimant-alert); border-radius: 0.375rem; padding: 0.5rem 0.75rem; }
/* mal-decision-center (D4): the answer group of a decision (#/decision/<id>). Claimant tokens only; each answer row is a
   44px tap target (the whole row is the label), the native radio takes the accent, and the confirm step's two buttons
   wrap on a narrow screen. */
.claimant-fieldset { border: 0; margin: 0 0 0.75rem; padding: 0; min-width: 0; }
.claimant-fieldset > legend { font-weight: 600; padding: 0; margin: 0 0 0.5rem; }
.claimant-option { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.25rem 0.75rem;
  border: 1px solid var(--claimant-line); border-radius: 0.375rem; margin: 0 0 0.5rem; background: var(--claimant-surface); }
.claimant-option > input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--claimant-accent); }
.claimant-option > label { flex: 1; padding-block: 0.5rem; cursor: pointer; }
.claimant-option:has(input:checked) { border-color: var(--claimant-accent); box-shadow: inset 0 0 0 1px var(--claimant-accent); }
.claimant-option > input:focus-visible { outline: 3px solid var(--claimant-accent); outline-offset: 2px; }
/* .claimant-actions (the confirm step's wrapping button row) is the e-sign rule above (wave C integration: one rule) */
/* mal-claimant-forms: the form and evidence pages (src/claimant/forms/) and the shared form renderer
   (src/claimant/render/claimant-form.js); tokens only, 44px touch targets */
.cf-page { display: flex; flex-direction: column; gap: 0.75rem; }
.cf-section { border: 1px solid var(--claimant-line); border-radius: 0.5rem; background: var(--claimant-surface);
  padding: 1rem 1.25rem; margin: 0 0 1rem; min-width: 0; }
.cf-legend { font-size: 1.1rem; font-weight: 600; padding: 0 0.25rem; margin: 0 0 0.25rem; }
.cf-question { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem 0; border-top: 1px solid var(--claimant-line); }
.cf-question:first-of-type { border-top: 0; }
.cf-question[hidden] { display: none; } /* a hidden conditional question (cfApplyVisibility): flex must not show it */
.cf-label { font-weight: 600; }
.cf-required, .cf-help, .cf-prefilled { color: var(--claimant-muted); font-weight: 400; }
.cf-help { margin: 0; font-size: 0.95rem; }
.cf-help:empty { display: none; }
.cf-page input[type="text"], .cf-page input[type="date"], .cf-page input[type="number"], .cf-page input[type="tel"],
.cf-page input[type="email"], .cf-page input[type="file"], .cf-page select, .cf-page textarea {
  font: inherit; min-height: 2.75rem; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--claimant-muted);
  border-radius: 0.375rem; background: var(--claimant-surface); color: var(--claimant-ink); }
.cf-check { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0; cursor: pointer; }
.cf-check input { width: 1.5rem; height: 1.5rem; flex: none; margin: 0.1rem 0 0; accent-color: var(--claimant-accent); }
.cf-multi { display: flex; flex-direction: column; }
.cf-declaration { border-color: var(--claimant-accent); }
.cf-declare { font-weight: 600; }
.cf-uploads { list-style: none; margin: 0; padding: 0; }
.cf-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem 0;
  border-top: 1px solid var(--claimant-line); }
.cf-upload:first-child { border-top: 0; }
.cf-upload-name { font-weight: 600; }
.cf-done { color: var(--claimant-ink); font-weight: 600; border: 1px solid var(--claimant-accent); border-radius: 0.5rem;
  background: var(--claimant-surface); padding: 0.75rem 1rem; margin: 0; }
.cf-page .claimant-actions { gap: 0.75rem; margin: 0.5rem 0; }   /* wave C integration: over the shared e-sign rule */
/* mal-claimant-door: the upload in progress. A busy or disabled button reads as waiting, with no hover response; the
   picker's own button takes the secondary button's look instead of the browser default. */
.claimant-button:disabled { cursor: progress; opacity: 0.65; }
.claimant-button.primary:disabled:hover { background: var(--claimant-accent); border-color: var(--claimant-accent); }
.claimant-button.secondary:disabled:hover { box-shadow: none; }
.cf-page input[type="file"]::file-selector-button { font: inherit; margin: 0 0.75rem 0 0; padding: 0.35rem 0.75rem;
  border: 1px solid var(--claimant-accent); border-radius: 0.375rem; background: var(--claimant-surface);
  color: var(--claimant-accent); cursor: pointer; }
.cf-page input[type="file"]:disabled, .cf-page input[type="file"]:disabled::file-selector-button { cursor: progress; }
.cf-page input:focus-visible, .cf-page select:focus-visible, .cf-page textarea:focus-visible {
  outline: 3px solid var(--claimant-accent); outline-offset: 2px; }
/* fix round (Codex t1): an address answer is one labelled input per part */
.cf-address { display: grid; gap: 0.5rem; }
.cf-address-part { display: flex; flex-direction: column; gap: 0.25rem; }
/* styles/claimant-i18n.css */
/* mal-i18n (D5): the claimant language switch, the skip link and the "shown in English" notice (outlined, not
   filled, so it reads as a note about the page rather than as another card). Linked by
   claimant.html after claimant.css (no new global rule); every colour is a claimant.css token, so the contrast pairs
   in tools/a11y/claimant_contrast_pairs.json cover it. Targets are at least 24 by 24 CSS px (WCAG 2.5.8); no motion. */
.claimant-header { max-width: 40rem; margin: 0 auto; padding: 0.5rem 1rem 0; display: flex; justify-content: flex-end; }
.claimant-locale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.claimant-locale-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  min-width: 2.75rem; padding: 0.25rem 0.75rem; border: 1px solid var(--claimant-accent); border-radius: 0.375rem;
  color: var(--claimant-accent); background: var(--claimant-surface); text-decoration: none; }
.claimant-locale-link[aria-current="true"] { background: var(--claimant-accent); color: var(--claimant-on-accent); }
.claimant-locale-link:focus-visible, .claimant-skip:focus-visible { outline: 3px solid var(--claimant-accent);
  outline-offset: 2px; }
.claimant-skip { position: absolute; left: 1rem; top: -4rem; min-height: 2.75rem; min-width: 2.75rem;
  padding: 0.6rem 1rem; background: var(--claimant-surface); color: var(--claimant-accent);
  border: 1px solid var(--claimant-accent); border-radius: 0.375rem; z-index: 10; }
.claimant-skip:focus { top: 1rem; }
.claimant-sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.claimant-fallback-notice { background: transparent; border: 1px solid var(--claimant-line);
  border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 0 0 1rem; color: var(--claimant-ink); }
.claimant-required { color: var(--claimant-muted); font-weight: 400; }