/* ============================================================
   Lethonaut — Layout
   サイドバー(PC) + 下部タブ(スマホ) + ヘッダー + メインコンテンツ
   ============================================================ */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-base);
}

/* ---------- サイドバー(PC: ≥768px) ---------- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-base);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4) var(--space-4) var(--space-4);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
  padding: 0 var(--space-3) var(--space-2) var(--space-3);
  text-decoration: none;
  display: block;
}
.sidebar-brand:hover { color: var(--fg-base); }
.sidebar-brand .brand-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  font-weight: 400;
  margin-top: var(--space-1);
  text-transform: uppercase;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
  flex-grow: 1;
}
/* スクロール可能領域 (上部、項目が多くても下部固定領域に被らない) */
.sidebar-nav--scrollable {
  overflow-y: auto;
  min-height: 0; /* flex item を縮ませて overflow を効かせる */
  /* 控えめなスクロールバー */
  scrollbar-width: thin;
  scrollbar-color: var(--fg-subtle) transparent;
}
.sidebar-nav--scrollable::-webkit-scrollbar { width: 6px; }
.sidebar-nav--scrollable::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav--scrollable::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.sidebar-nav--scrollable:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
.sidebar-nav--scrollable::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

/* グループ (Primary / Content / Analytics / Other) */
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sidebar-group + .sidebar-group {
  margin-top: var(--space-3);
}
.sidebar-group-label {
  display: block;
  padding: 0 var(--space-3);
  margin-bottom: 2px;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.sidebar-link i {
  font-size: 18px;
  flex: 0 0 auto;
}
.sidebar-link:hover {
  background: var(--hover-overlay);
  color: var(--fg-base);
}
.sidebar-link.is-active {
  color: var(--fg-base);
  background: var(--hover-overlay);
}
.sidebar-link.is-active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.sidebar-link.is-active i {
  color: var(--accent);
}
.sidebar-link.is-disabled {
  color: var(--fg-subtle);
  cursor: not-allowed;
  pointer-events: none;
}

/* 親メニューの直下に表示するサブリンク
   ・インデント (Phosphor アイコン1個分の幅 = ~24px ぶん右に寄せ)
   ・フォント1段小さめ + 色は --fg-subtle (active 時だけ --accent)
   ・親リンク用の左バー(::before) は出さない */
.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1)
    calc(var(--space-3) + var(--space-6));
  margin-top: 2px;
  color: var(--fg-subtle);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast),
    color var(--transition-fast);
}
.sidebar-sublink i {
  font-size: 14px;
  flex: 0 0 auto;
}
.sidebar-sublink:hover {
  background: var(--hover-overlay);
  color: var(--fg-muted);
}
.sidebar-sublink.is-active {
  color: var(--accent);
  background: var(--hover-overlay);
}
.sidebar-sublink.is-active i { color: var(--accent); }

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-3) var(--space-3);
}

.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-3);
  /* スクロール領域に圧迫されず常に見える位置に固定する */
  flex-shrink: 0;
}
.sidebar-user {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.sidebar-user .user-name {
  display: block;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  margin-top: 2px;
}

.sidebar-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-action:hover {
  background: var(--hover-overlay);
  color: var(--fg-base);
}
.sidebar-action i { font-size: 18px; }

/* P3: フッターのアイコン行(ショートカット/テーマ切替/ログアウトを省スペース化) */
.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) 0;
}
.sidebar-footer-actions form {
  display: inline-flex;
  margin: 0;
}
.sidebar-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-icon-action:hover {
  background: var(--hover-overlay);
  color: var(--fg-base);
}
.sidebar-icon-action i { font-size: 18px; }

/* ---------- メインコンテンツ ---------- */
.app-main {
  margin-left: var(--sidebar-width);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-8);
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
  min-height: 64px;
}
.app-header-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
}
/* PCヘッダー右側: ページ別アクション(meta-line)+ 検索アイコン(P1)をまとめる */
.app-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-content {
  padding: var(--space-8);
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  flex-grow: 1;
}

.app-content--narrow {
  max-width: var(--content-narrow-max);
}

/* ---------- モバイル下部タブ ---------- */
.mobile-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  z-index: 100;
  align-items: stretch;
  justify-content: space-around;
}

.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--fg-muted);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  -webkit-tap-highlight-color: transparent;
}
.mobile-tab i { font-size: 20px; }
.mobile-tab.is-active { color: var(--accent); }

.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  /* 3 要素(タイトル + スペースバッジ + 右アクション)並びで、タイトルが flex:1
     で伸びるとバッジと接触するのを防ぐ最小の隙間。 */
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-base);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mobile-header .brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--fg-base);
  text-decoration: none;
}
/* D-5: 現在ページ名(Home 以外)。長い場合は省略 */
.mobile-header-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--fg-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task 27-B: チームスペース識別バッジ(モバイルヘッダ)。
   ページ名と右側アクションの間に控えめな pill として表示。長いチーム名は省略。 */
.mobile-header-space-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 40%;
  padding: 4px var(--space-2);
  border-radius: 999px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--fg-base);
  font-size: var(--text-xs);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.mobile-header-space-badge > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* アイコンは意味アイコンではなく装飾なので(aria-hidden 済)、コントラスト比を
   優先して --accent(ライト側 #d99595 で背景 --bg-surface-2 に対して約 2.4:1 =
   WCAG AA 未達)ではなく --fg-muted を使う。ダーク側でも十分見える。 */
.mobile-header-space-badge i { font-size: 14px; color: var(--fg-muted); }
.mobile-header-space-badge:hover,
.mobile-header-space-badge:focus-visible {
  background: var(--bg-surface);
  border-color: var(--accent);
}

/* モバイルヘッダー右側のアクション列(船・検索・テーマ切替)。
   全ページ共通のレイアウト土台(旧: pages/search.css から 2026-07-19 精査③で移動) */
.mobile-header-actions { display: flex; align-items: center; gap: var(--space-2); }

/* ---------- レスポンシブ切替 ---------- */
@media (max-width: 767px) {
  .sidebar { display: none; }
  .app-main { margin-left: 0; }
  .app-header { display: none; }
  .mobile-header { display: flex; }
  .mobile-tabs { display: flex; }
  .app-content {
    padding: var(--space-4);
    padding-bottom: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  }
}

/* ---------- ログイン等の認証画面 (サイドバーなし) ---------- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--bg-base);
}
.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.auth-brand {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-brand .brand-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  color: var(--fg-base);
  letter-spacing: var(--tracking-tight);
}
.auth-brand .brand-sub {
  display: block;
  margin-top: var(--space-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}
.auth-foot {
  text-align: center;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.auth-foot a { color: var(--accent); }

/* ---------- クイック入力画面 (スマホ全画面) ---------- */
.quick-shell {
  min-height: 100vh;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.quick-header .quick-title {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.quick-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-4);
}
.quick-textarea {
  flex-grow: 1;
  min-height: 200px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  color: var(--fg-base);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  resize: none;
}
.quick-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.quick-typebar {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
}
.quick-typebar::-webkit-scrollbar { display: none; }

.quick-recent {
  border-top: 1px solid var(--border);
  padding: var(--space-3) var(--space-4) var(--space-6);
}
.quick-recent .recent-label {
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.quick-recent-item {
  font-size: var(--text-sm);
  color: var(--fg-muted);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-recent-item:last-child { border-bottom: none; }

/* ---------- A-1 クイック記録: モード切替(アイデア/日記) ---------- */
.quick-mode {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
}
.quick-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.quick-mode-btn.is-active {
  border-color: var(--accent);
  color: var(--fg-base);  /* 選択はアクセント枠で示す。accent 文字はライトで低コントラストなので fg-base */
  background: var(--bg-surface-2);
}
.quick-mode-journal [data-idea-only] { display: none; }

/* ---------- A-1 クイック記録 FAB(Home 以外でモバイル右下。PC は非表示=サイドバー項目を使う) ---------- */
.quick-fab {
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px) + var(--space-4));
  z-index: 95;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}
