/* ============================================================
   graph.css — 推移グラフ画面専用
   スコープ: #graphTab 配下のみ（.g-* / #avgBox / チャート）
   共通の .card を上書きするときは #graphTab を付けて範囲を限定する
   ============================================================ */
.chart-container{width:100%;height:262px;position:relative}
#graphTab.active{
  display:flex;flex-direction:column;gap:10px;
  height:calc(100vh - var(--graph-chrome-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  height:calc(100dvh - var(--graph-chrome-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height:520px
}
/* 子は基本固定。グラフカードだけ伸縮（!important を使わず詳細度で勝つ） */
#graphTab.active > *{flex:none}
#graphTab.active > .g-card{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin:0;padding:10px 10px 8px
}
/* 朝（上）と夜（下）の2段。同じ高さで分ける */
.g-pane{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.g-title{display:flex;align-items:center;gap:12px;margin:6px 4px 0;font-size:.85rem;color:var(--sub);white-space:nowrap}
.g-title>b{font-size:1rem;color:var(--text)}
.g-title i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;box-sizing:border-box}
.g-title i.sq{border-radius:3px}
.g-key{margin-left:auto;display:flex;gap:8px;font-size:.72rem}
.g-key i{background:var(--text);width:10px;height:10px;margin-right:3px}
.g-key i.h{background:transparent;border:2px solid var(--text)}
#graphTab .chart-container{flex:1 1 auto;min-height:0;height:auto}
.chart-container svg{position:absolute;left:0;top:0}
.g-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:1rem}
.g-foot{display:flex;align-items:center;justify-content:center;margin-top:4px;padding:0}
#avgBox{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g-avg{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:10px 12px 8px;box-shadow:var(--elev-1)}
.g-avg.am{border-top:3px solid var(--rp-am-head)}
.g-avg.pm{border-top:3px solid var(--rp-pm-head)}
.g-avg small{font-size:1rem;color:var(--sub)}
.g-avg b{font-size:2.7rem;line-height:1.15}
.g-avg span{font-size:1.6rem;color:var(--sub)}
.g-avg .bp-high{color:var(--high)}
.g-avg .bp-low{color:var(--low)}
.gday{box-sizing:border-box;position:relative;flex:1 1 0;min-width:0;white-space:nowrap;padding:0 16px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:var(--pill-bg);color:var(--text);font-weight:500;font-size:1.1rem}
.gday input[type=date],.gday input[type=month]{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0}
.gday{background-image:var(--face);box-shadow:var(--elev-2)}
.g-pager{box-shadow:var(--sunk)}
.g-pager{display:flex;gap:2px;width:100%;box-sizing:border-box;padding:2px;background:var(--pill-bg);border:1px solid var(--border);border-radius:15px}
.g-pager button{flex:1 1 0;min-width:0;height:34px;padding:0 5px;border:0;border-radius:12px;background:transparent;color:var(--sub);font-size:.85rem;font-weight:bold;cursor:pointer}
.g-pager button.on{background:var(--primary);background-image:var(--face-pri);color:var(--on-primary);box-shadow:var(--elev-pri)}
/* 7日（日付）・30日（月）・選んだ日で上の段の高さが同じなのは、base.css の .month-nav（高さ46px・上に12px）で揃えている。記録入力の日付の行と同じ見た目（v167）（レポートの月の行とも共通） */
/* 数字が2行に折れて崩れないようにする。文字の大きさ「大」のときは、この数字だけ標準と同じ大きさにとどめる */
.g-avg>div{white-space:nowrap}
html[data-fs="l"] .g-avg b{font-size:2.25rem}
html[data-fs="l"] .g-avg span{font-size:1.35rem}

/* ===== 試作品（2026-11-08・版番号なし）参考画像 完全再現：全要素統合版CSS（最新版） =====
   途中経過のパッチ（分離・仕上げ等）は、この統合版に吸収済みとして最終形だけを当てる。
   ライト・ダークのみ対象で、白黒モードは :not([data-theme=mono]) で除外される。 */

/* 1. 全体のベース色とカード色 */
:root:not([data-theme=mono]) #graphTab{
  --bg:#dce3ec;
  --page-bg:#dce3ec;
  --card-bg:#e0e6ee;
}

/* 2. カード間の隙間（スリット）を縦横すべて「6pxの均一な細い溝」に統一 */
:root:not([data-theme=mono]) .container{
  padding-left:10px;
  padding-right:10px;
}
:root:not([data-theme=mono]) #graphTab.active{
  gap:6px;
}
:root:not([data-theme=mono]) #graphTab #avgBox{
  gap:6px;
}
:root:not([data-theme=mono]) #graphTab.active > .g-card{
  background:transparent;
  background-image:none;
  border:none;
  box-shadow:none;
  padding:0;
  gap:6px;
}

