/* 11 套独立 App 的 iframe 宿主（specs/037）
 *
 * 独立 App 要整屏：forms-app 的 header / nav / 内边距都不参与。
 * 设置入口是一个不抢戏的「⋯」，避免每套自己再长一个设置页。
 */

.fe-app[data-skin-app] {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.fe-app[data-skin-app] > .fe-header,
.fe-app[data-skin-app] > .fe-nav,
.fe-app[data-skin-app] > .fe-main {
  display: none;
}

.skin-app-frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  color-scheme: light;
}

/* 不抢戏：默认半透明，鼠标/键盘聚焦才完全显形 */
.skin-app-gear {
  position: fixed;
  right: 10px;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 40;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, .28);
  color: rgba(255, 255, 255, .82);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: .42;
  transition: opacity .25s ease, transform .2s ease;
}

.skin-app-gear:hover,
.skin-app-gear:focus-visible {
  opacity: 1;
}

.skin-app-gear:active {
  transform: scale(.9);
}

@media (prefers-reduced-motion: reduce) {
  .skin-app-gear { transition: none; }
}

/* 独立 App 的唯一出口：一个两项菜单，把“留页详情/写一句/分享”接回来。 */
.skin-app-menu {
  position: fixed;
  right: 10px;
  top: calc(54px + env(safe-area-inset-top));
  z-index: 41;
  display: grid;
  gap: 1px;
  min-width: 148px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(18, 18, 18, .82);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.skin-app-menu[hidden] { display: none; }

.skin-app-menu button {
  padding: 12px 16px;
  border: 0;
  background: transparent;
  color: #f2efe8;
  font: 500 13px/1.2 var(--font-ui);
  text-align: left;
  letter-spacing: .04em;
}

.skin-app-menu button:active { background: rgba(255, 255, 255, .12); }