/* 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; }
/* TASK 105 — an island's uploaded image fills the same header box as the colour it replaces.
   Stored uncropped; cropped here only for presentation. */
.photo.islandhero { height:auto; aspect-ratio:16 / 9; margin-bottom:12px; object-fit:cover; object-position:center; }
/* Island picture frame is 16:9 whether it shows the uploaded image, the chosen colour or
   "No picture yet". Island boxes only; the profile photograph placeholder keeps .pic.hero. */
.pic.hero.islandhero { height:auto; aspect-ratio:16 / 9; }
.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; }

/* TASK 103 — the two help links on Log in and Create your account. Quiet on purpose: below
   the form, never competing with the button the visitor came to press. */
.helplinks { margin-top:18px; padding-top:6px; border-top:1px solid var(--line); }
.helplinks .textlink { padding:9px 0; font-size:13px; color:var(--ink2); }