/* ui.css ── 現場ノート 見た目の共通部品
 * 設計書「★設計書_現場ノート_全体.md」§0-7・§10。見た目の正は _プロト/デモ_社外向け.html。
 * 新しくデザインし直さない。ここは色・ボタン・タブ・カードの共通部品だけを置く。
 * ★管理者アプリでもそのまま使い回すので、home 画面など個別画面に依存する形にしない。
 * テーマ切替はしない（§12：屋外での見え方を固定する）＝固定パレット。外部CDN・Web Fontは使わない。
 */

/* ===== 確定パレット（テーマ非依存・製品の見た目。デモの --ap-* と同値） ===== */
:root{
  --ap-bg:#F0F2EE;
  --ap-surface:#FFFFFF;
  --ap-ink:#131D19;
  --ap-ink-2:#3B4A44;
  --ap-muted:#6C7B74;
  --ap-line:#DFE4E0;
  --ap-brand:#1F3A33;
  --ap-brand-sub:#A9C0B7;
  --ap-safety:#F5C518;
  --ap-safety-d:#D9AC0C;
  --ap-alert:#C4451D;
  --ap-ok:#237A57;
  --ap-chalk:#F4F7F3;

  --sans:"Yu Gothic UI","Yu Gothic",YuGothic,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--ap-bg);
  color:var(--ap-ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
  /* ページ自体は動かさない（スクロールするのは .body だけ）。
     引っぱって更新・全体のバウンドを止める。 */
  overscroll-behavior:none;
  overflow:hidden;
}

/* ===== アプリの器（フル画面・下タブ固定） ===== */
.app-root{
  height:100vh;         /* dvh 非対応の古いブラウザ用フォールバック（無いと高さが中身分に縮む） */
  height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:520px;      /* PCでも幅を広げすぎない */
  margin:0 auto;
  background:var(--ap-bg);
  overflow:hidden;
}
/* ★画面の入れもの（app.js が中身を差し替える箱）。
 * ここに flex:1 と min-height:0 が無いと、#screen が中身の高さのまま伸びてしまい、
 * .app-root の overflow:hidden で下が切り落とされる。すると
 *   「スクロールしても下のものが見えない」「スクロールしても元の位置に戻る」
 * という壊れ方をする（2026-08-11 実機で発生）。★この2行を消さないこと。 */
#screen{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.screen{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:var(--ap-bg);
}

/* 圏外の帯（オフライン起動）。電波が無いときだけ画面いちばん上に出す。
 * 安全色でひとめで分かるが、「保存はできます」で不安にさせない。 */
.offbar{
  flex:none;
  background:var(--ap-safety);
  color:var(--ap-ink);
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  padding:6px 12px;
}
/* 圏外バーが出ているときは、この帯が最上段＝ノッチ/時計の下に文字を逃がす */
.offbar:not([hidden]){
  padding-top:calc(env(safe-area-inset-top,0px) + 6px);
}

/* 画面上部のバー
 * ★上パディングに env(safe-area-inset-top) を足す。viewport-fit=cover ＋
 *   black-translucent でバーがステータスバー（時計・電波）の下まで広がるため、
 *   足さないとタイトルが時計に重なる。背景のダーク緑はそのまま上まで伸ばす。 */
.apbar{
  flex:none;
  background:var(--ap-brand);
  color:var(--ap-chalk);
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
}
/* 圏外バーが上に出ているときは、上余白はそちらが持つ＝apbar は通常の余白に戻す */
.offbar:not([hidden]) ~ #screen .apbar{
  padding-top:12px;
}
.apbar .ttl{font-size:17px;font-weight:700;letter-spacing:.04em;}
.apbar .sub{font-size:12px;color:var(--ap-brand-sub);margin-left:auto;font-family:var(--mono);}
.backbtn{
  background:none;border:none;color:var(--ap-chalk);
  font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;padding:6px 4px;
}
.backbtn:focus-visible{outline:2px solid var(--ap-safety);outline-offset:2px;}

