/* アプリの枠のメニュー（appnav.js。2026-11-01 のオーナーの決定「ホームを分ける」案 A。docs/HOME_NAV.md）。
   アプリ（index.html。style.css の色の決まり・明るい地と暗い地）と、サーバーが描く暗い地のページ（コンテストなど。share-page.css）の両方が読む。
   色はアプリの色（--surface など）を使い、無いページ（share-page.css）では暗い地（Night）の色になる。
   - 広い画面（900px 以上）: 左のメニュー（240px。900〜1099px の窓と、1600px 未満の窓のログの画面はアイコンだけの 72px）
   - 狭い画面: 下のタブ（body.tabs-on のときだけ。ホーム・グループ・みんな・コンテスト・お知らせの画面） */
:root { --side-w: 0px; --tabs-h: 0px; }
.app-nav {
  --nav-bg: var(--surface, #211a16);
  --nav-fg: var(--text, #f3ebe1);
  --nav-muted: var(--muted, #b5a99f);
  --nav-line: var(--line, #3a302a);
  --nav-on-fg: var(--link, #f4895a);
  --nav-on-bg: color-mix(in srgb, var(--accent, #ee6a2f) 15%, transparent);
  --nav-accent: var(--accent, #ee6a2f);
  --nav-accent-text: var(--accent-text, #2a2320);
  display: none;
  box-sizing: border-box;
  font-family: var(--font-body, "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.app-nav *, .app-nav *::before, .app-nav *::after { box-sizing: border-box; }
.app-nav ul { list-style: none; margin: 0; padding: 0; }
.app-nav li[hidden] { display: none !important; }
.app-nav .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-nav .nav-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-nav a { -webkit-user-select: none; user-select: none; }
.app-nav a:focus-visible { outline: 2px solid var(--nav-on-fg); outline-offset: -2px; }
/* 押した印（画面が替わるまで。0.1 秒以内の反応） */
.app-nav .nav-item.nav-pending { opacity: .72; }
.app-nav .nav-dot[hidden], .app-nav .nav-badge[hidden], .app-nav .nav-count[hidden] { display: none !important; }

/* ---- 広い画面: 左のメニュー ---- */
@media (min-width: 900px) {
  body.has-appnav { --side-w: 240px; padding-left: var(--side-w); }
  body.has-appnav .app-side {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40; width: var(--side-w);
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 12px 14px;
    background: var(--nav-bg); color: var(--nav-fg); border-right: 1px solid var(--nav-line);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .app-side .nav-brand { display: block; line-height: 0; padding: 2px 12px 18px; }
  .app-side .nav-brand img { height: 36px; width: auto; }
  .app-side .nav-list { display: grid; gap: 2px; }
  /* 文字は 14px・行は 40px（2026-11-03 のオーナー「サイドメニューの文字サイズもうちょっとだけ小さくてもいいかも。これからメニュー項目が増えた時に困るので」。前は 15px・44px） */
  .app-side .nav-item {
    position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 12px; border-radius: 10px;
    color: var(--nav-fg); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.3;
  }
  .app-side .nav-item .nav-ico { width: 20px; height: 20px; }
  .app-side .nav-item:hover { background: color-mix(in srgb, var(--nav-fg) 7%, transparent); }
  .app-side .nav-item.on { background: var(--nav-on-bg); color: var(--nav-on-fg); font-weight: 700; }
  .app-side .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-side .nav-badge { flex: none; font-size: 11px; font-weight: 700; line-height: 1.6; padding: 0 8px; border-radius: 999px; background: var(--nav-accent); color: var(--nav-accent-text); white-space: nowrap; }
  .app-side .nav-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--nav-accent); }
  /* あとで・撮り直しの本数（まだ送っていない動画があるときだけ） */
  .app-side .nav-count { flex: none; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 12px; font-weight: 700; line-height: 1; background: color-mix(in srgb, var(--nav-fg) 12%, transparent); color: var(--nav-fg); }
  .app-side .nav-item.on .nav-count { background: var(--nav-accent); color: var(--nav-accent-text); }
  .app-side .nav-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 16px; }
  .app-side .nav-settings, .app-side .nav-foot .nav-help { color: var(--nav-muted); }
  .app-side .nav-settings.on { color: var(--nav-on-fg); }
  /* 同じ作者のツール CanTalkVox（小さなカード。押すと BOOTH が新しいタブで開く） */
  .app-side .nav-ctv {
    display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--nav-line); border-radius: 14px;
    color: var(--nav-fg); text-decoration: none; background: color-mix(in srgb, var(--nav-fg) 3%, transparent);
  }
  .app-side .nav-ctv:hover { border-color: var(--nav-muted); }
  .app-side .nav-ctv-img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 316; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
  .app-side .nav-ctv-label { font-size: 11px; color: var(--nav-muted); line-height: 1.4; }
  .app-side .nav-ctv-title { font-size: 14px; line-height: 1.4; }
  .app-side .nav-ctv-ext { color: var(--nav-muted); font-weight: 400; }
  .app-side .nav-ctv-body { font-size: 12px; color: var(--nav-muted); line-height: 1.45; }

  /* 左のメニューの分だけ、画面に貼りつく部品をずらす（ホームの ＋・トーク・お知らせの帯・同意のバナー・ホーム画面に追加の帯） */
  body.has-appnav .home-dock { left: var(--side-w); padding: 0 max(20px, calc((100vw - var(--side-w) - 760px) / 2 + 20px)); }
  body.has-appnav .chat { left: var(--side-w); }
  body.has-appnav .toast { left: calc(50% + var(--side-w) / 2); max-width: calc(100vw - var(--side-w) - 32px); }
  body.has-appnav .debug-banner { left: calc(50% + var(--side-w) / 2); }
  body.has-appnav .ga-banner { left: calc(var(--side-w) + 12px); }
  body.has-appnav .pwa-card.pwa-bar { left: var(--side-w); }
  body.has-appnav .push-origin { left: calc(50% + var(--side-w) / 2); }
  /* ホームの上の行のロゴと ⚙ は、左のメニューにあるので出さない */
  body.has-appnav .home-brand, body.has-appnav .home-gear { display: none; }
  body.has-appnav .home-head-actions { margin-left: auto; }
  /* サーバーが描くページ（コンテストなど）の上のロゴも、左のメニューにあるので出さない */
  body.has-appnav .pub-bar .sp-brand { display: none; }
  body.has-appnav .pub .pub-bar { padding-top: 0; padding-bottom: 0; }
}
/* アイコンだけ（72px）: 狭い窓（900〜1099px）と、ログの画面（動画の升目が主役。1600px 未満） */
@media (min-width: 900px) and (max-width: 1099.98px) {
  body.has-appnav { --side-w: 72px; }
  body.has-appnav .app-side { padding-inline: 10px; }
  body.has-appnav .app-side .nav-brand, body.has-appnav .app-side .nav-ctv { display: none; }
  body.has-appnav .app-side .nav-item { justify-content: center; padding: 0; gap: 0; min-height: 48px; }
  body.has-appnav .app-side .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-appnav .app-side .nav-badge { position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
  body.has-appnav .app-side .nav-dot { position: absolute; top: 9px; right: 12px; }
  body.has-appnav .app-side .nav-count { position: absolute; top: 3px; right: 4px; min-width: 18px; height: 17px; padding: 0 5px; font-size: 10.5px; background: var(--nav-accent); color: var(--nav-accent-text); }
  body.has-appnav .app-side { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
}
/* たたんだ左のメニュー（2026-11-02 のオーナー「サイドメニューはたためるようにして」。左上の « で切り替え、端末に覚える）は、窓の幅によらずアイコンだけ */
@media (min-width: 900px) {
  body.has-appnav.nav-mini { --side-w: 72px; }
  body.has-appnav.nav-mini .app-side { padding-inline: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  body.has-appnav.nav-mini .app-side .nav-brand, body.has-appnav.nav-mini .app-side .nav-ctv { display: none; }
  body.has-appnav.nav-mini .app-side .nav-item { justify-content: center; padding: 0; gap: 0; min-height: 48px; }
  body.has-appnav.nav-mini .app-side .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-appnav.nav-mini .app-side .nav-badge { position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
  body.has-appnav.nav-mini .app-side .nav-dot { position: absolute; top: 9px; right: 12px; }
  body.has-appnav.nav-mini .app-side .nav-count { position: absolute; top: 3px; right: 4px; min-width: 18px; height: 17px; padding: 0 5px; font-size: 10.5px; background: var(--nav-accent); color: var(--nav-accent-text); }
  /* 上の段: ロゴ（左）とたたむボタン（右）を 1 行に。ロゴの無いツールの窓はボタンだけを右に（項目の行に重ねない）。押せる範囲は 44px 角 */
  .app-side .nav-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 44px; margin-bottom: 14px; }
  /* ロゴの無いツールの窓: ボタンだけの 1 行。高さは低く（32px）、押せる範囲は横幅いっぱい、矢印は右端（2026-11-02 のオーナー「開閉ボタンで１行とるならもう少し小さくていい。クリック判定は横幅めいっぱい」） */
  .app-side .nav-top.no-brand { min-height: 0; margin-bottom: 2px; }
  .app-side .nav-top.no-brand .nav-fold { width: 100%; height: 32px; justify-items: end; padding: 0 12px; }
  .app-side .nav-top .nav-brand { padding: 2px 12px 0; }
  .app-side .nav-fold { flex: none; width: 44px; height: 44px; border: 0; border-radius: 12px; padding: 0;
    background: transparent; color: var(--nav-muted); cursor: pointer; display: grid; place-items: center; }
  .app-side .nav-fold svg { width: 22px; height: 22px; }
  .app-side .nav-fold:hover { background: color-mix(in srgb, var(--nav-fg) 7%, transparent); color: var(--nav-fg); }
  .app-side .nav-fold:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
  /* アイコンだけのとき: ボタンはメニューの上に置き、矢印を逆向きに */
  /* アイコンだけのとき: 段はボタンだけ（項目のアイコンと同じ列の真ん中） */
  body.has-appnav:is(.nav-mini, .nav-log) .app-side .nav-top { justify-content: center; min-height: 0; margin-bottom: 2px; }
  body.has-appnav:is(.nav-mini, .nav-log) .app-side .nav-fold { width: 100%; height: 32px; justify-items: center; padding: 0; }
}
/* 開閉のアニメーション（2026-11-02 のオーナー「開閉はアニメーションにしてほしい」）。押したときだけ（画面を移るときは動かさない）。動きを減らす設定の人は動かさない */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  body.has-appnav.nav-anim { transition: padding-left .22s ease; }
  body.has-appnav.nav-anim .app-side { transition: width .22s ease, padding .22s ease; }
  body.has-appnav.nav-anim :is(.home-dock, .chat, .pwa-card.pwa-bar) { transition: left .22s ease; }
  body.has-appnav.nav-anim .app-side .nav-label, body.has-appnav.nav-anim .app-side .nav-brand { animation: nav-fade .22s ease; }
  @keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }
}
/* 窓が 900〜1099px で、もとからアイコンだけの幅のときは、広げるボタンを出さない */
@media (min-width: 900px) and (max-width: 1099.98px) { .app-side .nav-fold, .app-side .nav-top.no-brand { display: none !important; } }
@media (max-width: 899.98px) { .app-side .nav-fold { display: none; } }
@media (min-width: 900px) and (max-width: 1599.98px) {
  body.has-appnav.nav-log { --side-w: 72px; }
  body.has-appnav.nav-log .app-side { padding-inline: 10px; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  body.has-appnav.nav-log .app-side .nav-brand, body.has-appnav.nav-log .app-side .nav-ctv { display: none; }
  body.has-appnav.nav-log .app-side .nav-item { justify-content: center; padding: 0; gap: 0; min-height: 48px; }
  body.has-appnav.nav-log .app-side .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-appnav.nav-log .app-side .nav-badge { position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; padding: 0; font-size: 0; }
  body.has-appnav.nav-log .app-side .nav-dot { position: absolute; top: 9px; right: 12px; }
  body.has-appnav.nav-log .app-side .nav-count { position: absolute; top: 3px; right: 4px; min-width: 18px; height: 17px; padding: 0 5px; font-size: 10.5px; background: var(--nav-accent); color: var(--nav-accent-text); }
}

/* ---- 狭い画面: 下のタブ ---- */
@media (max-width: 899.98px) {
  body.has-appnav.tabs-on { --tabs-h: calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--tabs-h); }
  body.has-appnav.tabs-on .app-tabs {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 2px 4px env(safe-area-inset-bottom, 0px);
    padding-left: max(4px, env(safe-area-inset-left, 0px)); padding-right: max(4px, env(safe-area-inset-right, 0px));
    background: var(--nav-bg); border-top: 1px solid var(--nav-line); color: var(--nav-muted);
  }
  /* 4 か 5（コンテストがあるとき）。data-n は appnav.js が付ける */
  .app-tabs .nav-tabs-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 640px; margin: 0 auto; }
  .app-tabs .nav-tabs-list[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-tabs .nav-tabs-list[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-tabs .nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 4px 2px;
    color: var(--nav-muted); text-decoration: none; font-size: 11px; font-weight: 500; line-height: 1.2; text-align: center; min-width: 0;
  }
  .app-tabs .nav-item.on { color: var(--nav-on-fg); font-weight: 700; }
  .app-tabs .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tabs .nav-ico-wrap { position: relative; display: inline-flex; }
  .app-tabs .nav-ico { width: 24px; height: 24px; }
  .app-tabs .nav-dot { position: absolute; top: -2px; right: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--nav-accent); box-shadow: 0 0 0 2px var(--nav-bg); }

  /* 下のタブの分だけ、画面に貼りつく部品を上げる */
  body.has-appnav.tabs-on .home { padding-bottom: 88px; }
  body.has-appnav.tabs-on .home-dock { bottom: calc(var(--tabs-h) + 14px); }
  body.has-appnav.tabs-on.has-pwa-bar .home-dock { bottom: calc(var(--tabs-h) + 62px); }
  body.has-appnav.tabs-on .toast { bottom: calc(var(--tabs-h) + 16px); }
  body.has-appnav.tabs-on:has(.home-dock) .toast { bottom: calc(var(--tabs-h) + 84px); }
  body.has-appnav.tabs-on.has-pwa-bar:has(.home-dock) .toast { bottom: calc(var(--tabs-h) + 132px); }
  body.has-appnav.tabs-on:has(> :is(.modal, .player)) .toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  body.has-appnav.tabs-on .pwa-card.pwa-bar { bottom: var(--tabs-h); }
  body.has-appnav.tabs-on .ga-banner { bottom: calc(var(--tabs-h) + 12px); }
  body.has-appnav.tabs-on .push-origin { bottom: calc(var(--tabs-h) + 84px); }
  /* ＋ のメニュー（下から出る）は、上げた ＋ のすぐ上に */
  body.has-appnav.tabs-on .modal.sheet-menu:not(.sheet-menu-top) { padding-bottom: calc(var(--tabs-h) + 86px); }
}

/* メニュー・タブの行き先の画面（グループ・お知らせ・みんなの 3 秒・困ったとき・あとで・撮り直し）の「‹」は、メニューかタブがあるときは出さない。
   スマホのタブに無い画面（困ったとき・あとで・撮り直し。設定の一覧・グループの画面から入る）は、狭い画面では「‹」を残す（.nav-phone-back） */
body.has-appnav .page-back-bar.nav-top:not(.nav-phone-back) { display: none; }
@media (min-width: 900px) { body.has-appnav .page-back-bar.nav-phone-back { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .app-nav .nav-item { transition: background-color .12s ease, color .12s ease; }
}