/* ==========================================================================
   "Assign a claim" form and Privacy Notice page.
   Builds on v3.css (.cform, .cf-row, .cf-err, .btn). No inline styles on these
   pages: their Content-Security-Policy is style-src 'self'.
   ========================================================================== */

.claim-page{ background:var(--mist); }
.claim-shell{ max-width:980px; }
.claim-h1{ font-size:clamp(2.6rem,5.4vw,4.6rem); margin:.4rem 0 0; color:var(--ink); }
.claim-page .lede{ margin-top:1.4rem; max-width:62ch; }

.claim-secure{
  display:flex; gap:.8rem; align-items:flex-start;
  margin:1.8rem 0 2.2rem; padding:1rem 1.2rem;
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--navy);
  color:var(--ink); font-weight:600; font-size:1rem; line-height:1.55;
}
.claim-secure svg{ flex:none; color:var(--navy); margin-top:.1rem; }

.claim-form{ padding:0; background:transparent; border:0; }

/* ---------- section cards ---------- */
.claim-card{
  background:var(--surface); border:1px solid var(--line);
  margin:0 0 1rem;
}
.claim-card > summary{
  list-style:none; cursor:pointer;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem;
  min-height:var(--target-min,44px); padding:1.15rem 3.4rem 1.15rem 1.4rem; position:relative;
}
.claim-card > summary::-webkit-details-marker{ display:none; }
.claim-card > summary::after{
  content:""; position:absolute; right:1.5rem; top:50%;
  width:.7rem; height:.7rem; margin-top:-.5rem;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.claim-card[open] > summary::after{ transform:rotate(-135deg); margin-top:-.15rem; }
.claim-card > summary:hover{ background:var(--sky-pale); }
.claim-card > summary:focus-visible{ outline:2px solid var(--navy); outline-offset:-2px; }
.claim-sec{ font-family:var(--serif); font-size:1.65rem; color:var(--ink); line-height:1.15; }
.claim-hint{ font-size:.95rem; color:var(--ink-2); }

.claim-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem;
  padding:.4rem 1.4rem .6rem; border-top:1px solid var(--line);
}
.claim-grid .cf-row{ margin:1rem 0 .4rem; }
.claim-wide{ grid-column:1 / -1; }
.claim-amount{ display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem; align-items:start; }
/* currency names are long ("USD – US Dollar"): the box gets half the row, and its own row on phones */
.claim-amount select{ text-overflow:ellipsis; }

.claim-note{ display:block; margin-top:.4rem; font-size:.9rem; color:var(--ink-2); line-height:1.5; }
.claim-files{ margin:.5rem 0 0; padding:0; list-style:none; font-size:.92rem; color:var(--ink); }
.claim-files li{ padding:.2rem 0; word-break:break-all; }
.cform input[type="file"]{ padding:.7rem; min-height:52px; cursor:pointer; }

/* ---------- consent + send ---------- */
.claim-consent{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; align-items:start;
  margin:1.6rem 0 .6rem; padding:1.2rem 1.4rem; background:var(--surface); border:1px solid var(--line);
}
.claim-consent input{ width:26px; height:26px; min-height:0; margin:.15rem 0 0; accent-color:var(--navy); cursor:pointer; }
.claim-consent label{ margin:0; font-weight:600; font-size:1rem; line-height:1.55; cursor:pointer; }
.claim-consent label a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.claim-consent .cf-err{ grid-column:2; }
.claim-send{ min-height:52px; padding:0 2rem; font-size:1rem; }

/* ---------- thank-you ---------- */
.claim-done{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--navy); padding:clamp(1.6rem,4vw,3rem); }
.claim-done:focus{ outline:none; }
.claim-done h2{ font-size:clamp(2rem,4vw,3rem); color:var(--ink); margin:0 0 1.6rem; }
.claim-ref-label{ font-family:var(--mono); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); margin:0; }
.claim-ref{ font-family:var(--mono); font-size:clamp(1.5rem,4vw,2.2rem); font-weight:500; color:var(--navy); margin:.2rem 0 1rem; letter-spacing:.04em; }

/* ---------- Date of Loss: chosen in the calendar, shown as "3rd of June 2026" */
.claim-date{ position:relative; }
.claim-date-btn{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  width:100%; min-height:52px; padding:.85rem 1rem;
  font-family:var(--sans); font-size:1.05rem; line-height:1.35; text-align:left; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:0; cursor:pointer;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.claim-date-btn:hover{ border-color:var(--navy); }
.claim-date-btn:focus-visible{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(22,68,128,.16); }
.claim-date-btn svg{ flex:none; color:var(--navy); }
.claim-date-btn [data-empty="true"]{ color:var(--ink-2); }
/* The native picker stays in the layout so showPicker() can open it, but is
   invisible: the only way into the field is the calendar, never typing. */
.claim-date-native{ position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; border:0; }

.claim-done-lead{ font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.45; color:var(--ink); margin:0 0 1.6rem; }

/* ---------- footer pieces written without inline styles ---------- */
.ftr-logo{ height:170px; margin-bottom:1rem; }
.ftr-desc{ max-width:32ch; }
.ftr-addr{ margin:0; }

/* ---------- privacy page ---------- */
.privacy-draft{
  margin:1.6rem 0 2rem; padding:1rem 1.2rem; border:1px solid var(--attention);
  border-left:4px solid var(--attention); background:var(--surface); color:var(--attention); font-weight:700; font-size:1rem;
}
.privacy-body h2{ font-family:var(--sans); font-size:1.3rem; font-weight:800; color:var(--ink); margin:2.2rem 0 .6rem; line-height:1.3; }
.privacy-body p{ max-width:68ch; margin:0; }
.tbc{ color:var(--attention); font-weight:700; }

@media (max-width:760px){
  .claim-grid{ grid-template-columns:1fr; padding:.2rem 1rem .6rem; }
  .claim-card > summary{ padding-left:1rem; }
  .claim-sec{ font-size:1.4rem; }
  .claim-amount{ grid-template-columns:1fr; }
  .claim-amount > div + div{ margin-top:1rem; }
}

/* Cloudflare Turnstile widget, above the status line and the send button */
.claim-turnstile:not(:empty){ margin:1.2rem 0 .4rem; min-height:65px; }