/* 画面本体（ここだけ縦スクロール） */
.body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* 端まで来たときの跳ね返りを、ここで止める。
     外へ伝わるとページ全体が引っぱられ、指を離すと元の位置に戻ってしまう。 */
  overscroll-behavior:contain;
}
/* ★.body は縦のフレックスなので、中身が画面より多いと子が「縮む」。
 *   ふつうは中身ぶんの高さで下げ止まるが、子に overflow:hidden が付いていると
 *   その下げ止まりが無効になり、高さ2pxまで潰れて中身が消える（実機で発生）。
 *   .body の中身はスクロールで見せるものであって、縮めるものではない。だから一律で縮ませない。 */
.body > *{flex-shrink:0;}
.today{font-size:13px;color:var(--ap-muted);font-family:var(--mono);letter-spacing:.06em;}
.note{font-size:12.5px;color:var(--ap-muted);line-height:1.8;}

/* ===== 現場カード ===== */
.site{
  background:var(--ap-surface);
  border:1px solid var(--ap-line);
  border-radius:4px;
  border-left:6px solid var(--ap-brand);
  padding:16px 14px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.site .when{font-family:var(--mono);font-size:13px;color:var(--ap-brand);font-weight:700;letter-spacing:.04em;}
.site .name{font-size:21px;font-weight:700;line-height:1.35;letter-spacing:.02em;}
.site .addr{font-size:13.5px;color:var(--ap-muted);line-height:1.6;}

/* 丸ボタン3つ（地図・電話・図面など） */
/* 地図・電話・図面・その他 の4つ。「その他」の中に なおす／完工／消す を隠す。 */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:2px;}
.act{
  background:var(--ap-bg);border:1px solid var(--ap-line);border-radius:4px;
  min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:12.5px;font-weight:700;color:var(--ap-ink-2);cursor:pointer;font-family:inherit;text-decoration:none;
}
.act svg{width:22px;height:22px;stroke:var(--ap-brand);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.act:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}
.act[aria-disabled="true"]{opacity:.4;pointer-events:none;}
/* 「その他」を開いている間は、押している状態が見て分かるようにする */
.act[aria-expanded="true"]{background:var(--ap-brand);border-color:var(--ap-brand);color:var(--ap-chalk);}
.act[aria-expanded="true"] svg{stroke:var(--ap-chalk);}

/* ===== 「その他」のプルダウン（なおす・完工・消す） =====
 * ふだん使わない操作は表に出さない。誤って押される事故そのものを減らす。 */
.sitemenu{
  border-top:1px solid var(--ap-line);
  margin-top:2px;padding-top:10px;
  display:flex;flex-direction:column;gap:8px;
}
.sitemenu[hidden]{display:none;}
.sitemenu .row{
  display:flex;gap:10px;align-items:center;font-size:14px;
  width:100%;min-height:50px;padding:0 2px;
  background:none;border:none;
  font-family:inherit;color:var(--ap-ink);text-align:left;cursor:pointer;
}
.sitemenu .row + .row{border-top:1px solid var(--ap-line);}
.sitemenu .row .nm{font-weight:700;}
.sitemenu .row .chev{margin-left:auto;color:var(--ap-muted);font-size:18px;flex:none;}
.sitemenu button.row:focus-visible{outline:2px solid var(--ap-brand);outline-offset:-2px;}