/* 3. 一番上の日付エリア：中央はカードなしの文字＋下の極細横線、左は素の矢印、右は薄枠 */
:root:not([data-theme=mono]) #graphTab .month-nav{
  height:36px;
  gap:8px;
  padding-top:4px;
  align-items:center;
}
:root:not([data-theme=mono]) #graphTab .gday{
  height:34px;
  background:transparent;
  background-image:none;
  box-shadow:none;
  border:none;
  border-bottom:1px solid rgba(135,150,170,.35);
  border-radius:0;
  font-size:1.05rem;
  font-weight:700;
  color:#1e293b;
}
:root:not([data-theme=mono]) #graphTab .mnav{
  width:34px;
  height:34px;
  font-size:1.25rem;
  border-radius:8px;
}
:root:not([data-theme=mono]) #graphTab .mnav:not(:disabled){
  background:transparent;
  box-shadow:none;
  color:#1e293b;
}
:root:not([data-theme=mono]) #graphTab .mnav:disabled{
  opacity:.4;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:inset 1px 1px 2px rgba(135,150,170,.25);
}

/* 4. カードに「ぷっくりした膨らみ（微細グラデーション）」と「右下の濃い影」をつける */
:root:not([data-theme=mono]) #graphTab .g-avg,
:root:not([data-theme=mono]) #graphTab .g-pane:first-child{
  border-radius:14px;
  border:none;
  background:linear-gradient(145deg, #e7ecf3 0%, #dae1eb 100%);
  box-shadow:
    inset 1.5px 1.5px 2px rgba(255,255,255,.95),
    -3px -3px 7px rgba(255,255,255,.85),
    4px 5px 10px rgba(125,140,160,.52);
}
:root:not([data-theme=mono]) #graphTab .g-avg.am,
:root:not([data-theme=mono]) #graphTab .g-avg.pm{
  border-top:none;
}
:root:not([data-theme=mono]) #graphTab .g-avg .bp-high{
  color:#2c3540;
}
:root:not([data-theme=mono]) #graphTab .g-avg .bp-low{
  color:#b85252;
  font-size:2.15rem;
}

/* 5. 夜グラフ＋期間タブを1枚のカードとして繋げ、間に区切り線を入れる */
:root:not([data-theme=mono]) #graphTab .g-pane:nth-child(2){
  border-radius:14px 14px 0 0;
  border:none;
  background:linear-gradient(160deg, #e7ecf3 0%, #dfe5ee 100%);
  box-shadow:
    inset 1.5px 1.5px 2px rgba(255,255,255,.95),
    -3px -3px 7px rgba(255,255,255,.85),
    4px 0 10px rgba(125,140,160,.52);
}
:root:not([data-theme=mono]) #graphTab .g-foot{
  border-radius:0 0 14px 14px;
  border-top:1px solid rgba(135,150,170,.28);
  background:linear-gradient(160deg, #dfe5ee 0%, #d8e0ea 100%);
  margin-top:0;
  padding:8px 12px 10px;
  box-shadow:
    -3px 3px 7px rgba(255,255,255,.65),
    4px 5px 10px rgba(125,140,160,.52);
}

/* 6. 期間タブ（7日/前半/後半/30日）：明るい細枠トレイの中にスライド式タブが収まる形 */
:root:not([data-theme=mono]) #graphTab .g-pager{
  display:flex;
  align-items:center;
  width:100%;
  height:36px;
  padding:3px;
  gap:2px;
  border-radius:12px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 1px 1px 2px rgba(135,150,170,.22);
}
:root:not([data-theme=mono]) #graphTab .g-pager button{
  flex:1;
  height:100%;
  margin:0;
  padding:0;
  border:none;
  border-radius:9px;
  background:transparent;
  color:#526071;
  font-size:.82rem;
  font-weight:600;
}
:root:not([data-theme=mono]) #graphTab .g-pager button.on{
  background:linear-gradient(145deg, #eef3f8 0%, #e1e7f0 100%);
  color:#1e293b;
  font-weight:700;
  box-shadow:
    inset 1px 1px 1px rgba(255,255,255,1),
    2px 2px 5px rgba(125,140,160,.4);
}

/* 7. ボトムタブバーの上端に「1本の細い溝線」を入れ、選択枠は消す */
:root:not([data-theme=mono]) .tab-bar{
  border-top:1px solid rgba(135,150,170,.35);
  box-shadow:0 -1px 0 rgba(255,255,255,.7);
}
:root:not([data-theme=mono]) .tab-btn.active{
  background:transparent;
  box-shadow:none;
}