/* photo_modal_html — the form's stylesheet.
   Every rule is scoped :where(.pxm-photo-root), which adds no specificity, so
   no rule changes which declaration wins. The <dialog> stays in the form's DOM
   tree when showModal() puts it in the top layer, so the ancestor still
   matches; nothing in this form or in any host moves the node.
   One rule is new: .mar-photo-fileinput replaces the file input's inline
   style="display:none". */
/* ===== Resident photo upload / crop dialog (PXMAR, contract §5.5) =====
   Unified scaffold (port of px-internal + carehome-portal twins).
   Tokens: --pxm-* ONLY (contract §6); the pinned invalid-input reds
   (#dc2626/#fef2f2/#7f1d1d, CR-INT-13) are the only colour literals.
   The white canvas matte in the JS export is PRINT content, not UI. */
:where(.pxm-photo-root) .mar-photo-dialog {
  border: none; border-radius: var(--pxm-radius-lg); box-shadow: var(--pxm-shadow-lg);
  padding: 0; max-width: 460px; width: 92vw; background: var(--pxm-bg-card);
  color: var(--pxm-text-primary); font-family: var(--pxm-font);
}
:where(.pxm-photo-root) .mar-photo-dialog::backdrop { background: var(--pxm-bg-overlay); }
:where(.pxm-photo-root) .mar-photo-header {
  padding: 16px; border-bottom: 1px solid var(--pxm-border);
}
:where(.pxm-photo-root) .mar-photo-header-text { min-width: 0; }
:where(.pxm-photo-root) .mar-photo-title { font-size: 17px; font-weight: 600; color: var(--pxm-text-primary); margin: 0; }
:where(.pxm-photo-root) .mar-photo-idline { font-size: 12px; color: var(--pxm-text-muted); margin-top: 3px; word-break: break-word; }
:where(.pxm-photo-root) .mar-photo-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
:where(.pxm-photo-root) .mar-photo-error {
  background: #fef2f2; border: 1px solid #dc2626; color: #7f1d1d;
  font-size: 12.5px; border-radius: var(--pxm-radius-md); padding: 9px 12px;
}
:where(.pxm-photo-root) .mar-photo-error[hidden] { display: none; }
:where(.pxm-photo-root) .mar-photo-filepick {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--pxm-border);
  border-radius: var(--pxm-radius-md); padding: 8px 10px; background: var(--pxm-input-bg);
  font-size: 12.5px; color: var(--pxm-text-muted);
}
:where(.pxm-photo-root) .mar-photo-fbtn {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--pxm-radius-sm);
  background: var(--pxm-bg-elevated); border: 1px solid var(--pxm-border); color: var(--pxm-text-primary);
  cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-fbtn:hover:not(:disabled) { border-color: var(--pxm-border-strong); }