/* ===== 大ボタン（主要ボタン高さ 74px：手袋で押せる §10） ===== */
.big{
  min-height:74px;border:none;border-radius:4px;
  background:var(--ap-safety);color:#1A1403;
  font-family:inherit;font-size:20px;font-weight:700;letter-spacing:.06em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  box-shadow:0 3px 0 var(--ap-safety-d);width:100%;
}
.big svg{width:26px;height:26px;stroke:#1A1403;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.big.sub{background:var(--ap-surface);color:var(--ap-ink);border:2px solid var(--ap-brand);box-shadow:0 3px 0 var(--ap-line);}
.big.sub svg{stroke:var(--ap-brand);}
.big:active{transform:translateY(2px);box-shadow:none;}
.big:focus-visible{outline:3px solid var(--ap-brand);outline-offset:2px;}

/* ===== 補助リスト（このあと／ほかの現場 など） ===== */
.later{
  background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:4px;
  padding:12px 14px;display:flex;flex-direction:column;gap:8px;
}
.later .h{font-size:12px;color:var(--ap-muted);letter-spacing:.08em;font-weight:700;}
.later .row{
  display:flex;gap:10px;align-items:center;font-size:14px;
  border-top:1px solid var(--ap-line);padding-top:8px;width:100%;
  background:none;border-left:none;border-right:none;border-bottom:none;
  font-family:inherit;color:var(--ap-ink);text-align:left;cursor:pointer;
}
.later .row:first-of-type{border-top:none;padding-top:0;}
.later .row b{font-family:var(--mono);color:var(--ap-muted);font-size:12.5px;flex:none;}
.later .row .nm{font-weight:700;}
.later .row .chev{margin-left:auto;color:var(--ap-muted);font-size:18px;flex:none;}
.later button.row:focus-visible{outline:2px solid var(--ap-brand);outline-offset:-2px;}
.later .row[aria-current="true"] .nm{color:var(--ap-brand);}

/* ===== 現場の行（.siteitem）=====
 * ★現場カード（.site）と同じ「左の緑の帯」を必ず付ける。
 *   どの画面に出てきても、この帯を見れば「これは現場だ」と分かるようにするため。
 *   帯の太さで格を分ける：現場カード 6px ＞ 現場の行 4px。
 *   全部おなじ白い角丸にすると、期間の切替と現場の区別がつかなくなる（実機で指摘あり）。 */
.later .row.siteitem{
  border:1px solid var(--ap-line);
  border-left:4px solid var(--ap-brand);
  border-radius:4px;
  background:var(--ap-bg);
  padding:10px 12px;
  min-height:58px;
  align-items:center;
}
/* 区切り線は帯が担うので、上罫線は使わない */
.later .row.siteitem:first-of-type{padding-top:10px;}
.later .row.siteitem .txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.later .row.siteitem .nm{font-size:15px;line-height:1.35;}
/* 住所・上位会社。これが1行あるだけで「現場の情報だ」と伝わる */
.later .row.siteitem .sub{
  font-size:11.5px;color:var(--ap-muted);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* いま選んでいる現場は、帯を太くして塗りも変える */
.later .row.siteitem[aria-current="true"]{
  border-left-width:6px;
  background:var(--ap-surface);
  box-shadow:inset 0 0 0 1px var(--ap-brand);
}
.later .row.siteitem[aria-current="true"] .chev{color:var(--ap-brand);}

/* 「＋現場をつくる」は現場ではなく操作。帯を付けず、破線で別物だと示す */
.later .row.addnew{
  border:1.5px dashed var(--ap-brand-sub);
  border-radius:4px;
  padding:12px;
  min-height:52px;
  justify-content:center;
  background:none;
}
.later .row.addnew .nm{color:var(--ap-brand);font-size:14px;}

/* ===== 空の画面（現場が1つも無いとき） ===== */
.empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:30px 22px;text-align:center;
}
.empty .lead{font-size:19px;font-weight:700;line-height:1.6;}
.empty .sub{font-size:14px;color:var(--ap-muted);line-height:1.8;max-width:26em;}
.empty .big{max-width:320px;}

/* ===== フォーム（現場をつくる など） ===== */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;font-weight:700;color:var(--ap-muted);letter-spacing:.04em;}
.field label .req{color:var(--ap-alert);margin-left:4px;font-size:12px;}
.field input{
  font-family:inherit;font-size:17px;color:var(--ap-ink);
  background:var(--ap-surface);border:2px solid var(--ap-line);border-radius:4px;
  padding:12px 12px;min-height:52px;
}
.field input:focus{outline:none;border-color:var(--ap-brand);}
.field.err input{border-color:var(--ap-alert);}
.field .msg{font-size:12.5px;color:var(--ap-alert);font-weight:700;display:none;}
.field.err .msg{display:block;}

/* ===== 日報（見た目の正：デモ_社外向け.html「日報」） ===== */
/* 質問ブロック（1問＝1カード） */
.q{
  background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:4px;
  padding:14px;display:flex;flex-direction:column;gap:10px;
}
.q .lab{font-size:13px;font-weight:700;color:var(--ap-muted);letter-spacing:.06em;}
/* ★打刻（.fixed / .timeedit）のスタイルは 2026-08-11 に削除した。
   職人は自分の判断で残業したい日がある。労働時間の記録は監視であり、
   事業理念（働き手ファースト）と衝突するため機能ごと外した。
   日報が持つのは「何人工か」だけ。復活させないこと。 */

