/* WHO IS SHE claim portal — a thin layer on top of friends.css.
 *
 * friends.css carries the storefront tokens (IBM Plex headings, Helvetica body,
 * square buttons and inputs); everything here is claim-specific structure only.
 * Same rule as the rest of the portal work: never a raw browser control — the
 * checkbox and radio inputs are hidden and the indicator is drawn.
 */

/* Progress: three hairlines, filled as the customer moves. Quieter than numbers,
   and it survives translation. */
.cp-steps {
  display: flex; gap: var(--gap-2xs); list-style: none;
  max-width: 560px; margin: 0 auto; padding: 0 var(--padding-lg);
}
.cp-steps li { flex: 1; height: 2px; background: var(--color-hairline); }
.cp-steps li.is-done { background: var(--color-foreground); }

.cp-wrap { max-width: 560px; margin: 0 auto; padding: var(--padding-2xl) var(--padding-lg);
  padding-bottom: calc(var(--padding-4xl) + env(safe-area-inset-bottom)); }
/* Smaller than the storefront's h1 (Sigve, 2026-08-09): this is a form to fill
   in, not a campaign page — the heading shouldn't take half a phone screen. */
.cp-title { font-size: clamp(1.5rem, 3.2vw, 1.75rem); margin-bottom: var(--gap-xs); }
/* A second heading inside a step ("where should it go?") is a subhead, not
   another page title. */
.cp-subtitle { font-size: var(--font-size-h3); margin: var(--gap-2xl) 0 var(--gap-md); }
.cp-intro { font-size: var(--font-size-sm); color: var(--color-foreground-subdued);
  margin: 0 0 var(--gap-xl); line-height: var(--line-height-body); }
.cp-error { border: var(--border-width) solid var(--color-foreground);
  padding: var(--padding-md); margin: 0 0 var(--gap-lg);
  font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.cp-actions { display: flex; align-items: center; gap: var(--gap-md);
  margin-top: var(--gap-xl); }
.cp-back { font-size: var(--font-size-sm); color: var(--color-foreground-muted); }

/* --- Order lines ---------------------------------------------------------- */
.cp-line { display: flex; align-items: flex-start; gap: var(--gap-md);
  padding: var(--padding-lg) 0; border-top: 1px solid var(--color-hairline); }
.cp-line:first-of-type { border-top: 0; }
.cp-line.is-taken { opacity: .45; }
.cp-thumb { width: 72px; height: 72px; object-fit: cover; flex: 0 0 auto; }
.cp-line-body { flex: 1; min-width: 0; }
.cp-line-title { font-size: var(--font-size-sm); font-weight: 600; }
.cp-line-sub { font-size: var(--font-size-h6); color: var(--color-foreground-muted);
  margin-top: 2px; }
/* The reason + comment only matter once the line is ticked. */
.cp-line-fields { margin-top: var(--gap-md); }
.cp-line-fields[hidden] { display: none; }   /* a class with display beats UA [hidden] */

/* --- Drawn controls ------------------------------------------------------- */
.cp-pick, .cp-radio { display: flex; align-items: center; gap: var(--gap-sm);
  cursor: pointer; font-size: var(--font-size-sm); }
/* The tick belongs beside the photo, not floating in the middle of a tall row. */
.cp-line .cp-pick { padding-top: 26px; }
.cp-radio { padding: var(--padding-sm) 0; }
.cp-pick input, .cp-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-box, .cp-dot { width: 20px; height: 20px; flex: 0 0 auto; position: relative;
  border: var(--border-width) solid var(--color-foreground); background: transparent; }
.cp-dot { border-radius: 50%; }
.cp-pick input:checked + .cp-box, .cp-radio input:checked + .cp-dot {
  background: var(--color-foreground); }
.cp-pick input:checked + .cp-box::after { content: ""; position: absolute;
  left: 6px; top: 2px; width: 5px; height: 11px;
  border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(42deg); }
.cp-radio input:checked + .cp-dot::after { content: ""; position: absolute; inset: 5px;
  border-radius: 50%; background: #fff; }
.cp-pick input:focus-visible + .cp-box,
.cp-radio input:focus-visible + .cp-dot { outline: 2px solid var(--color-foreground);
  outline-offset: 3px; }
.cp-pick input:disabled + .cp-box { border-color: var(--color-hairline); }

/* --- Photo upload --------------------------------------------------------- */
.cp-file { display: block; border: var(--border-width) dashed var(--color-foreground);
  padding: var(--padding-xl) var(--padding-lg); text-align: center; cursor: pointer;
  font-size: var(--font-size-sm); }
.cp-file input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-file-hint { display: block; font-size: var(--font-size-h6);
  color: var(--color-foreground-muted); margin-top: var(--gap-2xs); }
.cp-previews { display: flex; flex-wrap: wrap; gap: var(--gap-2xs);
  margin-top: var(--gap-md); }
.cp-previews img { width: 84px; height: 84px; object-fit: cover; }

.cp-addr[hidden] { display: none; }
.cp-addr { margin-top: var(--gap-md); }
.cp-summary { border: 1px solid var(--color-hairline); padding: var(--padding-md);
  font-size: var(--font-size-sm); line-height: var(--line-height-body); }
.cp-done { text-align: center; }
.cp-ref { font-size: var(--font-size-h6); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--color-foreground-muted);
  margin-top: var(--gap-xl); }