/* 「推移グラフ」画面 */
.chart-container{width:100%;height:262px;position:relative}
.chart-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;font-size:1rem;margin-bottom:8px}
.legend-item{display:flex;align-items:center;gap:4px}
.legend-color{width:14px;height:14px;border-radius:3px}
#graphTab.active{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:520px}
#graphTab>*{flex:none}
.g-title{margin:0;font-size:1.5rem;font-weight:bold}
#graphTab .chart-legend{margin:0;font-size:.95rem}
.g-seg{display:flex;gap:4px;padding:4px;background:var(--pill-bg);border:1px solid var(--border);border-radius:14px}
.g-seg button{flex:1;padding:10px 0;border:0;border-radius:11px;background:transparent;color:var(--sub);font-size:.88rem;font-weight:bold;cursor:pointer}
.g-seg button.on{background:var(--primary);color:var(--on-primary)}
.g-card{flex:1 1 auto!important;min-height:0;display:flex;flex-direction:column;margin:0;padding:10px 10px 8px}
.g-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--sub);padding:0 4px}
.g-head b{font-size:.95rem;color:var(--text)}
.g-tip{height:68px;margin:6px 0 4px;padding:6px 10px;box-sizing:border-box;border-radius:10px;background:var(--pill-bg);font-size:.8rem;line-height:1.35;overflow:hidden}
.g-hint{height:100%;display:flex;align-items:center;justify-content:center;color:var(--sub)}
.g-tip-h{color:var(--sub)}
.g-tip-h b{color:var(--text);font-size:.9rem}
.g-tip-g{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
.g-tip-g i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px}
.g-tip-g i.sq{border-radius:2px}
.g-tip-g b{font-size:.9rem}
#graphTab .chart-container{flex:1 1 auto;min-height:0;height:auto}
#chartContainer 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;gap:14px;margin-top:4px;min-height:30px;padding:0 4px;font-size:.78rem;color:var(--sub)}
.g-foot i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;box-sizing:border-box;background:var(--text)}
.g-foot i.h{background:transparent;border:2px solid var(--text)}
#gSel{margin-left:auto;display:flex;align-items:center;gap:8px}
#gSel button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:var(--pill-bg);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer}
#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 14px}
.g-avg small{font-size:.8rem;color:var(--sub)}
.g-avg b{font-size:1.7rem}
.g-avg span{font-size:1rem;color:var(--sub)}
.gday{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}
#gDayNav .mnav:disabled{opacity:.3;cursor:default}