/* 人工：0.5 / 1 / 1.5 / 2（単一選択） */
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.opt{
  min-height:58px;border:2px solid var(--ap-line);background:var(--ap-bg);border-radius:4px;
  font-family:var(--mono);font-size:19px;font-weight:600;cursor:pointer;color:var(--ap-ink);
}
.opt[aria-pressed="true"]{background:var(--ap-brand);border-color:var(--ap-brand);color:var(--ap-chalk);}
.opt:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}

/* 作業内容：タグを選ぶだけ（複数可） */
.tagwrap{display:flex;flex-wrap:wrap;gap:7px;}
.tag{
  border:2px solid var(--ap-line);background:var(--ap-bg);border-radius:3px;
  padding:9px 12px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  color:var(--ap-ink-2);min-height:44px;
}
.tag.prev{border-style:dashed;border-color:var(--ap-brand);color:var(--ap-brand);}
.tag[aria-pressed="true"]{background:var(--ap-brand);border-color:var(--ap-brand);color:var(--ap-chalk);border-style:solid;}
.tag[aria-disabled="true"]{opacity:.4;pointer-events:none;}
.tag:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}
/* 「＋じぶんで書く」を押した人にだけ出る文字入力 */
.writebox{
  width:100%;font-family:inherit;font-size:16px;color:var(--ap-ink);line-height:1.6;
  background:var(--ap-surface);border:2px solid var(--ap-line);border-radius:4px;
  padding:10px 12px;min-height:66px;resize:vertical;
}
.writebox:focus{outline:none;border-color:var(--ap-brand);}

/* 出したあとの完了画面 */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px 24px;text-align:center;}
.done .mark{width:78px;height:78px;border-radius:50%;background:var(--ap-ok);display:flex;align-items:center;justify-content:center;}
.done .mark svg{width:40px;height:40px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.done h4{margin:0;font-size:23px;font-weight:700;letter-spacing:.03em;}
.done p{font-size:14px;color:var(--ap-muted);}
.done .rec{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:4px;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:6px;text-align:left;}
.done .rec .l{display:flex;justify-content:space-between;font-size:14px;}
.done .rec .l b{font-family:var(--mono);}

/* ===== 写真・定点（見た目の正：デモ_社外向け.html「写真」） ===== */
/* 現場ごとのまとまりの見出し（現場名＋枚数） */
.grp .gh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;}
.grp .gh .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grp .gh .cnt{font-family:var(--mono);font-size:12px;color:var(--ap-muted);margin-left:auto;flex:none;}

