/*
  @airffic/mobile-kit — スマホの共通の土台（Founder Go 2026-10-20、モバイル化 第1波）。

  フレームワークを選ばない素の CSS。読み込むか、写して使う。
    Tailwind v4 :  @import "tailwindcss"; の次の行に  @import "<ここへの相対パス>/mobile-base.css";
    素の HTML   :  <link rel="stylesheet" href="/mobile-base.css">

  机の上（マウスの画面）の見た目は変えない。自動で効くのは、指で触る画面（pointer: coarse）の入力欄の文字だけ。
  ほかは class を付けたところだけに効く（mk- で始まる）。
*/

/* ── 色。サイトの色で上書きしてよい（:root { --mk-accent: … }） ── */
:root {
  --mk-accent: #ea6f0a;
  --mk-surface: #ffffff;
  --mk-ink: #0f172a;
  --mk-muted: #64748b;
  --mk-line: #e2e8f0;
  --mk-danger: #dc2626;
  --mk-backdrop: rgba(15, 23, 42, 0.32);
  --mk-tap: 44px;          /* 指の的の最小。現場で使う画面は 48px に上げる（.mk-field） */
  --mk-tabbar-h: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mk-surface: #111827;
    --mk-ink: #e5e7eb;
    --mk-muted: #94a3b8;
    --mk-line: #273244;
    --mk-backdrop: rgba(0, 0, 0, 0.5);
  }
}

/* ── 1. 文字の自動拡大を止める（横向きで勝手に大きくならない） ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── 2. 入力欄は 16px（iPhone が勝手に拡大しない）。指で触る画面だけ ── */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea { font-size: max(16px, 1em); }
}

/*
  ここから下は @layer components の中に置く。サイト自身の CSS（Tailwind の utilities を含む）が常に勝つ。
  例えば class="py-4 mk-safe-top" と並べると py-4 が勝つ。両方ほしいときは style で calc(1rem + env(safe-area-inset-top)) と書く。
  上の 1・2（文字の自動拡大・入力欄 16px）だけは、サイトの小さな文字指定より強くしたいので層の外に置いている。
*/
@layer components {
/* ── 3. 安全領域（ノッチ・ホームバー）。viewport-fit=cover と組で使う ── */
.mk-safe-top    { padding-top: env(safe-area-inset-top, 0px); }
.mk-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.mk-safe-x      { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.mk-safe        { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
/* 下に貼りつく帯（固定の下部ボタンなど）。中身の下に安全領域ぶんを足す */
.mk-fixed-bottom { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
.mk-fixed-top    { position: fixed; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top, 0px); }

/* ── 4. 画面の高さ。古いブラウザは 100vh、新しいものは 100dvh（アドレスバーの伸び縮みに追従） ── */
.mk-screen   { min-height: 100vh; min-height: 100dvh; }
.mk-h-screen { height: 100vh; height: 100dvh; }
.mk-max-screen { max-height: 100vh; max-height: 100dvh; }

/* ── 5. 指の的。44px 以上。付けたものだけに効く ── */
.mk-tap {
  min-height: var(--mk-tap);
  min-width: var(--mk-tap);
  touch-action: manipulation;
}
a.mk-tap, button.mk-tap, .mk-tap[role="button"] { display: inline-flex; align-items: center; justify-content: center; }
/* 中のボタン・リンク・入力をまとめて 44px にする（道具の画面の外枠に付ける） */
.mk-touch :is(button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, [role="button"], [role="tab"]) {
  min-height: var(--mk-tap);
  touch-action: manipulation;
}
.mk-touch :is(a.mk-tap-link, nav a) { min-height: var(--mk-tap); display: inline-flex; align-items: center; }
/* 現場（屋外・手袋）で使う画面は 48px */
.mk-field { --mk-tap: 48px; }

/* ── 6. 文字の下限 12px。小さく見せたい注記に ── */
.mk-small { font-size: max(12px, 0.75rem); line-height: 1.5; }

/* ── 7. 表は横に滑らせる。頁全体を横にはみ出させない ── */
.table-scroll, .mk-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.table-scroll > table, .mk-table-scroll > table { min-width: 100%; }
/* 長い URL・メール・番号を折り返す */
.mk-break { overflow-wrap: anywhere; word-break: normal; }
/* 最後の手段。はみ出しの原因を直せないときだけ（隠すだけで、直したことにはならない） */
.mk-clip-x { overflow-x: clip; }

/* ── 8. hover だけで出るものを作らない ──
   hover の見た目は @media (hover: hover) の中に書く（Tailwind v4 の hover: は最初からそうなっている）。
   hover で現れる要素には .mk-reveal を付け、親に .mk-reveal-host を付ける。
   指の画面では最初から見え、マウスの画面では hover かキーボードの focus で見える。 */
.mk-reveal-host .mk-reveal { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .mk-reveal-host .mk-reveal { opacity: 0; transition: opacity 120ms ease; }
  .mk-reveal-host:hover .mk-reveal,
  .mk-reveal-host:focus-within .mk-reveal { opacity: 1; }
}

/* ── 9. 動きを減らしたい人には動かさない ── */
@media (prefers-reduced-motion: reduce) {
  .mk-sheet, .mk-sheet-backdrop, .mk-ptr.is-busy, .mk-swipe, .mk-swipe-content { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   アプリの殻。html[data-app] は、アプリとして開いているとき（Capacitor の殻 / ホーム画面の PWA）だけ付く。
   付けるのは APP_MODE_SCRIPT（src/app-shell.ts）。ブラウザで見ている人の見た目は変えない。
   ══════════════════════════════════════════════════════════════════ */
html[data-app] { -webkit-tap-highlight-color: transparent; }
html[data-app] body { overscroll-behavior-y: contain; }
html[data-app] :is(button, a, [role="button"]) { touch-action: manipulation; }
html[data-app] :is(button, [role="button"], a.mk-tab):active { transform: scale(0.97); transition: transform 60ms ease-out; }
/* 下のタブを出すサイトは body に .mk-has-tabbar を付ける（本文の底をタブのぶん空ける） */
html[data-app] body.mk-has-tabbar { padding-bottom: calc(var(--mk-tabbar-h) + env(safe-area-inset-bottom, 0px)); }

/* 下のタブ（TabBar）。既定はアプリのときだけ。.mk-tabbar--always でブラウザでも出す */
.mk-tabbar { display: none; }
html[data-app] .mk-tabbar, .mk-tabbar.mk-tabbar--always {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  background: color-mix(in srgb, var(--mk-surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--mk-line);
}
.mk-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--mk-tabbar-h); color: var(--mk-muted); text-decoration: none;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.mk-tab svg { width: 24px; height: 24px; }
.mk-tab[aria-current="page"] { color: var(--mk-accent); }
.mk-tab[aria-current="page"] svg { stroke-width: 2.3; }

/* 下からせり上がる一枚（Sheet） */
.mk-sheet-backdrop { position: fixed; inset: 0; z-index: 58; background: var(--mk-backdrop); animation: mk-fade-in 220ms ease-out; transition: opacity 200ms ease-out; }
.mk-sheet-backdrop.is-closing { opacity: 0; }
.mk-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 59;
  display: flex; flex-direction: column; background: var(--mk-surface); color: var(--mk-ink);
  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(16, 41, 66, .18);
  animation: mk-sheet-in 280ms cubic-bezier(.2, .8, .2, 1); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); will-change: transform;
}
.mk-sheet.is-closing { transform: translateY(100%) !important; }
.mk-sheet-grip { display: flex; flex-shrink: 0; justify-content: center; padding: 10px 0 4px; }
.mk-sheet-grip > span { width: 40px; height: 6px; border-radius: 999px; background: var(--mk-line); }
.mk-sheet-body { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 640px) {
  /* 机の上では画面の真ん中の窓にする（下から出る板は指のための形） */
  .mk-sheet.mk-sheet--center { left: 50%; right: auto; bottom: auto; top: 50%; width: min(28rem, calc(100vw - 32px)); border-radius: 16px; transform: translate(-50%, -50%); animation: mk-fade-in 160ms ease-out; }
  .mk-sheet.mk-sheet--center.is-closing { transform: translate(-50%, -50%) !important; opacity: 0; }
}
@keyframes mk-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mk-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* 横に払って消す行（SwipeRow） */
.mk-swipe { position: relative; overflow: hidden; max-height: 400px; transition: max-height 240ms ease, opacity 200ms ease; }
.mk-swipe.is-gone { max-height: 0; opacity: 0; }
.mk-swipe-action {
  position: absolute; top: 0; bottom: 0; right: 0; width: 88px;
  display: flex; align-items: center; justify-content: center; border: 0;
  background: var(--mk-danger); color: #fff; font-size: 13px; font-weight: 700;
}
.mk-swipe-content { position: relative; background: var(--mk-surface); transition: transform 220ms cubic-bezier(.2, .8, .2, 1); }

/* 引っ張って更新の印（PullToRefresh） */
.mk-ptr-wrap { pointer-events: none; position: fixed; left: 0; right: 0; z-index: 70; display: flex; justify-content: center; }
.mk-ptr { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 999px; background: var(--mk-surface); color: var(--mk-accent); box-shadow: 0 6px 18px rgba(16, 41, 66, .2); }
.mk-ptr svg { width: 20px; height: 20px; }
.mk-ptr.is-busy { animation: mk-spin 800ms linear infinite; }
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* 部屋の切り替え（AppSwitcher） */
.mk-switcher-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--mk-tap); min-height: var(--mk-tap); border: 0; border-radius: 10px;
  background: transparent; color: inherit; cursor: pointer;
}
@media (hover: hover) { .mk-switcher-button:hover { background: color-mix(in srgb, var(--mk-ink) 6%, transparent); } }
.mk-switcher-button svg { width: 22px; height: 22px; }
.mk-switcher-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px 20px; }
.mk-switcher-title { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mk-muted); }
.mk-switcher-close { min-width: var(--mk-tap); min-height: var(--mk-tap); border: 0; background: transparent; color: var(--mk-muted); font-size: 20px; cursor: pointer; }
.mk-switcher-list { list-style: none; margin: 0; padding: 4px 8px 12px; }
.mk-room {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 56px; padding: 8px 12px; border-radius: 12px; color: var(--mk-ink); text-decoration: none;
}
@media (hover: hover) { .mk-room:hover { background: color-mix(in srgb, var(--mk-ink) 5%, transparent); } }
.mk-room[aria-current="true"] { background: color-mix(in srgb, var(--mk-accent) 10%, transparent); }
.mk-room-name { font-size: 15px; font-weight: 700; }
.mk-room-desc { font-size: 12px; color: var(--mk-muted); }
.mk-room-host { font-size: 12px; color: var(--mk-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
}