/* Yummeee v2 — 1b「計器盤」案のデザイントークン
   正本: New UI/README.md §Design Tokens ／ 決定: UI刷新v2_決定事項.md
   ★Webフォントは読み込まない（決定18）。font-family の指定だけで、
     Android=Noto Sans JP / iOS=ヒラギノ にフォールバックさせる。 */

:root{
  /* 面 */
  --bg:#f2f4f2; --card:#fff; --line:rgba(0,0,0,.07); --hair:rgba(0,0,0,.05);
  /* 緑 */
  --pri:#0b8a5c; --pri-soft:#e6f4ee; --pale:#bfe6d3; --pale2:#d9f0e4;
  /* リンク文字は本文より濃い緑にする＝押せる場所が色で分かる（2026-07-25 ユーザー決定） */
  --link:#065f40;
  /* 食事区分（★夕は設計資料に定義が無く暫定。デザイナー確認後に差し替える） */
  --m-breakfast:#8ed9b3; --m-lunch:#0b8a5c; --m-dinner:#076b47; --m-snack:#3d9be9;
  --m-none:#c9cec9;
  /* 警告 */
  --warn:#e79a2b; --warn-strong:#d3820f; --warn-face:#fdf3e3; --warn-face2:#fdf6e9; --warn-fg:#a2681a;
  /* 学習バッジ */
  --learn-face:#eef2fb; --learn-fg:#3d6db3;
  /* 文字 */
  --t1:#1f2421; --t2:#4d564f; --t3:#6b7671; --t4:#8a938e; --t5:#a0a8a3;
  /* バー */
  --track:#eef0ec; --track-none:#e4e6e1; --track-none2:#dfe2de;
  --head:#f7f8f7; --seg:#e8eae7;
  --font:'Noto Sans JP','Hiragino Kaku Gothic ProN',system-ui,sans-serif;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);
  font-weight:400;font-size:13.5px;line-height:1.6;-webkit-text-size-adjust:100%}
button{font-family:var(--font);cursor:pointer}
a{color:var(--link)}

