/* 離乳食きろく（/tracker）の通常表示。色と角の丸みは style.css の変数を使う（ダーク表示も同じ変数で切り替わる）。
   スマホの縦向きが基準。押す所は高さ44px以上、入力欄の文字は16px以上にする（iPhoneは16pxより小さい入力欄に触れると画面を拡大する）。 */
[hidden]{display:none!important}

.tk h1{font-size:24px;margin:2px 0 16px}
.tk h1:focus{outline:none}
.tk h2{font-size:15px;line-height:1.6;margin:0 0 6px;padding:0;border:0;color:var(--text2);letter-spacing:.04em}
.tk-back{display:inline-flex;align-items:center;min-height:44px;padding-right:12px;font-size:15px;font-weight:700;text-decoration:none;color:var(--accent-deep)}
.tk-back::before{content:"‹";font-size:22px;line-height:1;margin-right:6px}
.tk-status{margin:0 0 16px;padding:10px 14px;border-radius:10px;background:var(--green-soft);border:1px solid var(--green);font-size:15px;line-height:1.7}
.tk-status.is-error{background:var(--amber-soft);border-color:var(--warn)}

/* お知らせの欄。押すと、確認待ちの記録の編集画面を開く */
.tk-notice{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;margin:0 0 18px;padding:10px 14px;border:1px solid var(--amber);border-radius:var(--radius);background:var(--amber-soft);color:var(--text);font-size:15.5px;font-weight:700;line-height:1.6;text-decoration:none}
.tk-notice::after{content:"›";flex:none;font-size:20px;font-weight:400;color:var(--text2)}
.tk-notice:hover{color:var(--text)}
.tk-dev{font-size:14px;line-height:1.8;margin:16px 0 8px}

/* 食材の一覧（ホームと、記録する食材を選ぶ画面） */
.tk-cat{margin:0 0 22px}
main .tk-foods{list-style:none;margin:0;padding:0;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);overflow:hidden}
main .tk-foods li{margin:0;border-top:1px solid var(--line)}
main .tk-foods li:first-child{border-top:0}
.tk-food{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 14px;color:var(--text);text-decoration:none;line-height:1.5}
.tk-food:hover{background:var(--surface2);color:var(--text)}
.tk-food-name{min-width:0;overflow-wrap:anywhere}

/* バッジ。色だけで区別せず、文字を必ず出す。文字の色は本文と同じにして、背景と枠で種類を分ける */
.tk-badge{flex:none;font-size:13px;line-height:1.4;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--text);white-space:nowrap}
.tk-badge-none{color:var(--text2)}
.tk-badge-before{background:var(--surface2)}
.tk-badge-tried{background:var(--green-soft);border-color:var(--green)}
.tk-badge-pending{border-color:var(--amber);border-style:dashed}
.tk-badge-reaction{background:var(--amber-soft);border-color:var(--amber);font-weight:700}

/* ボタン */
.tk-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;padding:12px 18px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--bg);font:inherit;font-size:17px;font-weight:700;line-height:1.5;text-align:center;text-decoration:none;cursor:pointer}
.tk-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--bg)}
.tk-btn-sub{background:var(--surface);color:var(--accent-deep)}
.tk-btn-sub:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-deep)}

/* 画面の下に固定する「＋記録する」。フッターがボタンの下に隠れないように、body の下に余白を足す */
.tk-fab{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
.tk-fab .tk-btn{max-width:calc(var(--measure) - 40px);margin:0 auto}
body.tk-has-fab{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}

/* 記録入力 */
.tk-form fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}
.tk-field{margin:0 0 26px}
.tk-form legend,.tk-label{display:block;padding:0;margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.6}
.tk-hint{margin:0 0 10px;font-size:14px;line-height:1.75;color:var(--text2)}
.tk input[type="date"],.tk input[type="text"],.tk-form textarea{display:block;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.6}
.tk-form textarea{min-height:6.4em;resize:vertical}
.tk-count{margin:6px 0 0;font-size:13px;color:var(--text2);text-align:right}
.tk-count.is-over{color:var(--warn);font-weight:700}
.tk-err{margin:8px 0 0;font-size:14.5px;font-weight:700;line-height:1.7;color:var(--warn)}
.tk-err:empty{display:none}

