/* Courier affidavit screens (ca-*): #/courier/affidavits and #/courier/affidavits/session. Mobile-first,
   large touch targets, tokens only (dark mode / high contrast / reduced motion come from tokens & base). */

.ca-page { padding-bottom: calc(var(--space-12) + var(--safe-bottom)); }
/* The session list ends with the last affidavit's "חתום" button: leave room so it can scroll clear of the bottom bar and toasts. */
.ca-page.ca-session { padding-bottom: calc(112px + var(--safe-bottom)); }
.ca-page .page-header { margin-bottom: var(--space-4); }
.ca-center { justify-content: center; text-align: center; }

/* ---- Session banner & CTA -------------------------------------------- */
.ca-banner {
  display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4);
  color: inherit; text-decoration: none; border-color: color-mix(in srgb, var(--success) 45%, var(--border));
  background: linear-gradient(90deg, var(--success-soft), var(--surface) 80%);
}
.ca-banner.is-waiting { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); background: linear-gradient(90deg, var(--warning-soft), var(--surface) 80%); }
.ca-banner:hover { box-shadow: var(--shadow-md); }
.ca-banner__dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.ca-banner.is-waiting .ca-banner__dot { background: var(--warning); }
.ca-banner__dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; color: inherit; opacity: 0; }
.ca-banner__title { display: block; font-weight: var(--fw-semibold); }
.ca-banner__text { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }

.ca-cta {
  position: relative; overflow: hidden; padding: var(--space-6) var(--space-5) var(--space-5); margin-bottom: var(--space-5);
  background: radial-gradient(140% 120% at 100% 0%, var(--ink-3) 0%, var(--ink) 65%); color: var(--ink-text);
  border-color: transparent; box-shadow: var(--shadow-lg);
}
.ca-cta::after {
  content: ''; position: absolute; inset-inline-start: -60px; top: -70px; width: 180px; height: 180px; border-radius: 50%;
  box-shadow: 0 0 0 28px var(--ink-hover), 0 0 0 56px var(--ink-hover); pointer-events: none;
}
.ca-cta > * { position: relative; z-index: 1; }
.ca-cta__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ink-active); color: var(--ink-text); margin-bottom: var(--space-3); }
.ca-cta__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--ink-text); margin: 0; }
.ca-cta__text { color: var(--ink-muted); margin: var(--space-2) 0 var(--space-5); line-height: var(--lh-relaxed); }

.ca-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.ca-tabpanel { padding-top: var(--space-4); }

/* ---- Lists ------------------------------------------------------------ */
.ca-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.ca-pending { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ca-pending.is-urgent, .ca-pending.is-blocked, .ca-pending.is-signed { border-inline-start-width: 4px; }
.ca-pending.is-urgent { border-inline-start-color: var(--danger); }
.ca-pending.is-blocked { border-inline-start-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface)); }
.ca-pending.is-signed { border-inline-start-color: var(--info); }
.ca-pending__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ca-pending__title { font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: var(--lh-snug); }
.ca-pending__line { display: flex; align-items: flex-start; gap: var(--space-1-5); font-size: var(--fs-sm); color: var(--text-muted); }
.ca-pending__line .icon { flex-shrink: 0; margin-top: 3px; }
.ca-pending__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--fs-xs); color: var(--text-subtle); }
.ca-pending__state { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.ca-pending__state .icon { flex-shrink: 0; margin-top: 2px; }
.ca-pending__state.is-info { background: var(--info-soft); color: var(--info-text); }
.ca-pending__state.is-danger { background: var(--danger-soft); color: var(--danger-text); font-weight: var(--fw-medium); }
.ca-pending__state.is-warning { background: var(--warning-soft); color: var(--warning-text); }
.ca-pending__link {
  display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; min-height: 44px; margin-block: calc(-1 * var(--space-1));
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--primary-text); text-decoration: none;
}
.ca-pending__link:hover { text-decoration: underline; }
.ca-deadline { flex-shrink: 0; }

.ca-lawyer { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ca-lawyer__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }
.ca-lawyer__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--primary-soft); color: var(--primary-text); flex-shrink: 0; }
.ca-lawyer__name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.ca-lawyer__city { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--text-muted); }
.ca-lawyer__line { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.ca-lawyer__line .icon { flex-shrink: 0; margin-top: 3px; }
.ca-lawyer__line.is-muted { color: var(--text-subtle); }
.ca-lawyer__note { color: var(--text); }
.ca-lawyer__call { margin-top: var(--space-2); min-height: var(--touch, 48px); justify-content: center; gap: var(--space-2); }

.ca-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: var(--space-5) 0 var(--space-3); }
.ca-section-head__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.ca-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--surface-3); font-size: var(--fs-xs); }

/* ---- Join ------------------------------------------------------------- */
.ca-join__card { padding: var(--space-6) var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.ca-join__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-2); border-radius: 20px; background: var(--primary-soft); color: var(--primary-text); }
.ca-join__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; }
.ca-join__text { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.ca-join .otp { gap: 8px; }
.ca-join .otp__box { width: min(48px, 12vw); height: 60px; font-size: var(--fs-2xl); }
/* The join error is centred under the boxes: keep its icon next to the (balanced, possibly two-line) text instead of
   alone at the far edge of a flex row. */
.ca-join .field__error { display: block; text-align: center; text-wrap: balance; }
.ca-join .field__error .icon { display: inline-block; vertical-align: -2px; margin-inline-end: var(--space-1); }
.ca-geo { display: block; margin-top: var(--space-3); font-size: var(--fs-xs); line-height: var(--lh-relaxed); color: var(--text-muted); text-align: center; text-wrap: balance; }
.ca-geo .icon { display: inline-block; vertical-align: -3px; margin-inline-end: var(--space-1); }
.ca-geo .btn--link { display: inline-flex; vertical-align: baseline; margin-inline-start: var(--space-2); }
.ca-geo.is-ok { color: var(--success-text); }
.ca-geo.is-error { color: var(--warning-text); }
.ca-help { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-4); padding-inline: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); }
.ca-help .icon { flex-shrink: 0; margin-top: 3px; }