/* レイアウト */
.wrap{max-width:390px;margin:0 auto;padding:16px 16px 28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.card+.card,.mt{margin-top:10px}
.row{display:flex;align-items:center}
.between{display:flex;justify-content:space-between}
.grow{flex:1}

/* タイポ */
.h-screen{font:700 19px/1.4 var(--font)}
.h-card{font:700 13px/1 var(--font)}
.h-card-s{font:700 12.5px/1 var(--font)}
.num{font:700 32px/1.2 var(--font);letter-spacing:-.02em}
.kpi{font:700 19px/1.2 var(--font)}
.lab{font:500 13.5px/1 var(--font)}
.body{font:400 12.5px/1.75 var(--font)}
.note{font:400 12px/1.8 var(--font);color:var(--t4)}
.mini{font:400 11.5px/1.7 var(--font);color:var(--t3)}
.t2{color:var(--t2)}.t3{color:var(--t3)}.t4{color:var(--t4)}.t5{color:var(--t5)}
.pri{color:var(--pri)}

/* バー（100%位置に刻み線） */
.bar{position:relative;height:7px;border-radius:4px;background:var(--track)}
.bar>i{display:block;height:7px;border-radius:4px;background:var(--pri)}
.bar::after{content:"";position:absolute;left:100%;top:-3px;bottom:-3px;width:1.5px;background:rgba(0,0,0,.25)}
.bar.no-tick::after{display:none}

/* 積み木（縦バー）。★マス目の間隔は常に一定（gap 4px）にし、
   目標線は「マス目とマス目のあいだ」に重ねる＝線が間隔を広げない */
.stack{width:104px;flex:none;padding-top:10px}
.stack .blocks{position:relative;display:flex;flex-direction:column;gap:4px}
.stack .blocks>div:not(.baseline){height:11px;border-radius:6px;background:var(--track)}
.stack .baseline{position:absolute;left:0;right:0;height:0;display:flex;align-items:center;pointer-events:none}
.stack .baseline>i{flex:1;border-top:1.5px dashed var(--t5)}
.stack .baseline>span{font:400 11px/1 var(--font);color:var(--t2);font-weight:500;
  background:var(--card);padding:0 3px;margin-left:2px}

/* 内訳バー（横） */
.split{position:relative;height:26px;border-radius:6px;background:var(--track);overflow:hidden}
.split .seg{display:flex;align-items:center;justify-content:center;
  font:500 11px/1 var(--font);color:#fff;white-space:nowrap;overflow:hidden}
.split .now{position:absolute;top:0;bottom:0;width:2px;background:var(--t1)}

/* ボタン */
.btn{width:100%;padding:15px;background:var(--pri);border:0;border-radius:11px;
  font:700 15px var(--font);color:#fff}
.btn-sub{padding:12px;background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:10px;
  font:500 12.5px var(--font);color:var(--t1)}
.btn-toggle{width:100%;margin-top:12px;padding:10px;background:var(--head);
  border:1px solid rgba(0,0,0,.06);border-radius:9px;font:500 12px var(--font);color:var(--link)}
.btn-link{background:none;border:0;padding:0;font:500 11.5px var(--font);color:var(--link);
  text-decoration:underline}
/* ★処理中は押せないことを見た目でも伝える（同じ内容を二度送ってしまうため） */
.btn:disabled,.btn-sub:disabled,.chip:disabled{opacity:.55}

/* 出どころバッジ */
.badge{display:inline-block;padding:2px 7px;border-radius:5px;font:500 11px/1.5 var(--font);
  background:var(--pri-soft);color:var(--pri);white-space:nowrap}
.badge.learn{background:var(--learn-face);color:var(--learn-fg)}
.badge.ai{background:#ededea;color:#7b8480}
.badge.none{background:var(--warn-face);color:var(--warn-fg)}   /* 分析できませんでした */

/* ヒートマップ */
.heat{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.heat .name{width:58px;font:400 11px/1 var(--font);color:var(--t2)}
.heat .cell{flex:1;height:22px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font:500 10.5px var(--font)}

/* 凡例の色丸。★:style と静的 style を併用すると寸法が消えるのでクラスで持つ */
.dot{width:11px;height:11px;border-radius:6px;flex:none;display:inline-block}

/* 上部タブ（9画面へ一発で飛ぶ。横スクロール・現在地は緑ベタ） */
.tabs{display:flex;align-items:center;gap:4px;overflow-x:auto;margin:0 -16px 12px;padding:0 16px 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
/* ★文字サイズ(12.5px)は変えずに、余白と高さだけ詰めて全体を小さくする
   （2026-07-25 ユーザー指示）。タップ領域は狭くなるが、指示どおり優先する */
.tabs a{flex:none;display:flex;align-items:center;min-height:28px;padding:0 7px;
  border:1px solid var(--line);background:#fff;border-radius:7px;
  font:500 12.5px var(--font);color:var(--t2);text-decoration:none;white-space:nowrap}
/* ホームだけは元の大きさのまま残し、色を変えて目立たせる（起点の画面なので） */
.tabs a[href="/v2"]{min-height:40px;padding:0 14px;border-radius:10px;font-weight:700;
  background:var(--pri-soft);border-color:var(--pale);color:var(--pri)}
.tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}

/* 下部ナビは廃止（2026-07-25 ユーザー決定）。画面移動も記録への導線も上部タブが担う */

/* カードまるごとがリンクのとき（食事カード・体重の導線）は本文色を保ちつつ
   見出しと ›  だけ濃い緑にする＝押せることが色で分かる */
a.card .h-card-s,a.card .h-card,a.card .lab{color:var(--link)}
a.card .chev,a .chev{color:var(--link);font-weight:700}
a .lnk{color:var(--link)}

[x-cloak]{display:none!important}