.tk-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tk-choices-2{grid-template-columns:repeat(2,1fr)}
.tk-chip{position:relative;display:block}
.tk-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tk-chip span{display:flex;align-items:center;justify-content:center;min-height:50px;padding:8px 6px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);font-size:16px;line-height:1.4;text-align:center;word-break:auto-phrase;text-wrap:balance}
.tk-chip input:checked + span{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);font-weight:700}
.tk-chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.tk-checks{border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.tk-check{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 14px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;cursor:pointer}
.tk-check:first-child{border-top:0}
.tk-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent)}
.tk-check-single{border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);margin:0 0 26px}

/* 受診の目安。入力の内容に関係なく、いつも同じ文を出す */
.tk-guide{margin:0 0 26px;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface2);font-size:15px;line-height:1.75}
.tk-guide h2{color:var(--text);font-size:16px;margin:0 0 8px;letter-spacing:0}
.tk-guide dl{margin:0}
.tk-guide dt{font-weight:700}
.tk-guide dd{margin:0 0 10px}
.tk-guide dd:last-child{margin-bottom:0}

/* 食材の履歴 */
.tk-food-head{display:flex;align-items:center;gap:10px;margin:0 0 16px}
main .tk-logs{list-style:none;margin:22px 0 0;padding:0}
main .tk-logs li{margin:0 0 12px}
.tk-log{padding:14px 16px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface)}
.tk-log-date{margin:0 0 6px;font-weight:700}
.tk-log dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0;font-size:15px;line-height:1.75}
.tk-log dt{color:var(--text2);white-space:nowrap}
.tk-log dd{margin:0;min-width:0;overflow-wrap:anywhere}
.tk-empty{margin:22px 0 0;color:var(--text2)}
.tk-log-age{margin-left:2px;font-weight:400;color:var(--text2)}
.tk-log-actions{display:flex;gap:10px;margin:12px 0 0}
.tk-btn-small{width:auto;min-height:44px;padding:6px 20px;font-size:15px}
.tk-article{margin:14px 0 0}

/* 何が消えるかを書いた確認（記録の削除、反応を「あり」からほかの選択肢に変える保存）。body の直下に出す */
.tk-dialog{width:calc(100% - 40px);max-width:22em;padding:20px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:16px;line-height:1.8}
.tk-dialog::backdrop{background:rgba(30,22,15,.5)}
.tk-dialog p{margin:0 0 16px}
.tk-dialog .tk-dialog-title{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.6}
.tk-dialog-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-dialog .tk-btn{min-height:48px;padding:8px 10px;font-size:16px}

/* 一覧の末尾に置くボタン（一覧にない食材を追加、すでに食べている食材をまとめて登録）と、追加した食材の名前の変更・削除 */
.tk-more{display:grid;gap:10px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
.tk-more .tk-hint{margin:0}
/* まとめ登録の画面の、チェックの付いた食材の一覧 */
.tk-foods .tk-check{min-height:52px;border-top:0}
.tk-eaten-note{margin:0 0 18px;font-size:15px}
.tk-eaten-row{margin:16px 0 0}
/* 確認の中の入力欄（確認は body の直下に出るので、.tk の中の決まりが当たらない） */
.tk-dialog input[type="text"],.tk-dialog input[type="date"],.tk-dialog select{display:block;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.6}
.tk-dialog .tk-label{margin:12px 0 6px;font-size:15px}
.tk-dialog p.tk-hint{margin:6px 0 0;font-size:14px}
.tk-dialog p.tk-err{margin:12px 0 0}
.tk-dialog form > .tk-dialog-btns{margin-top:18px}

/* ホームの題名の右に置く「設定」 */
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px}
.tk .tk-head h1{margin:0}
.tk-tool{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);font-size:15px;font-weight:700;color:var(--accent-deep);text-decoration:none}
.tk-tool:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}

/* 子供の切り替え（子供が2人以上いる時だけ出す）。選んでいる子供は、色のほかに、太字と二重の枠で見分けられるようにする */
.tk-kids{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.tk-kid{flex:1 1 auto;min-width:88px;max-width:100%;min-height:46px;padding:8px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:16px;line-height:1.4;overflow-wrap:anywhere;cursor:pointer}
.tk-kid[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent);font-weight:700}
.tk-sec .tk-kids{margin-bottom:12px}
/* ホーム以外の画面の題名の上に出す、どの子供の記録かの表示 */
.tk-who{margin:0;font-size:14px;font-weight:700;line-height:1.6;color:var(--accent-deep);overflow-wrap:anywhere}
.tk-notice-who{display:block;font-size:13px;font-weight:400;color:var(--text2)}

