/* Helm — 排版覆寫。
   手機 = 自然捲動 + sticky 頂欄 + fixed 底欄(照可動的 App:HayTarot/庫存/晶語 的做法);
   桌面 = 側邊欄 + 內容。 */

.kit-controls { display: none !important; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--surface-canvas); overscroll-behavior: none; }

/* 全螢幕覆蓋層用 fixed(不依賴容器高度,免得自然捲動時錯位) */
.lock { position: fixed; inset: 0; }

/* 新增/編輯彈窗(手機):讓「整片不透明的 scrim」自己當『唯一』捲動容器,
   內層(sheet/body)都不各自捲 → 只剩一層捲動,背景被完全蓋住、碰不到也捲不到 */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 60;
  display: block;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface-card);
}
.sheet { width: 100%; min-height: 100%; max-height: none; height: auto; border-radius: 0; box-shadow: none; overflow: visible; }
.sheet__head { position: sticky; top: 0; z-index: 5; background: var(--surface-card); }
.sheet__body { overflow: visible; flex: 0 0 auto; min-height: 0; }

.helm-root {
  position: relative;
  background: var(--surface-canvas);
  touch-action: manipulation;
}

/* ========== 手機:自然捲動(body 捲動,不鎖死)========== */
.mobile-shell {
  position: relative;
  min-height: 100dvh;
  background: var(--surface-canvas);
  background-image: var(--texture-paper); background-size: var(--texture-paper-size);
}
/* 頂欄黏在最上(隨頁面捲動固定) */
.mobile-shell .app-header {
  position: sticky; top: 0; z-index: 40;
  padding-top: max(env(safe-area-inset-top), 16px);
}
/* 內容區不再自己內部捲動,讓整頁 body 捲;底部留空避開固定的底欄 */
.mobile-shell .app-scroll { overflow: visible; }
.mobile-shell .app-scroll .screen { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 30px); }
/* 底欄固定在視窗底(自然捲動下會貼到真實螢幕底);安全區由 DS .helm-tabbar 處理 */
.mobile-shell .app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; }
/* FAB 也固定在視窗,落在底欄上方 */
.mobile-shell .app-fab { position: fixed; right: 18px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 22px); z-index: 90; }

/* ========== 桌面:鎖定視窗 + 側邊欄 + 主內容內部捲 ========== */
@media (min-width: 760px) {
  html, body { height: 100%; overflow: hidden; }
  .desktop-shell {
    position: fixed; inset: 0; display: flex;
    background: var(--surface-sunken);
  }
  .desktop-shell .helm-sidebar { height: 100%; }
  .helm-sidebar__foot { margin-top: auto; padding: var(--space-4) var(--space-3) var(--space-2); }
  .app-main { flex: 1 1 auto; overflow-y: auto; }
  .app-main__inner { max-width: 760px; margin: 0 auto; padding: 40px 32px 72px; }
  .app-main__inner .screen { padding: 0; gap: 18px; }
  /* Add/Edit 變回置中 modal + 內層捲動(覆寫手機的 scrim-捲動) */
  .sheet-scrim { display: flex; align-items: center; justify-content: center; overflow: visible; background: var(--surface-scrim); }
  .sheet { min-height: 0; height: auto; max-width: var(--sheet-max); max-height: 88vh; border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; }
  .sheet__head { position: static; }
  .sheet__body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
}
@media (min-width: 1100px) { .app-main__inner { max-width: var(--content-max); } }

/* Toast 置中於底部 */
.helm-toast-viewport { left: 50% !important; right: auto !important; transform: translateX(-50%); }