/* My Fifty. Every size and colour here comes from "Edge – Final Mockup" (screens L1-L25); screens use the same
   values inline where the mockup did. Light only, like the mockup. */
:root {
  --bg: #f2f3f7;
  --ink: #062064;
  --muted: #6b7486;
  --blue: #1170c0;
  --soft: #eef2f8;
  --line: #e3e6ec;
  --grey: #9aa1ad;
  --chev: #c4c7ce;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;   /* Inter, like the mockup (Yousef 2026-10-21) */
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }   /* a long link, an email shown as a name or a long clinic name breaks at the edge instead of widening the page (real-data run RD2) */
/* No zooming, like a native app (Yousef 2026-10-21): no double-tap zoom, no pinch (with the viewport tag and the
   gesture guard in app.js for iPhone Safari, which ignores the tag). Inputs stay at 16px+ so iOS never zooms on focus. */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100dvh; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, textarea, select { font: inherit; color: var(--ink); }
svg { flex: none; }

/* The app is a phone screen; on a wide screen it sits in a phone-width column. */
#app { max-width: 430px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--bg); }
.scr { min-height: 100dvh; padding: calc(var(--safe-top) + 14px) 16px calc(var(--safe-bottom) + 100px); display: flex; flex-direction: column; }
.scr.full { padding-bottom: calc(var(--safe-bottom) + 24px); }

/* Bottom tabs (every L screen) */
.tabs { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 430px; z-index: 20;
  padding: 8px 0 calc(var(--safe-bottom) + 6px); min-height: 60px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 0.5px solid #d6d9df; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--grey); }
.tabs a.on { color: var(--ink); }
.tabs .plus { width: 44px; height: 30px; border-radius: 15px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; }

/* Sheets (L3 Log it, L13 Add a person) slide up over a dimmed screen */
#sheet:empty { display: none; }
.dim { position: fixed; inset: 0; background: rgba(40, 52, 75, 0.62); z-index: 40; animation: fade .18s ease; }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 430px; z-index: 41; max-height: calc(100dvh - var(--safe-top) - 24px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  background: #fff; border-radius: 30px 30px 0 0; padding: 10px 18px calc(var(--safe-bottom) + 24px);
  display: flex; flex-direction: column; gap: 16px; animation: up .22s ease; }
/* Rows keep their height so a tall sheet scrolls instead of squashing (L13 Add a person could not be scrolled). */
.sheet > * { flex-shrink: 0; }
.sheet.tall { top: calc(var(--safe-top) + 24px); }
.sheet.dragging { animation: none; transition: none; }
.sheet.closing { transition: transform .18s ease; }
.grab { align-self: center; width: 38px; height: 5px; border-radius: 3px; background: #d0d5de; flex: none; }
@keyframes up { from { transform: translate(-50%, 40px); opacity: .4; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Full-screen moments (L4, L5) */
.moment { position: fixed; inset: 0; z-index: 50; background: radial-gradient(110% 80% at 50% 20%, #3596ea 0%, #1170c0 50%, #0b4f9c 100%);
  color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(var(--safe-top) + 14px) 24px 0; animation: fade .2s ease; }
.moment .inner { width: 100%; max-width: 430px; flex: 1; display: flex; flex-direction: column; align-items: center; }

/* Inputs keep the mockup's look (no browser chrome) */
.bare { border: 0; background: transparent; outline: none; }
.bare::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea.note { width: 100%; min-height: 96px; resize: none; border: 0; outline: none; background: transparent; font-size: 16px; line-height: 1.4; }

#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-bottom) + 92px); z-index: 60; max-width: 360px; width: calc(100% - 32px);
  background: #0b1220; color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 15px; font-weight: 500; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.on { opacity: 1; }

.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(17, 112, 192, .2); border-top-color: var(--blue); animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.rec { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(214, 69, 69, .18); } }
.hide { display: none !important; }

/* L9 product step: the paid quantity as a native list (Yousef 2026-10-22); 16px so iOS never zooms on focus. */
.qtysel { width: 56px; height: 40px; border: 0; border-radius: 10px; background-color: var(--soft); color: var(--ink);
  font-size: 16px; font-weight: 700; text-align: center; text-align-last: center; padding: 0 14px 0 4px; flex: none;
  -webkit-appearance: none; appearance: none; outline: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23062064' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; }
.qtysel:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.qtybox { background-image: none; padding: 0 4px; cursor: text; -moz-appearance: textfield; }
.qtybox::-webkit-outer-spin-button, .qtybox::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* History: a long note or email shows three lines until "More" (RD12, 2026-10-23). */
.clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }