/* 共通：画面全体・タブ・ボタン・入力欄など */
html{
  background:var(--bg);
  touch-action:pan-x pan-y;
  overscroll-behavior:none;
  height:100%;
}
body{
  touch-action:pan-x pan-y;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--text);
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  min-height:100%;
  min-height:100dvh;
}
body::before{
  content:"";
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  z-index:-1;
  background:var(--page-bg);
  pointer-events:none;
}
.tab-bar{
  display:flex;
  background:color-mix(in srgb, var(--tab-bg) 82%, transparent);
  border-top:1px solid var(--border);
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:100;
  padding-bottom:env(safe-area-inset-bottom);
  /* iOS風のすりガラス（対応端末のみ。非対応はほぼ不透明のまま） */
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
}
@supports not (background:color-mix(in srgb, white 50%, transparent)){
  .tab-bar{background:var(--tab-bg)}
}
.tab-btn{
  flex:1;
  padding:8px 0 6px;
  text-align:center;
  background:none;
  border:none;
  font-size:.78rem;
  font-weight:bold;
  color:var(--sub);
  cursor:pointer;
  transition:opacity .12s ease, color .12s ease;
}
.tab-btn:active{opacity:.55}
.tab-btn svg{
  display:block;
  width:26px;height:26px;
  margin:0 auto 3px;
  fill:currentColor;
}
.tab-btn.active{color:var(--primary)}
.container{
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(64px + env(safe-area-inset-bottom));
  max-width:640px;
  margin:0 auto;
}
.tab-content{display:none}
.tab-content.active{display:block}
.card{
  background:var(--card-bg);
  border-radius:16px;
  border:1px solid var(--border);
  padding:16px;
  margin-bottom:16px;
  box-shadow:0 2px 8px rgba(30,60,120,.05);
}
.card-title{font-weight:bold;font-size:1.1rem;margin-bottom:12px}
label{font-size:.95rem;color:var(--sub);display:block;margin-top:10px}
input,textarea{
  width:100%;
  padding:12px;
  margin-top:4px;
  border:1px solid var(--input-border);
  border-radius:8px;
  box-sizing:border-box;
  font-size:1.1rem;
  font-family:inherit;
  background:var(--input-bg);
  color:var(--text);
}
::placeholder{color:var(--sub);opacity:1}
input[type=date],input[type=month]{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  min-height:48px;
  background:var(--date-bg);
  color:var(--text);
  text-align:center;
}
input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value{
  text-align:center;
  min-height:1.2em;
}
.row{display:flex;gap:8px}
.row>div{flex:1}
.btn{
  width:100%;
  background:var(--tint);
  color:var(--btn-text);
  border:none;
  padding:14px;
  border-radius:14px;
  font-size:1.05rem;
  font-weight:bold;
  margin-top:20px;
  cursor:pointer;
  transition:opacity .12s ease, transform .12s ease;
  -webkit-touch-callout:none;
}
.btn:active{opacity:.75;transform:scale(.985)}
.btn-sub{
  background:var(--card-bg);
  border:1px solid var(--input-border);
  color:var(--btn-text);
  margin-top:10px;
}
.btn-danger{background:#ff3b30;color:#fff;border:none;margin-top:10px}
.status-msg{margin-top:10px;text-align:center;font-weight:bold;color:#34c759;min-height:24px}
.seg{display:flex;gap:8px}
.seg button{
  flex:1;
  padding:12px 4px;
  border-radius:12px;
  border:none;
  background:var(--tint);
  color:var(--btn-text);
  font-size:1rem;
  font-weight:bold;
  cursor:pointer;
  transition:opacity .12s ease, background .12s ease;
}
.seg button:active{opacity:.75}
.seg button.on{background:var(--primary);color:var(--on-primary)}
.note{font-size:.9rem;color:var(--sub);margin:6px 0 0}
.bp-high{color:var(--high);font-weight:bold}
.bp-low{color:var(--low);font-weight:bold}
.sat-color{color:var(--sat)}
.sun-color{color:var(--sun)}
.month-nav{display:flex;gap:8px;align-items:center}
.month-nav input{margin-top:0;flex:1;min-width:0}
.mnav{
  flex:none;
  width:52px;height:48px;
  border:1px solid var(--input-border);
  border-radius:8px;
  background:var(--input-bg);
  color:var(--text);
  font-size:1.7rem;
  font-weight:bold;
  padding:0;
  cursor:pointer;
  transition:opacity .12s ease;
}
.mnav:active{opacity:.65}
.cell{
  background:var(--card-bg);
  border:1px solid var(--input-border);
  border-radius:14px;
  padding:6px 4px 2px;
  text-align:center;
}
.cell:focus-within{border-color:var(--primary)}
.cell span{display:block;font-size:.75rem;color:var(--sub)}
.cell input{
  border:none;
  background:transparent;
  text-align:center;
  font-size:1.6rem;
  font-weight:bold;
  padding:0;margin:0;
  height:36px;
  border-radius:0;
}
.cell input:focus{outline:none}

/* ===== 設定の並び替え（ドラッグ&ドロップ）。動きは js/settings-order.js ===== */
.set-drag{
  float:right;
  width:36px;height:36px;
  margin:-8px -8px 0 0;
  border:none;
  border-radius:10px;
  background:transparent;
  color:var(--sub);
  font-size:1.2rem;
  line-height:1;
  cursor:grab;
  touch-action:none;   /* ☰を触っている間は画面がスクロールしない */
  -webkit-user-select:none;user-select:none;
}
.set-drag:active{background:var(--tint);opacity:.8}
.set-dragging{
  position:relative;
  z-index:50;
  opacity:.94;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transition:none;
}

/* ===== 「進む」ボタン（›）：記録入力・推移グラフ・レポートで表示。今日／当月のときは薄くして押せない ===== */
.mnav:disabled{opacity:.3;cursor:default}

/* ===== 文字の大きさ「大」（設定の「表示」）。rem の大きさをまとめて1.2倍にする。印刷プレビューは標準のまま。動きは js/theme.js ===== */
html[data-fs="l"]{font-size:120%}
html[data-fs="l"] .cell input{height:44px}
html[data-fs="l"] .mrow .cell input{height:38px}
html[data-fs="l"] .container{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
html[data-fs="l"] #graphTab.active{height:calc(100vh - 102px - env(safe-area-inset-top) - env(safe-area-inset-bottom));height:calc(100dvh - 102px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@media screen{html[data-fs="l"] #rp-print-pages{zoom:.8334}}