/* 「推移グラフ」画面 */
.chart-container{width:100%;height:262px;position:relative}
#graphTab.active{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - 88px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:520px}
#graphTab>*{flex:none}
.g-card{flex:1 1 auto!important;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}
.g-avg.am{border-top:3px solid var(--c1)}
.g-avg.pm{border-top:3px solid var(--c3)}
.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;min-width:0;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid var(--input-border);border-radius:8px;background:var(--date-bg);color:var(--text);font-size:1.1rem}
.gday input[type=date]{position:absolute;left:0;top:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0}
.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);color:var(--on-primary)}
/* 7日（日付）と30日（月）で、上の段の高さを同じにして、7日のときだけ下がらないようにする */
#gDayNav,#gMonthNav,#gSelNav{height:48px}
#gMonthNav input{height:48px}
/* 数字が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}