/* 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%;
}

/* ===== アプリの器（フル画面・下タブ固定） ===== */
.app-root{
  height:100dvh;
  display:flex;
  flex-direction:column;
  max-width:520px;      /* PCでも幅を広げすぎない */
  margin:0 auto;
  background:var(--ap-bg);
  overflow:hidden;
}
.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;
}

/* 画面上部のバー */
.apbar{
  flex:none;
  background:var(--ap-brand);
  color:var(--ap-chalk);
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
}
.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;
}
.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つ（地図・電話・図面など） */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;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;}

/* ===== 大ボタン（主要ボタン高さ 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);}

/* ===== 空の画面（現場が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;}
.q .fixed{display:flex;gap:10px;align-items:baseline;}
.q .fixed b{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--ap-ink);}
.q .fixed span{font-size:12.5px;color:var(--ap-muted);}
/* 時刻は既定で触らせない＝ボタン化。押したら下の入力を出す */
button.fixed{width:100%;border:none;background:none;font-family:inherit;cursor:pointer;padding:0;text-align:left;}
button.fixed:focus-visible{outline:2px solid var(--ap-brand);outline-offset:3px;}
.timeedit{display:flex;gap:10px;align-items:center;}
.timeedit input{
  font-family:var(--mono);font-size:18px;color:var(--ap-ink);
  background:var(--ap-surface);border:2px solid var(--ap-line);border-radius:4px;
  padding:10px 10px;min-height:50px;
}
.timeedit input:focus{outline:none;border-color:var(--ap-brand);}

/* 人工：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;}

/* 写真を大きく表示（閉じるだけ・編集はさせない） */
.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;justify-content:flex-end;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 img{flex:1;min-height:0;width:100%;object-fit:contain;padding:0 8px calc(env(safe-area-inset-bottom,0px) + 14px);}

/* ===== 下タブ（4つ・増やさない §10） ===== */
.tabs{
  flex:none;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);
}
.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);}
.tab:focus-visible{outline:2px solid var(--ap-brand);outline-offset:-2px;}

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