/* Clarity Family app — port of "Clarity Family.dc.html" (Claude Design handoff). Rendered inside the ios-frame device. */

/* The design renders with browser-default content-box sizing; the site's global `* { box-sizing: border-box }` would shrink bordered boxes. */
.fam-app, .fam-app * { box-sizing: content-box; }
.fam-app { height: 100%; display: flex; flex-direction: column; position: relative; background: #FFFFFF; color: #0D1B1E; font-family: Manrope, system-ui, sans-serif; line-height: normal; text-align: left; }

/* Button reset — every interactive control is a real <button> styled to match the design's divs */
.fam-btn { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.fam-scroll { flex: 1; overflow: auto; scrollbar-width: none; }
.fam-scroll::-webkit-scrollbar { width: 0; height: 0; }
.fam-stage { position: relative; min-height: 874px; display: flex; flex-direction: column; }
.fam-bg { position: absolute; inset: 0; background-image: url(../assets/beach-sunset.jpg); background-size: cover; background-position: center; }

/* Header + tabs */
.fam-top { position: relative; padding: 62px 20px 0; display: flex; align-items: center; justify-content: space-between; color: #FFFFFF; }
.fam-brand { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-shadow: 0 1px 10px rgba(6,16,28,0.8); }
.fam-tabs { position: relative; padding: 14px 20px 0; display: flex; gap: 5px; }
.fam-tab { padding: 8px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(10,24,38,0.5); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.22); }
.fam-tab.fam-on { background: rgba(255,255,255,0.92); color: #14212E; border-color: rgba(255,255,255,0.92); }

/* Shared */
.fam-dot { width: 8px; height: 8px; border-radius: 50%; background: #9BF5C6; flex-shrink: 0; }
.fam-g-vital { background: linear-gradient(135deg,#6FD3C7 0%,#3E9FD1 100%); }
.fam-g-calm { background: linear-gradient(135deg,#9BB8F7 0%,#A99BF0 100%); }
.fam-g-good { background: linear-gradient(135deg,#8BDCA8 0%,#43B79A 100%); }
.fam-g-warm { background: linear-gradient(135deg,#FFC07A 0%,#F2896B 100%); }
.fam-pane { position: relative; padding: 20px 18px 34px; display: flex; flex-direction: column; gap: 11px; color: #FFFFFF; }
.fam-pane.fam-pane-msg { gap: 12px; }
.fam-h { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; text-shadow: 0 2px 16px rgba(6,16,28,0.85); }
.fam-lede { font-size: 13px; font-weight: 600; opacity: 0.9; line-height: 1.5; margin-bottom: 2px; text-shadow: 0 1px 12px rgba(6,16,28,0.8); }
.fam-lede.fam-lede-msg { opacity: 0.92; margin-bottom: 0; }
.fam-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.85; }

/* Today */
.fam-hero { position: relative; padding: 26px 20px 0; color: #FFFFFF; text-shadow: 0 2px 16px rgba(6,16,28,0.85); }
.fam-hero-k { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; opacity: 0.92; }
.fam-hero-h { font-size: 33px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; margin-top: 8px; }
.fam-hero-s { font-size: 14px; font-weight: 600; opacity: 0.94; margin-top: 8px; line-height: 1.5; max-width: 300px; }
.fam-dock { position: relative; margin-top: auto; padding: 22px 18px 34px; display: flex; flex-direction: column; gap: 11px; }
.fam-act { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 18px; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.22); color: #FFFFFF; }
.fam-act-body { flex: 1; min-width: 0; }
.fam-act-t { font-size: 13.5px; font-weight: 700; }
.fam-act-s { font-size: 12px; opacity: 0.88; font-weight: 500; margin-top: 2px; }
.fam-chev { font-size: 17px; opacity: 0.8; }
.fam-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam-tile { padding: 14px 15px; border-radius: 20px; background: rgba(10,24,38,0.5); border: 1px solid rgba(255,255,255,0.2); color: #FFFFFF; }
.fam-tile-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; opacity: 0.88; text-transform: uppercase; }
.fam-tile-row { display: flex; align-items: baseline; gap: 4px; margin-top: 5px; }
.fam-tile-v { font-size: 27px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fam-tile-u { font-size: 11px; font-weight: 600; opacity: 0.82; }
.fam-tile-n { font-size: 11.5px; font-weight: 600; opacity: 0.92; margin-top: 6px; }
.fam-ctas { display: flex; gap: 9px; }
.fam-call { flex: 1; text-align: center; padding: 13px 0; border-radius: 15px; background: #FFFFFF; color: #14212E; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.fam-msgbtn { flex: 1; text-align: center; padding: 13px 0; border-radius: 15px; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.22); color: #FFFFFF; font-size: 13.5px; font-weight: 700; }

/* Activity */
.fam-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fam-stat { padding: 13px 14px; border-radius: 18px; background: rgba(10,24,38,0.5); border: 1px solid rgba(255,255,255,0.2); }
.fam-stat-v { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fam-stat-k { font-size: 10.5px; font-weight: 700; opacity: 0.86; margin-top: 5px; line-height: 1.35; }
.fam-day { padding: 15px 16px; border-radius: 20px; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.2); }
.fam-day-hd { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.fam-day-t { font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
.fam-day-s { font-size: 11px; font-weight: 600; opacity: 0.72; }
.fam-day-list { display: flex; flex-direction: column; gap: 11px; margin-top: 11px; }
.fam-item { display: flex; gap: 11px; align-items: flex-start; }
.fam-item-t { font-size: 11px; font-weight: 700; opacity: 0.72; width: 52px; flex-shrink: 0; padding-top: 2px; }
.fam-item-bar { width: 4px; align-self: stretch; border-radius: 99px; flex-shrink: 0; }
.fam-item-body { flex: 1; min-width: 0; }
.fam-item-h { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.fam-item-s { font-size: 12px; opacity: 0.86; font-weight: 500; margin-top: 2px; line-height: 1.45; }

/* Message */
.fam-back { display: inline-flex; align-self: flex-start; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.22); font-size: 20px; font-weight: 700; line-height: 1; }
.fam-compose { padding: 16px; border-radius: 20px; background: rgba(10,24,38,0.82); border: 1px solid rgba(255,255,255,0.22); display: flex; flex-direction: column; gap: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fam-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-note { padding: 8px 13px; border-radius: 99px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.28); }
.fam-note.fam-on { background: #FFFFFF; color: #14212E; }
.fam-app .fam-ta { width: 100%; box-sizing: border-box; min-height: 84px; resize: none; border-radius: 14px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.12); color: #FFFFFF; font-family: Manrope, system-ui, sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.45; padding: 12px 13px; outline: none; }
.fam-buzzrow { display: flex; align-items: center; gap: 8px; }
.fam-buzz { padding: 6px 11px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,0.12); color: #FFFFFF; border: 1px solid rgba(255,255,255,0.28); }
.fam-buzz.fam-on { background: #FFFFFF; color: #14212E; }
.fam-count { margin-left: auto; font-size: 11px; font-weight: 700; opacity: 0.75; }
.fam-send { text-align: center; padding: 14px 0; border-radius: 15px; background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 800; }
.fam-send.fam-ready { background: #FFFFFF; color: #14212E; }
.fam-sent { padding: 14px 16px; border-radius: 18px; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.22); display: flex; flex-direction: column; gap: 10px; }
.fam-sent-row { display: flex; align-items: flex-start; gap: 10px; }
.fam-sent-row .fam-dot { margin-top: 5px; }
.fam-sent-body { flex: 1; min-width: 0; }
.fam-sent-t { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.fam-sent-m { font-size: 11.5px; font-weight: 600; opacity: 0.8; margin-top: 2px; }

/* Device */
.fam-dev-card { padding: 18px; border-radius: 22px; background: rgba(10,24,38,0.55); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; gap: 14px; }
.fam-app .fam-dev-img { width: 140px; height: 112px; max-width: none; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.4)); }
.fam-dev-body { min-width: 0; }
.fam-dev-status { display: flex; align-items: center; gap: 7px; }
.fam-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: #9BF5C6; }
.fam-dev-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.9; }
.fam-dev-h { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; margin-top: 3px; }
.fam-dev-s { font-size: 12.5px; opacity: 0.88; font-weight: 500; margin-top: 3px; line-height: 1.45; }
.fam-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam-dev-tile { padding: 16px; border-radius: 20px; background: rgba(10,24,38,0.5); border: 1px solid rgba(255,255,255,0.2); }
.fam-dev-tile-k { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; opacity: 0.85; }
.fam-dev-tile-row { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.fam-dev-tile-v { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fam-dev-tile-u { font-size: 13px; font-weight: 700; opacity: 0.8; }
.fam-meter { height: 8px; border-radius: 99px; background: rgba(255,255,255,0.22); margin-top: 11px; overflow: hidden; }
.fam-meter-fill { height: 100%; background: linear-gradient(90deg,#9BF5C6,#6FD3C7); border-radius: 99px; }
.fam-dev-tile-n { font-size: 12px; font-weight: 600; opacity: 0.88; margin-top: 9px; }
.fam-dev-tile-n.fam-dev-tile-n2 { margin-top: 11px; line-height: 1.45; }
.fam-rows { padding: 6px 16px; border-radius: 20px; background: rgba(10,24,38,0.5); border: 1px solid rgba(255,255,255,0.2); }
.fam-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.fam-row-ic { width: 28px; height: 28px; border-radius: 10px; flex-shrink: 0; }
.fam-row-body { flex: 1; min-width: 0; }
.fam-row-k { font-size: 13.5px; font-weight: 700; }
.fam-row-s { font-size: 11.5px; opacity: 0.78; font-weight: 500; margin-top: 1px; }
.fam-row-v { font-size: 12.5px; font-weight: 700; flex-shrink: 0; opacity: 0.95; }