/* ---- Session ---------------------------------------------------------- */
.ca-progress { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.ca-progress__live { display: flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-xs); color: var(--warning-text); }

.ca-done { padding: var(--space-6) var(--space-5); margin-bottom: var(--space-4); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  border-color: color-mix(in srgb, var(--success) 45%, var(--border)); background: linear-gradient(180deg, var(--success-soft), var(--surface) 75%); }
.ca-done__check { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--success); color: var(--on-primary);
  box-shadow: 0 10px 26px -10px var(--success); animation: ca-pop var(--dur-5) var(--ease-spring) both; }
@keyframes ca-pop { from { transform: scale(0.5); opacity: 0; } to { transform: none; opacity: 1; } }
.ca-done__title { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: var(--space-2) 0 0; }
.ca-done__text { color: var(--text-muted); margin-bottom: var(--space-3); }

.ca-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ca-item { padding: var(--space-4); scroll-margin-top: calc(var(--mobile-header-h, 56px) + var(--space-3)); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.ca-item.is-open { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); box-shadow: var(--shadow-md), 0 0 0 3px var(--primary-ring); }
.ca-item.is-certified { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.ca-item.is-fresh-certified { animation: ca-glow 2.4s var(--ease-out); }
@keyframes ca-glow { 0%, 35% { background: var(--success-soft); } 100% { background: var(--surface); } }
.ca-item__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.ca-item__num {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3); color: var(--text-muted); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.ca-item.is-open .ca-item__num { background: var(--primary); color: var(--on-primary); }
.ca-item.is-signed .ca-item__num { background: var(--info-soft); color: var(--info-text); }
.ca-item.is-certified .ca-item__num { background: var(--success); color: var(--on-primary); }
.ca-item.is-fresh-certified .ca-item__num { animation: ca-pop var(--dur-5) var(--ease-spring) both; }
.ca-item.is-blocked .ca-item__num { background: var(--danger-soft); color: var(--danger-text); }
.ca-item__title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; outline: none; }
.ca-item__title:focus-visible { box-shadow: 0 0 0 3px var(--primary-ring); border-radius: 4px; }
.ca-item__meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.ca-item__chip { margin-top: var(--space-2); perspective: 400px; }
.ca-item__state { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.ca-item__state .icon { flex-shrink: 0; margin-top: 2px; }
.ca-item__state.is-info { background: var(--info-soft); color: var(--info-text); }
.ca-item__state.is-success { background: var(--success-soft); color: var(--success-text); font-weight: var(--fw-medium); }
.ca-item__state.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.ca-item__body { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.ca-item__error { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-text); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ca-item__legal { font-size: var(--fs-xs); color: var(--text-subtle); text-align: center; margin-top: calc(-1 * var(--space-3)); line-height: var(--lh-relaxed); }

.ca-step { display: flex; flex-direction: column; gap: var(--space-2); }
.ca-step__label { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ca-step__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.ca-step > .btn { align-self: flex-start; }

.ca-doc { position: relative; height: 340px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--paper-line); background: var(--paper); box-shadow: var(--shadow-inset); }
.ca-doc--tall { height: calc(100dvh - 220px); min-height: 360px; }
.ca-doc__frame { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
.ca-doc__loading { position: absolute; inset: 0; display: grid; place-items: center; }

.ca-consent { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.ca-consent.is-checked { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: var(--success-soft); }

.ca-lastsig { display: flex; flex-direction: column; gap: var(--space-2); }
.ca-lastsig__bar { flex-wrap: wrap; }
.ca-lastsig__note { display: inline-flex; align-items: center; gap: var(--space-1-5); font-size: var(--fs-xs); color: var(--text-muted); }
.ca-lastsig__note .icon { flex-shrink: 0; }
.ca-lastsig__paper { display: grid; place-items: center; min-height: 140px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); border: 1.5px dashed var(--paper-line); }
.ca-lastsig__paper img { max-width: 100%; max-height: 110px; object-fit: contain; }

@media (min-width: 768px) {
  .ca-doc { height: 420px; }
}

/* ---- Touch targets (mobile) --------------------------------------------
   Small buttons, the pill tabs, the link-style "חתימה חדשה" and the signature-pad tools are tapped with a thumb,
   often in a hurry in front of the lawyer: keep them at least 44px tall on phones. */
@media (max-width: 767.98px) {
  .ca-page .btn--sm { --btn-h: 44px; }
  .ca-page .btn--link.btn--sm { min-height: 44px; padding-inline: var(--space-2); }
  .ca-page .tabs--pills .tabs__list { display: flex; width: 100%; }
  .ca-page .tabs--pills .tab { min-height: 44px; flex: 1 1 0; justify-content: center; }
  .ca-page .sigpad__actions .btn { --btn-h: 44px; }
}

/* An affidavit that was just signed flashes once (replaces a toast that would cover the next "חתום" button). */
.ca-item.is-fresh-signed { animation: ca-glow-signed 2.4s var(--ease-out); }
@keyframes ca-glow-signed { 0%, 35% { background: var(--info-soft); } 100% { background: var(--surface); } }
.ca-item.is-fresh-signed .ca-item__num { animation: ca-pop var(--dur-5) var(--ease-spring) both; }