/* YEG Life phone: the iOS design layer. Loads after yeg3d.css and restyles every app at once through the shared classes
   (.nbar .ltitle .pscroll .it .ch .go .kv .snav h4 .note), so a new app that uses them looks native with no CSS of its own.
   Rules it follows: large title that collapses into a blurred nav bar, inset grouped lists with hairlines, 17/15/13 type scale,
   44 pt targets, tinted and filled buttons, spring motion, a press state on everything tappable, and nothing hard-coded to one colour. */
.phone {
  --i-bg: #000; --i-card: #1c1c1e; --i-card2: #2c2c2e; --i-card3: #3a3a3c; --i-sep: rgba(84,84,88,.6);
  --i-label: #fff; --i-mut: rgba(235,235,245,.6); --i-faint: rgba(235,235,245,.3);
  --i-blue: #0a84ff; --i-green: #30d158; --i-red: #ff453a; --i-orange: #ff9f0a;
  --i-r: 12px; --i-spring: cubic-bezier(.32,.72,0,1);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* navigation bar: translucent material, large title below it */
.phone .ios.app { animation: iosOpen .38s var(--i-spring); }
.phone .ios .nbar { position: relative; z-index: 3; min-height: 44px; padding: 0 8px; background: rgba(0,0,0,.72); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 .5px 0 transparent; transition: box-shadow .2s; }
.phone .ios.scrolled .nbar { box-shadow: 0 .5px 0 var(--i-sep); }
.phone .ios .nbar .back { min-height: 44px; min-width: 44px; padding: 0 6px 0 2px; font-size: 17px; letter-spacing: -.41px; color: var(--i-blue); }
.phone .ios .nbar .back:active { opacity: .35; }
.phone .ios .nbar b { font-size: 17px; font-weight: 600; letter-spacing: -.41px; opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; }
.phone .ios.scrolled .nbar b { opacity: 1; transform: none; }
.phone .ios .ltitle { margin: 2px 4px 10px; font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .37px; color: var(--i-label); }
.phone .ios .pscroll { padding: 0 16px 56px; font-size: 17px; letter-spacing: -.41px; line-height: 1.29; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none; }
.phone .ios .pscroll::-webkit-scrollbar { display: none; }

/* section headers and footnotes */
.phone .ios h4 { margin: 24px 16px 8px; font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -.08px; text-transform: uppercase; color: var(--i-mut); }
.phone .ios .note { margin: 8px 16px 14px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--i-mut); }

/* rows: consecutive rows fuse into one inset grouped list with hairline separators, the way Settings does it */
.phone .ios .it, .phone .ios .ch, .grp .row { min-height: 44px; }
.phone .ios .it { margin: 0 0 10px; padding: 11px 16px; border-radius: var(--i-r); background: var(--i-card); font-size: 17px; letter-spacing: -.41px; box-sizing: border-box; transition: background .12s; }
.phone .ios .it + .it { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: inset 16px .5px 0 -0px var(--i-sep); background-clip: padding-box; }
.phone .ios .it:has(+ .it) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.phone .ios .it small { margin-top: 2px; font-size: 13px; line-height: 18px; letter-spacing: -.08px; color: var(--i-mut); }
.phone .ios .it b { font-weight: 600; }
.phone .ios button.it:active, .phone .ios .ch:active, .grp .row:active { background: var(--i-card2); }
.phone .ios .ch { margin: 0 0 10px; padding: 11px 16px; border-radius: var(--i-r); font-size: 17px; letter-spacing: -.41px; transition: background .12s; }
.phone .ios .ch small { font-size: 13px; line-height: 18px; }
.phone .ios .ch.on { background: rgba(10,132,255,.24); }
.grp { border-radius: var(--i-r); }
.grp .row { padding: 11px 16px; font-size: 17px; letter-spacing: -.41px; transition: background .12s; }
.grp .row small { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
.phone .ios .kv { padding: 12px 16px; border-radius: var(--i-r); font-size: 17px; letter-spacing: -.41px; }

/* controls */
.phone .ios .go { min-height: 50px; padding: 0 20px; border-radius: 14px; background: var(--i-blue); font-size: 17px; font-weight: 600; letter-spacing: -.41px; transition: transform .12s var(--i-spring), opacity .12s; }
.phone .ios .go:active { transform: scale(.97); opacity: .85; }
.phone .ios .go.ghost { background: rgba(10,132,255,.18); color: var(--i-blue); }
.phone .ios .ck { min-height: 32px; padding: 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -.24px; }
.phone .ios .ck:active { opacity: .6; }
.phone .ios input, .phone .ios select, .phone .ios textarea { min-height: 44px; padding: 10px 14px; border-radius: 10px; background: var(--i-card2); font-size: 17px; letter-spacing: -.41px; box-sizing: border-box; }
.phone .ios input::placeholder, .phone .ios textarea::placeholder { color: var(--i-faint); }
.phone .ios input:focus, .phone .ios select:focus, .phone .ios textarea:focus { outline: 2px solid rgba(10,132,255,.55); outline-offset: 0; }
.phone .ios .snav { gap: 8px; margin: 12px 0; padding: 0 2px 2px; scrollbar-width: none; }
.phone .ios .snav::-webkit-scrollbar { display: none; }
.phone .ios .snav button { min-height: 34px; padding: 0 14px; font-size: 15px; font-weight: 500; letter-spacing: -.24px; background: var(--i-card2); transition: background .15s, transform .12s; }
.phone .ios .snav button:active { transform: scale(.96); }
.phone .ios .snav button.on { background: var(--i-blue); font-weight: 600; }
.tg { transition: background .25s var(--i-spring); }
.tg i { transition: left .25s var(--i-spring), width .15s; }
.tg:active i { width: 33px; }
.tg.on:active i { left: 16px; }

/* messages */
.phone .ios .tx { max-width: 80%; padding: 8px 14px; font-size: 17px; letter-spacing: -.41px; line-height: 1.29; }

/* home screen: continuous-corner icons, pressed state, labels at the iOS size */
.ai { width: 60px; height: 60px; border-radius: 22.4%; box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 .5px 0 rgba(255,255,255,.18); }
.app { font-size: 11px; font-weight: 500; letter-spacing: .06px; }
.app:active .ai { transform: scale(.9); }
.hw { border-radius: 20px; }
.dock { border-radius: 36px; }
.pdots i { transition: background .2s, transform .2s; } .pdots i.on { transform: scale(1.15); }

/* the lock screen */
.lock .lk-clock b { font-weight: 600; letter-spacing: -.02em; }
.lock .lk-n { border-radius: 20px; }

@media (prefers-reduced-motion: reduce) {
  .phone .ios.app, .phone .ios .nbar b, .phone .ios .go, .tg, .tg i { animation: none; transition: none; }
}