/* Product shell. Replaces the schematic stage/device frame with a real full-viewport app.
   Nothing here changes an Option 04 screen; it only removes the comparison scaffolding. */
html, body { height:100%; }
body { margin:0; background:var(--bg); }
#app.screen {
  max-width:520px; margin:0 auto; min-height:100dvh;
  background:var(--bg); box-shadow:0 0 0 1px var(--line);
}
@media (max-width:520px) { #app.screen { box-shadow:none; } }

/* TASK 26 — real profile photographs (decision 1). The palette swatch styles stay for
   island pictures, which are palette by accepted design; these are for actual images. */
.photo { width:100%; height:100%; object-fit:cover; border-radius:var(--r); display:block; }
.photo.hero { height:190px; margin-bottom:12px; }
.photos .cell { position:relative; height:92px; }
.photos .cell .photo { height:92px; }
.mainbadge { position:absolute; left:5px; top:5px; background:var(--accent); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.06em; border-radius:6px; padding:3px 6px; }

/* TASK 26 — safeguarding controls (G9). Deliberately quiet: present on the screen that
   identifies the person, never competing with the action the member came to perform. */
.safeguard { display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.safeguard .textlink { width:auto; padding:6px 0; font-size:13px; color:var(--ink3); }
.safeguard .textlink:hover { color:var(--stop); }
.photo.avatarlg { width:96px; height:96px; border-radius:50%; margin:10px 0; }
.msg .sv { margin-left:8px; }

/* TASK 26 — the two procedures that gained the inputs the real backend requires:
   Found an island, and Create an event. Styled to the existing fieldbox pattern. */
.fieldbox select,
.fieldbox input[type="datetime-local"] {
  width:100%; font:inherit; font-size:15px; padding:10px 11px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
}
.pickrow { display:flex; align-items:center; gap:10px; padding:8px 0;
  font-size:15px; cursor:pointer; }
.pickrow input { width:18px; height:18px; flex:none; margin:0; }
.card .sh { margin-top:0; }