/**
 * Framing a card before it is sent — the styling for public/js/framecard.js
 * v0.1 (2026-08-21)
 *
 * WHY THIS IS ITS OWN FILE RATHER THAN A BLOCK OF brand.css.
 *
 * The staff New Patient screen runs the PATIENT's appointment form — the same schema and the
 * same engine.js, served from the public tree at /shared/ rather than copied — but it wears the
 * STAFF stylesheet, because it is a staff screen with staff chrome around it. So a coordinator
 * photographing a card during the call reached engine.js's framing offer with none of the
 * `.fc-*` rules on the page: `window.frameCard &&` is a guard, so nothing threw and nothing
 * said anything. The card went up unframed and the feature simply was not there.
 *
 * The two ways out were a second copy of these rules in the staff stylesheet, or one file both
 * trees can link. A copy is the fault this project keeps finding — the zone list, the duplicate
 * screen predicate, the consent renderer, each with a comment claiming it was kept in step — so
 * it is one file, linked by the patient pages that load framecard.js and by the staff pages
 * through /shared/css/framecard.css.
 *
 * IT LEANS ON NOTHING IT CANNOT ASSUME. `.btn`, `.btn-primary` and `.btn-ghost` exist in both
 * stylesheets, and every custom property used here carries a fallback, so the pane looks right
 * on a staff page that never defines `--r-md`.
 */

/* ---- Framing a card before it is sent (js/framecard.js) -------------------
   Full-screen because a card is being judged, and judging it in a thumbnail is how a member ID
   gets cropped off. The frame is the only bright thing: everything outside it is shaded, so
   what will be sent is what is legible. */
.fc-pane {
  position: fixed; inset: 0; z-index: 60; background: rgba(20, 12, 16, .82);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.fc-box {
  background: #fff; border-radius: var(--r-md, 10px); padding: 1rem;
  max-width: 40rem; width: 100%; max-height: 100%; overflow: auto;
}
.fc-title { margin: 0 0 .25rem; font-size: 1.1rem; }
.fc-help { margin: 0 0 .75rem; font-size: .9rem; color: #5c5c5c; }
.fc-stage { position: relative; user-select: none; touch-action: none; line-height: 0;
             overflow: hidden; }
.fc-img { width: 100%; height: auto; display: block; }
/* The frame punches its own hole: a very large spread shadow darkens everything outside it and
   nothing inside. One mechanism — an extra overlay element would darken the framed area too,
   which is the one part that has to stay legible. `overflow:hidden` on .fc-stage keeps the
   shadow inside the picture. */
.fc-frame {
  position: absolute; border: 2px solid #E8C35E; cursor: move; background: transparent;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45);
}
.fc-h {
  position: absolute; width: 26px; height: 26px; background: #E8C35E;
  border: 2px solid #fff; border-radius: 50%; touch-action: none;
}
.fc-nw { left: -13px; top: -13px; cursor: nwse-resize; }
.fc-ne { right: -13px; top: -13px; cursor: nesw-resize; }
.fc-sw { left: -13px; bottom: -13px; cursor: nesw-resize; }
.fc-se { right: -13px; bottom: -13px; cursor: nwse-resize; }
.fc-actions { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }