/* そなえ（仮） アプリシェル（モバイルファースト） */
:root{
  --navy:#0e2a54; --blue:#1e63d6; --blue-2:#2563eb; --cyan:#37cff2;
  --safe:#10b981; --warn:#f59e0b; --danger:#dc2626;
  --bg:#f5f7fb; --card:#ffffff; --line:#e2e8f0; --text:#0f172a; --muted:#64748b;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b1324; --card:#121c33; --line:#26324d; --text:#e8eefc; --muted:#9fb0cc; }
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family: system-ui, -apple-system, "BIZ UDPGothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background:var(--bg); color:var(--text); -webkit-text-size-adjust:100%;
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
.app-header{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: linear-gradient(135deg,var(--blue),var(--navy)); color:#fff;
}
.app-header__logo{ width:28px; height:28px; display:block; }
.app-header__title{ font-weight:800; font-size:1.05rem; letter-spacing:.02em; }
.app-header__dot{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; opacity:.9; }
.app-header__dot i{ width:9px; height:9px; border-radius:50%; background:var(--safe); display:inline-block; }
body.is-offline .app-header__dot i{ background:var(--warn); }

.offline-banner{
  display:none; background:var(--warn); color:#1f2937; font-weight:700; font-size:.85rem;
  padding:8px 14px; text-align:center;
}
body.is-offline .offline-banner{ display:block; }

.app-main{ padding:16px 14px 24px; max-width:720px; margin:0 auto; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 1px 3px rgba(16,34,64,.06); }
.card h2{ margin:0 0 6px; font-size:1.05rem; }
.card p{ margin:6px 0; color:var(--muted); line-height:1.6; font-size:.92rem; }
.badge{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 9px; border-radius:999px; background:#eaf1ff; color:var(--blue-2); }
.notice{ border-left:4px solid var(--warn); background:#fff7ed; color:#7c2d12; border-radius:8px; padding:10px 12px; font-size:.86rem; }
@media (prefers-color-scheme: dark){ .notice{ background:#2a1f12; color:#fcd9a8; } .badge{ background:#1a2a4d; } }

.app-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(6,1fr);
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.app-nav button{
  appearance:none; border:0; background:none; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 1px; font-size:.63rem; font-weight:700; cursor:pointer; min-height:56px;
}
.app-nav button .ic{ font-size:1.15rem; line-height:1; }
.app-nav button[aria-current="page"]{ color:var(--blue-2); }

/* --- フォーム / ボタン / BCP（Phase 0 B） --- */
.app-main h3{ margin:0 0 6px; font-size:.98rem; }
.muted{ color:var(--muted); font-size:.86rem; }
.lbl{ display:block; font-size:.8rem; font-weight:700; color:var(--muted); margin:10px 0 4px; }
.inp{ width:100%; padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--text); font:inherit; font-size:16px; }
textarea.inp{ resize:vertical; }
.btn{ appearance:none; border:0; border-radius:10px; background:var(--blue-2); color:#fff; font-weight:800; font-size:.95rem; padding:12px 16px; cursor:pointer; min-height:44px; }
.btn--ghost{ background:transparent; color:var(--blue-2); border:1.5px solid var(--line); }
.btn--sm{ padding:7px 12px; min-height:0; font-size:.85rem; }
.formmsg{ margin-top:8px; font-size:.85rem; color:var(--danger); min-height:1em; }
a{ color:var(--blue-2); }
.code{ font-family:ui-monospace,monospace; font-weight:800; font-size:1.3rem; letter-spacing:.12em; background:#eaf1ff; color:var(--navy); padding:6px 12px; border-radius:8px; display:inline-block; }
.sec{ padding:9px 0; border-top:1px solid var(--line); }
.sec:first-of-type{ border-top:0; }
.sec__h{ font-weight:700; }
.sec__b{ color:var(--text); font-size:.9rem; line-height:1.6; margin-top:3px; }
.tag{ font-size:.68rem; font-weight:800; background:#eaf1ff; color:var(--blue-2); padding:1px 7px; border-radius:999px; }
@media (prefers-color-scheme: dark){ .code{ background:#1a2a4d; color:#cfe0ff; } .tag{ background:#1a2a4d; } }

/* ======================================================================
   デスクトップ基盤（PC版＝平常時の“基盤”）。モバイル既定の上に min-width 層を
   乗せるだけ（層を外せば現行モバイルがそのまま災害時のフォールバックとして生きる）。
   下部5タブ(#nav)を“見た目だけ”左サイドバー化。DOM・SPAルータは不変。
   ====================================================================== */
@media (min-width:1024px){
  body{
    padding-bottom:0; display:grid; min-height:100vh;
    grid-template-columns:260px minmax(0,1fr); grid-template-rows:auto auto 1fr;
    grid-template-areas:"nav head" "nav banner" "nav main";
  }
  .app-header{ grid-area:head; }
  .offline-banner{ grid-area:banner; }
  .app-main{ grid-area:main; max-width:1040px; margin:0; padding:24px 32px 56px; }
  /* 下部バー(.app-nav: fixed/bottom, grid5) → 左サイドバーへ変換 */
  .app-nav{
    grid-area:nav; position:sticky; top:0; align-self:start; height:100vh; overflow:auto;
    left:auto; right:auto; bottom:auto; grid-template-columns:none;
    display:flex; flex-direction:column; gap:2px; padding:14px 10px;
    border-top:0; border-right:1px solid var(--line);
  }
  .app-nav button{
    flex-direction:row; justify-content:flex-start; gap:12px; width:100%;
    min-height:46px; padding:10px 14px; border-radius:10px; font-size:.9rem;
  }
  .app-nav button .ic{ font-size:1.15rem; }
  .app-nav button[aria-current="page"]{ background:#eaf1ff; color:var(--blue-2); box-shadow:inset 3px 0 0 var(--blue-2); }
  #bcpRoot{ max-width:820px; }                 /* 長文BCPは可読幅に制限（全幅にしない） */
  .app-main > .card{ max-width:820px; }        /* 読み物ビュー(home/設定/通知等)の横伸び防止。#boardRoot等のラッパ内は対象外=掲示板2ペインは全幅可 */
  /* ログイン/オンボーディング中(showNav=false)は空のレール列を畳み、ヘッダでブランド表示 */
  body.nav-hidden{ grid-template-columns:1fr; grid-template-areas:"head" "banner" "main"; }
  body.nav-hidden .app-main{ max-width:460px; margin:32px auto; }
}

/* 中間幅（タブレット）＝レール縮約（アイコン＋小ラベル） */
@media (min-width:768px) and (max-width:1023px){
  body{
    padding-bottom:0; display:grid; min-height:100vh;
    grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto auto 1fr;
    grid-template-areas:"nav head" "nav banner" "nav main";
  }
  .app-header{ grid-area:head; }
  .offline-banner{ grid-area:banner; }
  .app-main{ grid-area:main; max-width:900px; margin:0; padding:20px 20px 48px; }
  .app-nav{
    grid-area:nav; position:sticky; top:0; align-self:start; height:100vh; overflow:auto;
    left:auto; right:auto; bottom:auto; grid-template-columns:none;
    display:flex; flex-direction:column; gap:4px; padding:12px 6px;
    border-top:0; border-right:1px solid var(--line);
  }
  .app-nav button{ flex-direction:column; gap:3px; min-height:54px; font-size:.6rem; padding:8px 2px; border-radius:10px; }
  .app-nav button[aria-current="page"]{ background:#eaf1ff; }
  #bcpRoot{ max-width:760px; }
  .app-main > .card{ max-width:760px; }
  body.nav-hidden{ grid-template-columns:1fr; grid-template-areas:"head" "banner" "main"; }
  body.nav-hidden .app-main{ max-width:460px; margin:28px auto; }
}

@media (prefers-color-scheme: dark){
  .app-nav button[aria-current="page"]{ background:#1a2a4d; }
}

/* ======================================================================
   機能C：災害用掲示板（bulletins）＋ 伝言板・安否（messages）
   ====================================================================== */
.bd-seg{ display:flex; gap:8px; margin-bottom:14px; }
.bd-seg button{ flex:1; appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:800; font-size:.9rem; padding:10px 12px; border-radius:10px; cursor:pointer; min-height:44px; }
.bd-seg button.is-on{ border-color:var(--blue-2); color:var(--blue-2); background:#eaf1ff; }

.bd-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-top:6px; }
.bd-row > div{ flex:1; min-width:160px; }
.bd-check{ display:flex; align-items:center; gap:7px; font-size:.86rem; font-weight:700; color:var(--muted); padding-bottom:10px; }

.bd-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.bd-pill{ appearance:none; border:1.5px solid var(--line); background:var(--card); color:var(--muted); font-weight:700; font-size:.82rem; padding:7px 14px; border-radius:999px; cursor:pointer; }
.bd-pill.is-on{ border-color:var(--blue-2); color:var(--blue-2); background:#eaf1ff; }

.blt-feed{ display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:12px; }
.blt{ margin:0; }
.blt__body{ line-height:1.6; font-size:.95rem; }
.blt__meta{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; }
.blt__ops{ margin-top:10px; display:flex; gap:8px; }
.blt--pinned{ border-color:var(--warn); box-shadow:0 1px 3px rgba(245,158,11,.18); }
.blt__pin{ font-weight:800; color:#b45309; font-size:.78rem; margin-bottom:6px; }

.tag--staff{ background:#eaf1ff; color:var(--blue-2); }
.tag--family{ background:#e0f5fc; color:#0e7490; }
.tag--all{ background:#eef2f7; color:var(--navy); }

.nav-badge{ display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; background:var(--danger); color:#fff; font-size:.66rem; font-weight:800; border-radius:999px; padding:0 5px; margin-left:6px; }

.msg-wrap{ display:grid; gap:16px; grid-template-columns:1fr; }
.sf-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.sf-btn{ appearance:none; border:2px solid var(--line); background:var(--card); color:var(--text); font-weight:800; font-size:.95rem; padding:14px 6px; border-radius:12px; cursor:pointer; min-height:56px; }
.sf-btn--safe.is-on{ border-color:var(--safe); background:rgba(16,185,129,.12); color:#047857; }
.sf-btn--help.is-on{ border-color:var(--danger); background:rgba(220,38,38,.12); color:#b91c1c; }
.sf-btn--unknown.is-on{ border-color:var(--muted); background:rgba(100,116,139,.12); }

.sf-summary{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.sf-chip{ display:inline-block; font-size:.74rem; font-weight:800; padding:2px 10px; border-radius:999px; background:#eef2f7; color:var(--muted); }
.sf-chip--safe{ background:rgba(16,185,129,.15); color:#047857; }
.sf-chip--help{ background:rgba(220,38,38,.15); color:#b91c1c; }
.sf-chip--unknown{ background:rgba(100,116,139,.15); color:var(--muted); }

.sf-roster{ display:flex; flex-direction:column; gap:2px; }
.sf-rrow{ display:flex; align-items:center; justify-content:space-between; padding:9px 4px; border-top:1px solid var(--line); }
.sf-rrow:first-child{ border-top:0; }
.sf-rrow--help{ background:rgba(220,38,38,.06); border-radius:8px; }
.sf-name{ font-weight:700; font-size:.9rem; }

.msg-list{ display:flex; flex-direction:column; gap:10px; }
.msg-item{ border:1px solid var(--line); border-radius:12px; padding:11px 13px; background:var(--card); }
.msg-item--all{ border-left:3px solid var(--navy); }
.msg-item--mine{ background:#f3f7ff; }
.msg-item--pending{ opacity:.7; border-style:dashed; }
.msg-head{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.8rem; }
.msg-from{ font-weight:800; }
.msg-text{ margin-top:5px; line-height:1.55; font-size:.92rem; }
.msg-ops{ margin-top:7px; }

@media (min-width:1024px){
  .msg-wrap{ grid-template-columns:minmax(300px,380px) 1fr; align-items:start; }
  .blt-feed{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  .blt-feed--pinned{ grid-template-columns:1fr; }
}

@media (prefers-color-scheme: dark){
  .bd-seg button.is-on, .bd-pill.is-on, .tag--staff{ background:#1a2a4d; }
  .tag--family{ background:#0c2a33; color:#7dd3e8; }
  .tag--all{ background:#1a2440; color:#cfe0ff; }
  .msg-item--mine{ background:#132038; }
  .sf-chip{ background:#1a2440; }
}

/* ======================================================================
   機能D：手動一斉通知（notices）
   ====================================================================== */
.nt-check{ display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:700; color:var(--text); margin-top:12px; }
.nt-feed{ display:grid; gap:12px; grid-template-columns:1fr; }
.nt-item{ margin:0; }
.nt-item--unread{ border-color:var(--blue-2); box-shadow:0 1px 3px rgba(37,99,235,.15); }
.nt-title{ font-weight:800; font-size:1rem; margin-bottom:4px; }
.nt-body{ line-height:1.6; font-size:.95rem; }
.nt-meta{ margin-top:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.8rem; }
.nt-status{ margin-top:8px; font-size:.78rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nt-mailstat{ color:#047857; font-weight:700; }
.nt-ops{ margin-top:10px; }
@media (min-width:1024px){ .nt-feed{ grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } }
@media (prefers-color-scheme: dark){ .nt-mailstat{ color:#34d399; } }

/* ======================================================================
   機能E：緊急発報（定型文テンプレート）
   ====================================================================== */
.al-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.al-name{ font-weight:800; font-size:1rem; }
.al-title{ margin-top:6px; font-weight:700; font-size:.92rem; }
.al-body{ margin-top:4px; line-height:1.6; font-size:.92rem; }
.al-ops{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.al-fire, .al-fire-go{ background:var(--danger); }
.al-fire-panel{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
@media (min-width:1024px){ #alertsRoot > .card{ max-width:760px; } }