.quick-fab:active { background: var(--accent-active); }
.quick-fab:focus-visible {
  outline: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), 0 0 0 3px var(--focus-ring);
}
/* PC でも Home 以外は右下 FAB を表示(クイック記録をサイドバーから FAB に集約=P2)。
   PC は下部タブが無いので bottom はタブ高さ分を含まない位置に置き直す。 */
@media (min-width: 768px) {
  .quick-fab {
    bottom: var(--space-6);
    right: var(--space-6);
  }
  /* 本文末尾が FAB に隠れないよう下余白を確保 */
  .has-quick-fab .app-content {
    padding-bottom: calc(var(--space-8) + 72px);
  }
}
/* FAB を出すページ(非Homeモバイル)では本文末尾が FAB に隠れないよう余白を足す */
@media (max-width: 767px) {
  .has-quick-fab .app-content {
    padding-bottom: calc(var(--bottom-tab-height) + env(safe-area-inset-bottom, 0px) + var(--space-4) + 72px);
  }
}

/* ---------- 船「観測手帳」(Phase 3): モノクロ線画マーク(計画書 v1.6) ----------
   個人スペースのみ表示される「育つ船」= 星図への常設入口。
   PC はサイドバーのワードマーク「Lethonaut」の右、モバイルはヘッダー actions 内。
   SVG はアルファの形としてだけ使い(CSS mask)、色はここで文字色系に塗る
   = テーマ追従が自動。差し替え SVG は単色で形だけ書き出せばよい(計画書 §6.2)。
   URL はテンプレートが inline style の --ship-src で渡す(段階でファイルが変わるため)。
   揺れアニメは base.css の prefers-reduced-motion 一括抑止(C-6)で自動停止する。 */
.ship-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-color: var(--fg-muted);
  -webkit-mask: var(--ship-src) no-repeat center / contain;
  mask: var(--ship-src) no-repeat center / contain;
  animation: ship-bob 4s ease-in-out infinite;
  transition: background-color var(--transition-fast);
}
.ship-mark:hover,
.ship-mark:focus-visible { background-color: var(--fg-base); }
.ship-mark:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* 波にゆったり揺れる(±1.2px、計画書 §6.1 v1.7)。注意喚起的な動きは禁止 */
@keyframes ship-bob {
  0%, 100% { transform: translateY(1.2px); }
  50% { transform: translateY(-1.2px); }
}
/* PC: ワードマークの右の余白に「線画の小さな情景」を絶対配置(縦スペースゼロ)。
   二層 mask = ::before が情景(scene.svg、薄い色・静止)/ ::after が船(stageN.svg、
   濃い色・揺れる)。単色 mask のままレイヤー別の濃淡で奥行きを出す(計画書 §6.2 v1.7)。 */
.sidebar-brand-row { position: relative; }
.ship-scene {
  position: absolute;
  top: -2px;
  right: var(--space-3);
  display: block;
  width: 72px;
  height: 40px;
}
.ship-scene::before,
.ship-scene::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ship-scene::before {
  background-color: var(--fg-subtle);
  -webkit-mask: var(--ship-scene-src) no-repeat center / contain;
  mask: var(--ship-scene-src) no-repeat center / contain;
}
.ship-scene::after {
  background-color: var(--fg-muted);
  -webkit-mask: var(--ship-src) no-repeat center / contain;
  mask: var(--ship-src) no-repeat center / contain;
  animation: ship-bob 4s ease-in-out infinite;
  transition: background-color var(--transition-fast);
}
.ship-scene:hover::after,
.ship-scene:focus-visible::after { background-color: var(--fg-base); }
.ship-scene:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  /* base.css の a:focus-visible が付ける box-shadow と二重リングにならないよう打ち消す
     (2026-07-19 精査⑧。mask を持つ .ship-mark 側は box-shadow がマスクで見えないため outline のみで良い) */
  box-shadow: none;
}
/* モバイルヘッダー: btn-icon(32px)と同寸・同トーンに揃える(船は気持ち大きめに) */
.ship-mark--mobile {
  width: 32px;
  height: 32px;
  -webkit-mask-size: 27px 27px;
  mask-size: 27px 27px;
}