/* ===== 「隠す」の指定を、いちばん強くする ===== */
/* hidden（隠す）をつけた部品は、ほかの見た目の指定があっても必ず隠します */
[hidden]{display:none!important}

/* ===== 色と文字（試作と同じものを使う） ===== */
:root{
  --bg:#eef1ec; --surface:#ffffff; --ink:#18221b; --muted:#5d6b61; --line:#d3dacf;
  --turf:#1f5a3a; --turf-ink:#ffffff;
  --fw:#cfe3c9; --rough:#9cc092; --green:#b7dba8; --ob:#d94848; --left:#2f7fc1; --right:#e08a1e;
  --display:"Barlow Condensed","Zen Kaku Gothic New",system-ui,sans-serif;
  --body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --tabbar-h:64px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#101612; --surface:#18211b; --ink:#e6ece6; --muted:#9aa89e; --line:#2b3830;
  --turf:#3f9a68; --turf-ink:#0c140f;
  --fw:#2c4a33; --rough:#1d3324; --green:#355c3d; --ob:#ff6b6b; --left:#5aa9e6; --right:#f0a64a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#101612; --surface:#18211b; --ink:#e6ece6; --muted:#9aa89e; --line:#2b3830;
  --turf:#3f9a68; --turf-ink:#0c140f;
  --fw:#2c4a33; --rough:#1d3324; --green:#355c3d; --ob:#ff6b6b; --left:#5aa9e6; --right:#f0a64a; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;
  /* 下のメニューに隠れないよう、下に余白をとる */
  padding:max(20px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
          calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px) + 24px) max(16px,env(safe-area-inset-left,0px));
}
/* スマホで上にスクロールしたとき、時計などの下に文字が透けないようにする */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
main{max-width:1180px;margin:0 auto}
.screen{display:flex;flex-direction:column;gap:14px}
.screen[hidden]{display:none}
.screen[data-screen="record"],.screen[data-screen="analysis"]{max-width:880px;margin:0 auto}
h1{font-family:var(--display);font-weight:700;font-size:2.1rem;margin:0;line-height:1.1}
h1 small{display:block;font-family:var(--body);font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:.08em}
.note{font-size:.9rem;color:var(--muted);margin:0}

/* ===== 画面の下のメニュー ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(3,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--surface);border-top:1px solid var(--line);
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:700;
}
.tabbar svg{width:24px;height:24px}
.tabbar a[aria-current="page"]{color:var(--turf)}
.tabbar a:focus-visible{outline:2px solid var(--turf);outline-offset:-4px}