/* Phase 1: shared shell only. App-specific reading surfaces retain style.css. */
:root {
  --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", sans-serif;
  --shell-top: 58px;
  --shell-bottom: 29px;
  --icon-size: clamp(56px,15.5cqw,64px);
  --glass-edge: 1px solid #ffffff50;
  --glass-shadow: inset 0 1px 1px #fff6, inset 0 -1px 1px #ffffff15, 0 8px 24px #05132d24;
  --ease-ios: cubic-bezier(.2,.8,.2,1);
}
html,body { margin:0; font-family:var(--font-ios); -webkit-text-size-adjust:100%; }
button,input { font-family:inherit; }
button { user-select:none; -webkit-user-select:none; }
button:focus-visible { outline:3px solid #0a84ff; outline-offset:3px; }
.experience { min-height:var(--viewport-height,100dvh); padding:18px; background:radial-gradient(ellipse at 50% 30%,#28303c,#101319 75%); }
.phone { width:393px; height:min(852px,calc(100dvh - 36px)); min-height:530px; padding:7px; border-radius:54px; background:linear-gradient(145deg,#898a8e,#33383f 30%,#0c0f13 65%,#676970); box-shadow:0 0 0 1px #b1b4ba40,0 30px 75px #0007; }
.phone-inner { border:3px solid #08090b; border-radius:46px; container-type:size; background:#14243e; }
.wallpaper { inset:0; background:radial-gradient(ellipse at 0% 0%,#95b8c8 0,transparent 40%),radial-gradient(ellipse at 110% 14%,#c4b2a2 0,transparent 40%),linear-gradient(155deg,#4a7296,#183b65 48%,#0a1935 90%); }
.wallpaper:before { content:''; position:absolute; width:140%; height:120%; left:4%; top:22%; border-radius:48%; transform:rotate(-38deg); background:linear-gradient(135deg,#77c1e6 0,#3285c4 20%,#124b8a 40%,#102d56 65%); box-shadow:inset 5px 2px 5px #d5f1ff66,-12px -6px 50px #83c8ed45; }
.wallpaper:after { left:-87%; right:auto; bottom:-30%; width:135%; height:111%; border-radius:46%; transform:rotate(-37deg); background:linear-gradient(145deg,#1b4376 10%,#062040 40%,#071b35 90%); box-shadow:inset -3px 1px 4px #9ad6ff55,18px -5px 45px #071a3966; }
.screen,.app-view { padding-top:var(--shell-top); }
.status-bar { top:17px; left:29px; right:25px; height:23px; font-size:15px; font-weight:600; letter-spacing:-.3px; }
.status-icons { gap:6px; }
.signal-bars { display:flex; gap:2px; align-items:end; height:12px; }
.signal-bars i { width:3px; background:currentColor; border-radius:1px; height:5px; }
.signal-bars i:nth-child(2){height:7px}.signal-bars i:nth-child(3){height:10px}.signal-bars i:nth-child(4){height:12px}
.wifi-mark { width:17px; height:15px; }
.battery-mark { width:24px; height:12px; border:1px solid #ffffff80; border-radius:4px; padding:1.5px; position:relative; }
.battery-mark:after { content:''; width:2px; height:5px; position:absolute; top:2.5px; right:-4px; background:currentColor; opacity:.6; border-radius:0 2px 2px 0; }
.battery-mark i { display:block; height:100%; width:82%; background:currentColor; border-radius:2px; }
.phone.light .battery-mark { border-color:#0006; }
.island { width:113px; height:32px; top:10px; box-shadow:0 0 0 1px #000; }
.island:after { width:8px; height:8px; top:12px; right:12px; }
.home-bar,.phone.light .home-bar { bottom:0; height:29px; width:156px; border:0; background:none; box-shadow:none; }
.home-bar:after { width:130px; left:13px; bottom:8px; height:5px; opacity:.95; }
/* Home grid and widgets */
.home-screen { padding:20px 18px var(--shell-bottom); gap:0; overflow-y:auto; scrollbar-width:none; }
.home-widgets { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; flex:none; }
/* Explicit width keeps aspect-ratio from shrinking a card inside its grid column. */
.home-widgets .widget { --widget-pad:clamp(13px,4cqw,18px); width:100%; min-width:0; height:auto!important; aspect-ratio:1; box-sizing:border-box; border-radius:26px; padding:var(--widget-pad); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; box-shadow:0 5px 15px #07172e30,inset 0 1px 0 #fff6; border:1px solid #ffffff38; position:relative; }
.widget-calendar { background:linear-gradient(150deg,#fffffff5,#f3f5f3eb); color:#12151a; }
.widget-weather { background:linear-gradient(145deg,#1b70b4dc,#1f5385e8 70%,#315272); color:#fff; }
.home-widgets .weekday,.home-widgets .city { position:static; font-size:14px; line-height:18px; font-weight:550; letter-spacing:-.2px; }
.home-widgets .weekday { color:#ec443c; }
.home-widgets .widget .day,.home-widgets .widget .temp { position:static; margin:4px 0 0; font-size:clamp(44px,12.5cqw,52px); line-height:1; font-weight:300; letter-spacing:-2px; }
.home-widgets .schedule,.home-widgets .weather-desc { position:static; margin-top:auto; min-width:0; font-size:12px; line-height:16px; font-weight:500; opacity:1; }
.home-widgets .schedule { border-left:3px solid #fa684d; padding-left:6px; white-space:nowrap; }
.home-widgets .schedule small { display:block; font-size:11px; line-height:15px; color:#767b84; margin-top:3px; font-weight:400; }
.home-widgets .weather-desc span { display:block; font-size:11px; line-height:15px; margin-top:3px; opacity:.9; white-space:nowrap; }
.home-widgets .widget-condition { position:absolute; right:var(--widget-pad); top:calc(var(--widget-pad) + 29px); width:clamp(28px,9cqw,38px); height:auto; aspect-ratio:4/3; border-radius:0; }
.apps-grid { grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:14px; row-gap:24px; margin-top:28px; flex:none; }
.home-screen .app-button { gap:7px; min-height:calc(var(--icon-size) + 24px); min-width:0; font-size:12.5px; font-weight:400; letter-spacing:0; line-height:16px; padding:0; color:white; }
.app-icon.native-icon { width:var(--icon-size); height:var(--icon-size); display:block; flex:none; padding:0; border-radius:23%; background:transparent; box-shadow:0 4px 7px #06122c35,inset 0 1px 1px #fff6; transition:transform .16s var(--ease-ios),filter .16s; }
.native-icon img { width:100%; height:100%; display:block; border-radius:inherit; -webkit-user-drag:none; }
.home-screen .app-label { display:block; max-width:calc(100% + 8px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:16px; font-weight:400; letter-spacing:-.1px; text-shadow:0 1px 3px #000a; -webkit-font-smoothing:antialiased; }
.native-icon .unread-badge { min-width:22px; height:22px; top:-7px; right:-7px; font-size:12px; line-height:22px; font-weight:400; background:#ff3b30; }
.app-button:active .app-icon { transform:scale(.91); filter:brightness(.87); }
.home-spacer { flex:1; min-height:20px; }
.home-dots { flex:none; margin:0 0 18px; padding:0; height:19px; }
.home-dots span { width:5px; height:5px; box-shadow:0 1px 2px #0003; }
.dock { flex:none; padding:14px 16px; min-height:92px; margin:0 -9px; border-radius:32px; background:linear-gradient(125deg,#dce9ff49,#a9bed72e); border:var(--glass-edge); backdrop-filter:blur(25px) saturate(1.5); -webkit-backdrop-filter:blur(25px) saturate(1.5); box-shadow:var(--glass-shadow); }
.dock .app-button { min-height:0; }
.dock .app-label { display:none; }
/* First unlock */
.lock-screen { padding:18px 17px 42px; touch-action:none; }
.lock-access { color:#fff; display:grid; place-items:center; width:44px; height:44px; margin:0 auto 4px; }
.lock-access .icon { width:19px; height:19px; stroke-width:2; }
.lock-date { margin-top:9px; font-size:20px; letter-spacing:-.4px; line-height:1.35; font-weight:500; color:#e1f1ff; }
.lock-time { font-size:91px; font-weight:650; letter-spacing:-4px; line-height:1.04; margin-top:3px; color:#dceeff; text-shadow:0 1px 1px #ffffff25; }
.lock-note { margin:auto 0 50px; padding:13px; gap:11px; border:var(--glass-edge); border-radius:25px; background:linear-gradient(140deg,#f3f8ffd9,#cfdfefd1); box-shadow:var(--glass-shadow); backdrop-filter:blur(30px) saturate(1.3); -webkit-backdrop-filter:blur(30px) saturate(1.3); min-height:86px; }
.lock-note img { border-radius:9px; flex:none; }
.notification-copy { flex:1; min-width:0; }
.notification-top { display:flex; justify-content:space-between; font-size:11.5px; color:#48566a; margin-bottom:3px; }
.notification-top time { color:#637185; }
.lock-note strong { margin:0; font-size:15px; font-weight:600; }
.lock-note p { font-size:15px; line-height:1.4; opacity:1; margin:3px 0 0; color:#243046; }
.pin-screen { padding:53px 32px 26px; background:#0b1b3966; backdrop-filter:blur(35px); -webkit-backdrop-filter:blur(35px); touch-action:none; }
.pin-title { font-size:20px; font-weight:500; letter-spacing:0; }
.pin-dots { margin:25px 0 32px; gap:23px; }
.pin-dots span { width:11px; height:11px; border:1.4px solid #ffffffd9; }
.pin-grid { margin:10px 0 0; gap:18px 29px; }
.pin-grid button { width:73px; height:73px; background:#f3f7ff25; box-shadow:inset 0 1px 0 #fff2; font-size:33px; font-weight:350; line-height:1.08; }
.pin-grid button small { min-height:12px; font-size:9px; font-weight:600; letter-spacing:2px; margin-top:2px; }
.pin-grid button:active { background:#ffffff70; }
.pin-bottom { padding:20px 0 0; margin:auto 0 0; font-size:15px; }
.pin-bottom button { min-width:50px; height:44px; }
/* Navigation surfaces are intentionally subtle, not glassifying the apps. */
.app-view { animation:none; }
.app-header { padding:0 10px; min-height:50px; gap:6px; }
.app-header h2 { font-size:17px; letter-spacing:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.app-header>.back,.app-header>.header-space { min-width:68px; width:68px; }
.app-header>.app-home { margin-left:24px; }
.app-home { width:44px; height:44px; flex:none; padding:11px; color:#007aff; display:grid; place-items:center; border-radius:50%; }
.app-home svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; }
.app-home:active { background:#7772; }
.photo-full .app-home,.weather-app .app-home,.call-screen .app-home { color:white; }
.call-screen>.app-home { position:absolute; top:calc(var(--shell-top) + 6px); right:14px; }
.sheet { padding-bottom:calc(22px + var(--shell-bottom)); }
.app-scroll { padding-bottom:calc(16px + var(--shell-bottom)); }
.bottom-tabs { padding-bottom:var(--shell-bottom); }
.chat-input { padding-bottom:var(--shell-bottom); }
.safari-bottom { padding-bottom:var(--shell-bottom); }
/* Animate the entering root, never the status bar. No delayed DOM swap that can race a tap. */
#screen[data-motion="app"]>.app-view,#screen[data-motion="app"]>.call-screen { animation:launch .28s var(--ease-ios); }
#screen[data-motion="home"]>.home-screen { animation:returnHome .25s var(--ease-ios); }
#screen[data-motion="unlock"]>.home-screen { animation:unlockHome .42s var(--ease-ios); }
#screen[data-motion="pin"]>.pin-screen { animation:showPin .28s var(--ease-ios); }
#screen[data-motion="page"]>.app-view { animation:pageIn .16s ease-out; }
@keyframes launch { from{opacity:0;transform:scale(.91) translateY(12px)}to{opacity:1;transform:none} }
@keyframes returnHome { from{opacity:.4;transform:scale(1.05)}to{opacity:1;transform:none} }
@keyframes unlockHome { from{opacity:0;transform:scale(1.13);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)} }
@keyframes showPin { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none} }
@keyframes pageIn { from{opacity:.6;transform:translateX(5px)}to{opacity:1;transform:none} }
/* Real mobile: the OS owns time, island and Home Indicator. */
html[data-runtime="browser"],html[data-runtime="standalone"] { --shell-top:max(8px,env(safe-area-inset-top,0px)); --shell-bottom:max(14px,env(safe-area-inset-bottom,0px)); }
html[data-runtime="browser"] .status-bar,html[data-runtime="standalone"] .status-bar,
html[data-runtime="browser"] .island,html[data-runtime="standalone"] .island,
html[data-runtime="browser"] .home-bar,html[data-runtime="standalone"] .home-bar { display:none; }
html[data-runtime="standalone"] { --shell-top:max(12px,env(safe-area-inset-top,0px)); }
html:not([data-runtime="desktop"]) .experience { padding:0; height:var(--viewport-height,100dvh); min-height:0; }
html:not([data-runtime="desktop"]) .device-stage { width:100%; height:100%; }
html:not([data-runtime="desktop"]) .phone { width:100%; height:100%; min-height:0; padding:0; border-radius:0; box-shadow:none; }
html:not([data-runtime="desktop"]) .phone-inner { border:0; border-radius:0; }
html:not([data-runtime="desktop"]) .home-screen { padding-top:20px; }
html:not([data-runtime="desktop"]) .lock-screen { padding-top:26px; }
html:not([data-runtime="desktop"]) .phone[data-surface="lock"] .lock-access { background:#ffffff12; border:1px solid #fff2; border-radius:50%; }
@media(max-width:600px){
  html,body{width:100%;height:100%;overflow:hidden}
  .experience{padding:0;height:var(--viewport-height,100dvh);min-height:0}
  .device-stage{width:100%;height:100%}.phone{width:100%;height:100%;padding:0;min-height:0;border-radius:0;box-shadow:none}.phone-inner{border:0;border-radius:0}
  .screen,.app-view{padding-top:var(--shell-top)}.status-bar{top:17px}.island{top:10px}
  .home-screen{padding:20px 18px var(--shell-bottom)}.apps-grid{gap:24px 16px}.home-dots{margin-bottom:18px}
}
@container(max-height:700px){
  .home-screen{padding-top:14px}.home-widgets{gap:16px}.apps-grid{margin-top:24px;row-gap:21px}.home-spacer{min-height:14px}.home-dots{margin-bottom:12px}
  .pin-screen{padding-top:24px}.pin-dots{margin-bottom:22px}.pin-grid{gap:14px 28px}.pin-grid button{width:67px;height:67px}.lock-time{font-size:84px}.lock-note{margin-bottom:30px}
}
@container(max-height:570px){
  .home-screen{padding-top:10px}.apps-grid{margin-top:17px;row-gap:13px}.dock{min-height:78px;padding:11px 16px}.home-dots{height:10px;margin-bottom:8px}.home-spacer{min-height:8px}
  .pin-screen{padding-top:15px;padding-bottom:10px}.pin-grid{gap:9px 26px;margin-top:0}.pin-grid button{width:58px;height:58px;font-size:29px}.pin-dots{margin:16px 0 20px}.pin-bottom{padding-top:10px}.lock-screen{padding-top:8px}.lock-time{font-size:71px}.lock-note{margin-bottom:8px}
}
@media(max-width:350px){.home-screen{padding-left:16px;padding-right:16px}.home-widgets{gap:16px}.apps-grid{column-gap:12px}.home-widgets .widget{border-radius:23px}.home-widgets .schedule{font-size:11px}.home-widgets .weather-desc span{font-size:10px}.home-screen .app-label{font-size:12px}.home-screen [data-action="valorant"] .app-label{font-size:10.5px}.pin-grid{column-gap:22px}}
@media(prefers-reduced-transparency:reduce){.dock{background:#536b86}.lock-note{background:#dce8f3}}
@supports not (backdrop-filter:blur(1px)){.dock{background:#536b86d9}.lock-note{background:#dce8f3}.pin-screen{background:#142b49}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.pin-screen{position:absolute;inset:0;padding-top:calc(var(--shell-top) + 40px)}
@container(max-height:700px){.pin-screen{padding-top:calc(var(--shell-top) + 24px)}}
@container(max-height:570px){.pin-screen{padding-top:calc(var(--shell-top) + 15px)}}
/* The decorative wallpaper must never make the device itself a focus-scroll container. */
.phone-inner,#screen{overflow:clip}
.wallpaper{overflow:hidden;pointer-events:none}
/* Keep narrow desktop panels at phone width instead of spreading four columns over a tablet-sized canvas. */
html[data-runtime="desktop"] .phone{max-width:430px;margin-inline:auto}
@container(max-height:620px){.home-screen{--icon-size:56px;padding-top:10px}.home-screen .apps-grid{margin-top:13px;row-gap:7px}.home-screen .app-button{min-height:76px;gap:5px}.home-screen .app-label{font-size:12px;line-height:15px}.home-screen .dock{min-height:76px;padding:10px 16px}.home-screen .home-dots{height:8px;margin-bottom:6px}.home-spacer{min-height:4px}}