/* 書き出しを促すお知らせ */
.tk-notice-box,.tk-eaten-guide{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface2);font-size:15px;line-height:1.75}
.tk-notice-box p,.tk-eaten-guide p{margin:0 0 10px}
.tk-eaten-guide .tk-btn{min-height:46px;padding:8px 10px;font-size:15.5px}
.tk-notice-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-notice-btns .tk-btn{min-height:46px;padding:8px 10px;font-size:15.5px}

/* 設定パネル。ホームの上に重ねて出す。スマホでは画面いっぱい、広い画面では中央の列にする */
body.tk-sheet-open{overflow:hidden}
.tk-sheet-wrap{position:fixed;inset:0;z-index:30;overflow-y:auto;-webkit-overflow-scrolling:touch;background:rgba(30,22,15,.5)}
.tk-sheet{width:100%;max-width:calc(var(--measure) + 40px);min-height:100%;margin:0 auto;padding:8px 20px calc(48px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.tk .tk-sheet-title{margin:2px 0 18px;padding:0;border:0;font-size:24px;line-height:1.55;letter-spacing:.01em;color:var(--text)}
.tk-sheet-title:focus{outline:none}
.tk-sec{margin:0 0 20px;padding:16px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface)}
.tk-sec h3{margin:0 0 8px;font-size:17px;line-height:1.6}
.tk-sec p{margin:0 0 10px;font-size:15px;line-height:1.8}
.tk-sec > :last-child{margin-bottom:0}
.tk-sec .tk-hint{font-size:14px;line-height:1.75}
.tk-sec .tk-sec-gap{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.tk-sec .tk-label{margin:14px 0 6px;font-size:15px}
.tk-sec .tk-btn{margin:8px 0 0}
.tk-sec p.tk-err{margin:10px 0 0}
.tk-sec p.tk-msg,.tk-msg{margin:10px 0 0;padding:8px 12px;border:1px solid var(--green);border-radius:10px;background:var(--green-soft);font-size:14.5px;line-height:1.7}
.tk-sec p.tk-msg:empty,.tk-msg:empty{display:none}
.tk-btn-danger{border-color:var(--warn);background:var(--surface);color:var(--warn)}
.tk-btn-danger:hover{border-color:var(--warn);background:var(--amber-soft);color:var(--warn)}
/* ファイルを選ぶ欄は見せず、すぐ後ろのラベルをボタンの形にして押してもらう */
.tk-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.tk-file:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}

.tk-foot{margin:36px 0 0;font-size:14px;line-height:1.85;color:var(--text2)}
.tk-foot p{margin:0 0 6px}

/* アプリへ戻るリンク（assets/style.css の .app-back）は、離乳食きろくのページ自身には出さない */
.site-header .app-back{display:none}

/* 保存場所の案内（仕様書の実装手順の9。2026-10-14） */
.tk-add-guide{margin:0 0 18px;padding:16px;border:2px solid var(--amber);border-radius:var(--radius);background:var(--amber-soft);font-size:15.5px;line-height:1.8}
.tk-add-guide p{margin:0 0 10px}
.tk-add-guide .tk-add-title{font-size:17px;font-weight:700;line-height:1.6}
p.tk-add-sub{margin:14px 0 4px;font-weight:700}
.tk-steps{margin:0 0 10px;padding-left:1.4em}
.tk-steps li{margin:0 0 6px}
.tk-add-guide .tk-btn{margin-top:6px}
button.tk-notice{width:100%;font-family:inherit;text-align:left;cursor:pointer}
.tk-inapp .tk-btn{min-height:46px}
.tk-dialog .tk-steps{margin-bottom:12px;font-size:15px;line-height:1.75}
.tk-dialog-btns.is-one{grid-template-columns:1fr}
.tk-sec .tk-steps{font-size:15px;line-height:1.8}

/* 使い方の説明文（仕様書の実装手順の10。2026-10-14）。食材の一覧（ホーム）の時だけ見せる */
.tk-about{margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.85}
.tk-about h2{margin:26px 0 10px;font-size:18px;line-height:1.6}
.tk-about h2:first-child{margin-top:0}
.tk-about[hidden],main .share[hidden]{display:none}

/* AndroidのChromeで出す、ホーム画面への追加を勧める案内（2026-10-14）。iPhoneの案内より控えめにする */
.tk-android-guide{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--surface2);font-size:15px;line-height:1.8}
.tk-android-guide p{margin:0 0 10px}
.tk-android-guide .tk-add-title{font-size:16px;font-weight:700;line-height:1.6}
.tk-android-guide .tk-btn{min-height:46px;padding:8px 10px;font-size:15.5px}
.tk-add-title{text-wrap:balance}