:where(.pxm-photo-root) .mar-photo-fbtn:disabled { opacity: .5; cursor: default; }
/* #mar-photo-file starts hidden (no inline style in a template). */
:where(.pxm-photo-root) .mar-photo-fileinput { display: none; }
:where(.pxm-photo-root) .mar-photo-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.pxm-photo-root) .mar-photo-cropwrap { display: flex; gap: 16px; align-items: flex-start; }
/* 5:6 viewport — WYSIWYG. The framed area is exactly what is exported. */
:where(.pxm-photo-root) .mar-photo-cropframe {
  width: 175px; height: 210px; border-radius: var(--pxm-radius-md); position: relative;
  overflow: hidden; background: var(--pxm-bg-elevated);
  border: 2px solid var(--pxm-info); flex: none; touch-action: none;
}
:where(.pxm-photo-root) .mar-photo-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
:where(.pxm-photo-root) .mar-photo-canvas.dragging { cursor: grabbing; }
:where(.pxm-photo-root) .mar-photo-cropframe.empty .mar-photo-canvas { cursor: default; }
:where(.pxm-photo-root) .mar-photo-cropframe .mar-photo-ratio {
  position: absolute; right: 5px; bottom: 5px;
  background: var(--pxm-bg-overlay); color: var(--pxm-text-inverse);
  font-size: 10px; padding: 1px 6px; border-radius: var(--pxm-radius-sm); letter-spacing: .03em;
  pointer-events: none;
}
:where(.pxm-photo-root) .mar-photo-cropframe .mar-photo-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 8px; font-size: 11.5px; color: var(--pxm-text-muted);
  pointer-events: none;
}
:where(.pxm-photo-root) .mar-photo-cropframe:not(.empty) .mar-photo-placeholder { display: none; }
:where(.pxm-photo-root) .mar-photo-ctrls { flex: 1; font-size: 12.5px; color: var(--pxm-text-secondary); min-width: 0; }
:where(.pxm-photo-root) .mar-photo-ctrls .mar-photo-hint { margin: 0 0 10px; line-height: 1.45; }
:where(.pxm-photo-root) .mar-photo-ctrls .mar-photo-hint b { color: var(--pxm-text-primary); }
:where(.pxm-photo-root) .mar-photo-ctrl-label { display: block; font-size: 11px; font-weight: 600; color: var(--pxm-text-secondary); margin: 10px 0 4px; }
:where(.pxm-photo-root) .mar-photo-zoom { width: 100%; accent-color: var(--pxm-info); }
:where(.pxm-photo-root) .mar-photo-zoom:disabled { opacity: .5; }
:where(.pxm-photo-root) .mar-photo-rotate-btn {
  margin-top: 10px; font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-radius: var(--pxm-radius-sm); background: var(--pxm-bg-elevated);
  border: 1px solid var(--pxm-border); color: var(--pxm-text-primary); cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-rotate-btn:hover:not(:disabled) { border-color: var(--pxm-border-strong); }
:where(.pxm-photo-root) .mar-photo-rotate-btn:disabled { opacity: .5; cursor: default; }
:where(.pxm-photo-root) .mar-photo-prov { font-size: 12px; color: var(--pxm-text-muted); margin-top: 4px; }
:where(.pxm-photo-root) .mar-photo-prov[hidden] { display: none; }
:where(.pxm-photo-root) .mar-photo-footer {
  padding: 16px; border-top: 1px solid var(--pxm-border);
  display: flex; justify-content: flex-end; gap: 10px;
}
:where(.pxm-photo-root) .mar-photo-remove {
  padding: 8px 18px; font-size: 14px; font-family: var(--pxm-font);
  background: var(--pxm-bg-card); color: var(--pxm-danger); border: 1px solid var(--pxm-danger);
  border-radius: var(--pxm-radius-md); cursor: pointer; margin-right: auto;
}
:where(.pxm-photo-root) .mar-photo-remove:hover:not(:disabled) { background: #fef2f2; }
:where(.pxm-photo-root) .mar-photo-remove[hidden] { display: none; }
:where(.pxm-photo-root) .mar-photo-cancel {
  padding: 8px 20px; font-size: 14px; font-family: var(--pxm-font);
  background: var(--pxm-bg-elevated); color: var(--pxm-text-secondary);
  border: 1px solid var(--pxm-border); border-radius: var(--pxm-radius-md); cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-cancel:hover:not(:disabled) { border-color: var(--pxm-border-strong); color: var(--pxm-text-primary); }
:where(.pxm-photo-root) .mar-photo-save {
  padding: 8px 20px; font-size: 14px; font-weight: 500; font-family: var(--pxm-font);
  background: var(--pxm-info); color: var(--pxm-text-inverse);
  border: none; border-radius: var(--pxm-radius-md); cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-save:hover:not(:disabled) { filter: brightness(0.92); }
:where(.pxm-photo-root) .mar-photo-save:disabled, :where(.pxm-photo-root) .mar-photo-remove:disabled, :where(.pxm-photo-root) .mar-photo-cancel:disabled { opacity: .5; cursor: default; }
/* In-dialog Remove confirm strip. Kept inside the <dialog> (not a
   normal-DOM overlay / window.confirm) because the dialog is shown with
   showModal() (browser top layer) and a normal-DOM overlay would render
   BEHIND it. Same in-dialog confirm pattern the 3P pill-reset uses. */
:where(.pxm-photo-root) .mar-photo-confirm {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--pxm-border);
  background: #fef2f2;
}
:where(.pxm-photo-root) .mar-photo-confirm[hidden] { display: none; }
:where(.pxm-photo-root) .mar-photo-confirm-msg { font-size: 13px; font-weight: 600; color: #7f1d1d; }
:where(.pxm-photo-root) .mar-photo-confirm-spacer { flex: 1; }
:where(.pxm-photo-root) .mar-photo-confirm-keep {
  padding: 8px 18px; font-size: 14px; font-family: var(--pxm-font);
  background: var(--pxm-bg-elevated); color: var(--pxm-text-secondary);
  border: 1px solid var(--pxm-border); border-radius: var(--pxm-radius-md); cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-confirm-ok {
  padding: 8px 18px; font-size: 14px; font-family: var(--pxm-font);
  background: var(--pxm-bg-card); color: var(--pxm-danger); border: 1px solid var(--pxm-danger);
  border-radius: var(--pxm-radius-md); cursor: pointer;
}
:where(.pxm-photo-root) .mar-photo-confirm-ok:hover:not(:disabled) { background: #fef2f2; }
:where(.pxm-photo-root) .mar-photo-confirm-keep:disabled, :where(.pxm-photo-root) .mar-photo-confirm-ok:disabled { opacity: .5; cursor: default; }
@media (max-width: 768px) {
  :where(.pxm-photo-root) .mar-photo-dialog { width: 95vw; }
  :where(.pxm-photo-root) .mar-photo-cropwrap { flex-direction: column; align-items: center; }
}