/* =========================================================================
   もふ手帳 App Shell — ネイティブアプリ級UXの追加レイヤー（Tier 0 + 安全Tier 1）
   既存CSSの後に読み込まれる追加スタイル。トークン/既存クラスは変更しない。
   ========================================================================= */

/* ---- 1. ブラウザ特有ノイズの抑制（軸5） ---------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 引っ張って更新の暴発・スクロール連鎖を抑制（本文スクロールは通常どおり） */
html, body { overscroll-behavior-y: none; }

/* タップ時の青いハイライト矩形を除去（“Web感”の典型を消す） */
* { -webkit-tap-highlight-color: transparent; }

/* UIクロムのみ選択不可に（本文・AI相談などのテキストは選択・コピー可能を維持） */
.topbar, .tabbar, .fab, .btn, button, .banner, label { -webkit-user-select: none; user-select: none; }
input, textarea, select, .selectable, .mofu-help__body, .page p, .card { -webkit-user-select: auto; user-select: auto; }

/* タップ遅延(300ms)・誤ズームを抑え、操作の即時性を上げる（軸3） */
a, button, .btn, .tabbar__item, .fab, [role="button"], summary, label { touch-action: manipulation; }

/* ---- 2. タップフィードバック強化（軸3） --------------------------------- */
.btn { transition: transform .08s ease, background .15s ease, box-shadow .15s ease, opacity .12s ease; }
.btn:active { transform: translateY(1px) scale(.985); }
.tabbar__item, .card a, .tappable { transition: opacity .12s ease, transform .08s ease; }
.tabbar__item:active, .tappable:active { opacity: .65; }

/* ---- 3. 画面遷移：白フラッシュを抑える（軸2・対応ブラウザのみ） ----------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: mofu-fade-out .18s ease both; }
  ::view-transition-new(root) { animation: mofu-fade-in  .22s ease both; }
}
@keyframes mofu-fade-out { to { opacity: 0; } }
@keyframes mofu-fade-in  { from { opacity: 0; } }

/* ---- 4. タブバーのSVGアイコン整形（軸1・絵文字→SVG） --------------------- */
.tabbar__icon svg { width: 24px; height: 24px; display: block; }
.tabbar__item { color: var(--color-text-sub, #7A6E64); }
.tabbar__item.is-active { color: var(--color-coral, #D85A30); }
.tabbar__item svg { stroke: currentColor; }
.tabbar__brand svg, .tabbar__out svg { width: 22px; height: 22px; }

/* ---- 5. FAB「＋記録」（軸1・スマホのみ・最優先アクションを独立） --------- */
.fab {
  position: fixed; right: 16px;
  bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom) + 14px);
  width: 56px; height: 56px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-coral, #D85A30); color: #fff;
  box-shadow: 0 10px 24px -6px rgba(176, 70, 31, .55), 0 2px 6px rgba(0,0,0,.12);
  z-index: 45; text-decoration: none;
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.fab:active { transform: translateY(1px) scale(.97); }
.fab svg { width: 26px; height: 26px; }
.fab__label {
  position: absolute; right: 64px; white-space: nowrap;
  background: rgba(74,27,12,.92); color:#fff; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .15s;
}
/* 記録ページ自身ではFABを隠す（冗長回避）。PCはサイドバー導線があるため非表示。 */
body.pg-record .fab { display: none; }
@media (min-width: 1024px) { .fab { display: none; } }

/* ---- 6. スケルトン（軸2・読み込み体感の改善ユーティリティ） -------------- */
.skeleton {
  position: relative; overflow: hidden;
  background: var(--color-bg-peach, #FAECE7); border-radius: var(--radius-md, 12px);
  min-height: 14px;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton::after { animation: mofu-shimmer 1.3s infinite; }
}
@keyframes mofu-shimmer { to { transform: translateX(100%); } }

/* ---- 7. ボトムシート（軸2・将来の <dialog> 用ユーティリティ） ------------ */
.sheet[open], dialog.sheet[open] {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%;
  max-width: var(--content-max, 760px);
  border: 0; border-radius: var(--radius-xl, 24px) var(--radius-xl, 24px) 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  background: #fff; box-shadow: 0 -12px 40px rgba(0,0,0,.22);
}
.sheet::backdrop { background: rgba(74,27,12,.45); }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: mofu-sheet-up .22s ease both; }
}
@keyframes mofu-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- 8. standalone（ホーム追加・全画面）時の調整（軸5） ------------------ */
@media (display-mode: standalone) {
  /* ステータスバー直下に潜らないよう上部セーフエリアを確保 */
  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h, 56px) + env(safe-area-inset-top)); }
}