/* Adam Studio: phone / iPhone app layer. Loaded after style.css; safe on desktop (env() = 0 there). */
:root{--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--tab-h:0px}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
.app{min-height:100vh;min-height:100dvh}
.nav{height:100vh;height:100dvh}
.entry{min-height:100vh;min-height:100dvh;padding-top:max(40px,calc(var(--sat) + 16px));padding-bottom:max(40px,calc(var(--sab) + 16px));padding-inline:max(18px,var(--sal)) max(18px,var(--sar))}
.intro{height:100vh;height:100dvh}
.intro-top{padding-top:max(18px,calc(var(--sat) + 8px));padding-inline:max(22px,calc(var(--sal) + 12px)) max(22px,calc(var(--sar) + 12px))}
.intro-ctl{bottom:max(26px,calc(var(--sab) + 14px))}
.topbar{height:calc(56px + var(--sat));padding-top:var(--sat)}
.choice{min-height:calc(100dvh - 140px)}
.gate{min-height:calc(100dvh - 140px)}

@media(max-width:900px){
  .topbar{padding-inline:max(12px,var(--sal)) max(12px,var(--sar));gap:10px}
  .crumbs{overflow:hidden;white-space:nowrap;flex:1 1 auto}.crumbs>*{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
  main{padding:16px max(14px,var(--sar)) calc(20px + var(--tab-h) + var(--sab)) max(14px,var(--sal))}
  .app.bare main{padding:0}
  .nav{width:min(86vw,300px);padding-top:calc(18px + var(--sat));padding-bottom:calc(14px + var(--sab));padding-inline-start:max(14px,var(--sal));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-foot{flex:none}
  #toast{bottom:calc(var(--tab-h) + var(--sab) + 14px);right:max(12px,var(--sar));left:max(12px,var(--sal))}
  .modal .box{max-height:calc(100dvh - 32px - var(--sat) - var(--sab));overflow:auto}
  /* embedded apps (Blocks, Discord Blocks, creator / designer / graphics apps) fill the phone screen */
  .blocks-wrap{height:calc(100dvh - 56px - var(--sat) - var(--tab-h) - var(--sab) - 30px)!important;min-height:420px}
  .creator-bar{flex-wrap:wrap}
  .grid,.grid.creator-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
  .hero h1{font-size:30px;line-height:1.15}
  img,video,canvas{max-width:100%}
  table{display:block;max-width:100%;overflow-x:auto}
  pre{max-width:100%;overflow-x:auto}
}
/* iOS zooms into inputs under 16px */
@media(max-width:900px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px}
}
/* touch targets: 44px (Apple HIG) */
@media(pointer:coarse){
  .btn,.icon-btn,.chip,.nav-link,.lang-sw button,.dt-btn{min-height:44px}
  .icon-btn{min-width:44px}
  .btn.sm{min-height:40px}
  .nav-link{padding-block:10px}
  .side .chk input,.chk input,input[type=checkbox],input[type=radio]{width:20px;height:20px}
}

/* phone: the area switcher becomes a bottom tab bar */
@media(max-width:760px){
  body:has(> .areasw a):not(:has(.app.bare)){--tab-h:66px}
  body:has(.app.bare) > .areasw{display:none}
  body > .areasw:not(:empty){position:fixed;z-index:30;margin:0;left:max(10px,var(--sal));right:max(10px,var(--sar));bottom:calc(8px + var(--sab));height:58px;padding:5px;gap:2px;border-radius:20px;justify-content:space-between;background:rgba(8,14,32,.82);border:1px solid var(--line2);box-shadow:0 14px 40px -10px rgba(0,0,0,.75);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
  :root[data-mode=light] body > .areasw:not(:empty){background:rgba(244,246,250,.9)}
  body > .areasw .asw{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;padding:4px 2px;border-radius:15px;font-size:9px;letter-spacing:.04em}
  body > .areasw .asw span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body > .areasw .asw svg{width:20px;height:20px}
  body > .areasw .asw-ink{top:5px;bottom:5px;border-radius:15px}
  .area-card{min-height:0}
  .choice{padding-bottom:10px}
}
@media(max-width:760px) and (orientation:landscape){body > .areasw:not(:empty){height:48px}body > .areasw .asw span{display:none}body:has(> .areasw a):not(:has(.app.bare)){--tab-h:56px}}

/* "best on a computer" note for heavy editors */
.mob-note{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,181,71,.35);background:rgba(255,181,71,.09);color:var(--text);font-size:13px;line-height:1.4}
.mob-note svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--warn);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mob-note span{flex:1}
.mob-note button{flex:none;background:none;border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:6px 10px;min-height:36px;font:600 12.5px var(--font);cursor:pointer}

/* install sheet (iPhone Safari: Share -> Add to Home Screen; Android/desktop: native prompt) */
.pwa-sheet{position:fixed;z-index:1200;left:max(10px,var(--sal));right:max(10px,var(--sar));bottom:calc(10px + var(--sab));max-width:460px;margin:0 auto;padding:16px 16px 14px;border-radius:20px;background:rgba(10,18,40,.94);border:1px solid var(--line2);box-shadow:0 24px 70px -16px rgba(0,0,0,.85),0 0 0 1px rgba(47,123,255,.12);color:var(--text);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);animation:pwaUp .45s var(--ease,ease) both;font-family:var(--font)}
:root[dir=rtl] .pwa-sheet{font-family:'Heebo',var(--font)}
:root[data-mode=light] .pwa-sheet{background:rgba(255,255,255,.96)}
@keyframes pwaUp{from{transform:translateY(30px);opacity:0}}
.pwa-sheet.out{transition:transform .3s,opacity .3s;transform:translateY(30px);opacity:0}
.pwa-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.pwa-head img{width:48px;height:48px;border-radius:12px;flex:none;box-shadow:0 6px 20px -6px var(--glow,rgba(47,123,255,.55))}
.pwa-head b{display:block;font-size:15.5px}.pwa-head small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35}
.pwa-x{margin-inline-start:auto;align-self:flex-start;background:none;border:0;color:var(--muted);width:36px;height:36px;font-size:22px;line-height:1;cursor:pointer;border-radius:10px}
.pwa-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.pwa-steps li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--panel2,rgba(20,34,68,.6))}
.pwa-steps i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font:700 12px/1 var(--font);font-style:normal}
.pwa-steps svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent2,#5b9bff);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-inline-start:auto}
.pwa-actions{display:flex;gap:8px;margin-top:12px}.pwa-actions .btn{flex:1}
.pwa-arrow{position:fixed;z-index:1199;left:50%;bottom:calc(var(--sab) + 2px);width:0;height:0;margin-left:-9px;border:9px solid transparent;border-top-color:rgba(10,18,40,.94);display:none}
.pwa-nav{margin-top:6px;width:100%;justify-content:flex-start}
html.standalone .pwa-nav{display:none}
@media (prefers-reduced-motion:reduce){.pwa-sheet{animation:none}}