/* 撮影ポイント1つ＝1カード */
.pt{background:var(--ap-surface);border:1px solid var(--ap-line);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:9px;}
.pt .ph1{display:flex;align-items:center;gap:8px;}
.pt .ph1 .nm{font-size:15px;font-weight:700;}
.pt .ph1 .st{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:2px;flex:none;}
.pt .ph1 .st.ok{background:#DFF0E7;color:var(--ap-ok);}
.pt .ph1 .st.miss{background:#F8E3DC;color:var(--ap-alert);}

/* 着工前／施工中／完了 の枠を横に並べる（数は site.slots に合わせて可変・3固定にしない） */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.slot{display:flex;flex-direction:column;gap:4px;min-width:0;}
.slot .lb{font-size:11px;font-weight:700;color:var(--ap-muted);text-align:center;}
/* 撮れている枠＝サムネ（押すと大きく表示） */
.slot .im{aspect-ratio:1;border-radius:3px;position:relative;overflow:hidden;background:var(--ap-line);padding:0;border:none;cursor:pointer;font-family:inherit;}
.slot .im img{width:100%;height:100%;object-fit:cover;display:block;}
.slot button.im:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}
/* 撮れていない枠＝赤い点線＋「同じ画角でとる」 */
.slot .em{aspect-ratio:1;border-radius:3px;border:2px dashed var(--ap-alert);background:var(--ap-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:inherit;font-size:11.5px;font-weight:700;color:var(--ap-alert);cursor:pointer;padding:2px;}
.slot .em svg{width:19px;height:19px;stroke:var(--ap-alert);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.slot .em:focus-visible{outline:2px solid var(--ap-alert);outline-offset:2px;}

/* 撮影ポイントを足す（名前を1つ入れるだけ） */
.addpt{background:var(--ap-surface);border:1px dashed var(--ap-brand);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.addpt .lab{font-size:13px;font-weight:700;color:var(--ap-muted);letter-spacing:.06em;}
.addpt .row2{display:flex;gap:8px;}
.addpt input{flex:1;min-width:0;font-family:inherit;font-size:16px;color:var(--ap-ink);background:var(--ap-surface);border:2px solid var(--ap-line);border-radius:4px;padding:10px 12px;min-height:50px;}
.addpt input:focus{outline:none;border-color:var(--ap-brand);}
.addpt .go{flex:none;background:var(--ap-brand);color:var(--ap-chalk);border:none;border-radius:4px;font-family:inherit;font-size:15px;font-weight:700;padding:0 18px;min-height:50px;cursor:pointer;}
.addpt .go:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}

/* 定点に属さない写真（「今日」から撮ったもの）。3列で新しい順に並べる */
.loose{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.loose .im{aspect-ratio:1;border-radius:3px;overflow:hidden;background:var(--ap-line);padding:0;border:none;cursor:pointer;font-family:inherit;}
.loose .im img{width:100%;height:100%;object-fit:cover;display:block;}
.loose button.im:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}

/* ひな形（撮影ポイントの並び） */
.tpl .tplrow{display:flex;align-items:center;gap:8px;}
.tpl .tplrow .nm{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--ap-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tpl .tplrow .go{flex:none;min-height:44px;padding:0 14px;font-size:14px;}
.tpl .tplrow .x{flex:none;width:44px;min-height:44px;background:transparent;border:1.5px solid var(--ap-line);border-radius:4px;color:var(--ap-muted);font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;}
.tpl .tplrow .x.armed{width:auto;padding:0 12px;border-color:var(--ap-alert);color:var(--ap-alert);}
.tpl .tplrow .x:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}

/* 写真を大きく表示（閉じるだけ・編集はさせない） */
.viewer{position:fixed;inset:0;background:rgba(8,12,10,.95);z-index:50;display:flex;flex-direction:column;}
.viewer .vbar{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;}
.viewer .vclose{background:rgba(255,255,255,.12);border:1.5px solid #6D7A73;color:#EAF0EC;font-family:inherit;font-size:15px;font-weight:700;padding:10px 18px;border-radius:4px;cursor:pointer;}
.viewer .vclose:focus-visible{outline:2px solid var(--ap-safety);outline-offset:2px;}
/* どこの何を撮ったか。ボタンの間で押し合わないよう、余りを全部ここが吸う */
.viewer .vinfo{flex:1;min-width:0;color:#B7C4BC;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.viewer .vbtn{flex:none;background:rgba(255,255,255,.12);border:1.5px solid #6D7A73;color:#EAF0EC;font-family:inherit;font-size:14px;font-weight:700;padding:10px 14px;border-radius:4px;cursor:pointer;}
.viewer .vbtn.del{border-color:#8C5A4E;color:#F3C9BE;}
/* 2段階目。ここまで来てはじめて本当に消える */
.viewer .vbtn.del.armed{background:var(--ap-alert);border-color:var(--ap-alert);color:#fff;}
.viewer .vbtn:focus-visible{outline:2px solid var(--ap-safety);outline-offset:2px;}
.viewer img{flex:1;min-height:0;width:100%;object-fit:contain;padding:0 8px calc(env(safe-area-inset-bottom,0px) + 14px);}

/* ===== 下タブ（4つ・増やさない §10） =====
 * ★画面下部に固定。app-root の高さ計算に左右されず、常に画面のいちばん下に貼り付く。
 *   app-root と同じ 中央寄せ・最大520px にして、PC でも枠から食み出さない。 */
.tabs{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;
  width:100%;max-width:520px;z-index:20;
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--ap-surface);border-top:1px solid var(--ap-line);
  padding-bottom:env(safe-area-inset-bottom,0);
}
/* 固定した下タブのぶん、本体スクロールの下に余白を空ける（内容がタブに隠れない） */
.app-root:not(.no-tabs) .body{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 72px);
}
/* 下タブが無い画面（現場をつくる 等）は、下の安全域ぶんだけ空ける */
.app-root.no-tabs .body{
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
}
.tab{
  background:none;border:none;font-family:inherit;cursor:pointer;
  padding:9px 0 10px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--ap-muted);font-size:11.5px;font-weight:700;
}
.tab svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.tab[aria-current="page"]{color:var(--ap-brand);}
.tab .dot{width:5px;height:5px;border-radius:50%;background:transparent;}
.tab[aria-current="page"] .dot{background:var(--ap-safety);}
/* 今日の日報がまだ＝日報タブに印。★本人にだけ見える取りこぼし防止（§0-8の監視ではない） */
.tab .dot.todo{background:var(--ap-alert);}

/* ===== 今日の日報（今日画面の1行） =====
 * ★責める見た目にしない。赤い警告にせず、いつもの行として置く。
 *   出し忘れて損をするのは職人本人なので、知らせるのは本人のため。 */
.todayrep{
  display:flex;align-items:center;gap:10px;width:100%;
  background:var(--ap-surface);border:1px solid var(--ap-line);
  border-left:4px solid var(--ap-alert);
  border-radius:4px;padding:12px 14px;min-height:54px;
  font-family:inherit;font-size:14px;color:var(--ap-ink);text-align:left;cursor:pointer;
}
/* 出したあとは主張を消す（済んだものを目立たせない） */
.todayrep.done{border-left-color:var(--ap-ok);}
.todayrep .l{font-weight:700;color:var(--ap-muted);font-size:12.5px;letter-spacing:.06em;flex:none;}
.todayrep .v{font-weight:700;color:var(--ap-alert);}
.todayrep.done .v{color:var(--ap-ok);}
.todayrep .chev{margin-left:auto;color:var(--ap-muted);font-size:18px;flex:none;}
.todayrep:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}
.tab:focus-visible{outline:2px solid var(--ap-brand);outline-offset:-2px;}

/* ===== きょうの記録（フィード）§9-2 =====
 * 狙いは情報量ではなく「人の気配」＝写真・時刻・1メッセージ・余白・状態バッジ。
 * 台帳に戻さないため、詰め込まず余白を残す。1カラム・スマホ幅（390px）で横に溢れさせない。 */
.feed{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.feedhead{
  margin:0;font-size:12px;font-weight:700;color:var(--ap-muted);
  letter-spacing:.1em;
}
/* 投稿カード1枚（1日）。横3分割：左=日時と人工／中央=見出し等／右=写真1枚。 */
.feedcard{
  display:flex;align-items:stretch;gap:12px;width:100%;
  background:var(--ap-surface);border:1px solid var(--ap-line);
  border-left:6px solid var(--ap-brand);border-radius:4px;
  padding:12px;font-family:inherit;color:var(--ap-ink);text-align:left;cursor:pointer;
}
.feedcard:focus-visible{outline:2px solid var(--ap-brand);outline-offset:2px;}
/* 左：日付・時刻が縦に並ぶ（時系列＝流れがあると分かる）＋人工 */
.fc-left{
  flex:none;width:64px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.fc-md{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ap-brand);letter-spacing:.02em;}
.fc-hm{font-family:var(--mono);font-size:12px;color:var(--ap-muted);}
.fc-nin{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ap-ink);margin-top:6px;line-height:1;}
.fc-ninlab{font-size:11px;color:var(--ap-muted);}
/* 中央：見出し（1メッセージ）・状態バッジ・ひとこと。溢れは省略で受ける（横に伸ばさない）。 */
.fc-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;}
.fc-title{
  font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ap-ink);
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.fc-badge{
  align-self:flex-start;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:2px;flex:none;
}
.fc-badge.ok{background:#DFF0E7;color:var(--ap-ok);}
.fc-badge.todo{background:#F8E3DC;color:var(--ap-alert);}
.fc-memo{
  font-size:12.5px;color:var(--ap-muted);line-height:1.6;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
}
/* 右：その日の写真1枚（正方形に近いサムネ）。人が写っていると「出来事」に見える。 */
.fc-right{flex:none;width:64px;height:64px;border-radius:3px;overflow:hidden;background:var(--ap-line);}
.fc-right img{width:100%;height:100%;object-fit:cover;display:block;}

/* レベル2の画面（現場をつくる等）では下タブを隠す＝階層は2まで（§10） */
.app-root.no-tabs .tabs{display:none;}