/* 配色と書体は mock/admin.html を引き継ぐ */
:root {
  --ground:#F1F2EE; --surface:#FFFFFF; --surface2:#F7F8F3;
  --line:#DCDFD5; --line-soft:#E7E9E1;
  --ink:#1C211E; --ink2:#5C645C; --ink3:#868D85;
  --accent:#2E6B4F; --accent-bg:#E2EFE7;
  --warn:#A96A0B; --warn-bg:#FBEFD8;
  --alert:#A33A2C; --alert-bg:#F8E3DE;
  --shadow:0 1px 2px rgba(28,33,30,.06), 0 8px 24px -18px rgba(28,33,30,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#121513; --surface:#1B1F1C; --surface2:#232722;
    --line:#303530; --line-soft:#282D28;
    --ink:#E9ECE6; --ink2:#A3AAA1; --ink3:#7C837B;
    --accent:#74BC92; --accent-bg:#1E3229;
    --warn:#DFA548; --warn-bg:#33280F;
    --alert:#E38571; --alert-bg:#37211C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Noto Sans JP", system-ui, sans-serif; font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif; margin:0; text-wrap:balance; }
.mono { font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
button { font:inherit; }
[hidden] { display:none !important; }

/* ---- 全体の枠 ---- */
.shell { display:grid; grid-template-columns:200px 1fr; min-height:100vh; }
.side { border-right:1px solid var(--line); background:var(--surface2); padding:18px 0; }
.side .farm { padding:0 18px 14px; margin-bottom:8px; border-bottom:1px solid var(--line-soft); }
.side .farm b { display:block; font-size:14px; font-weight:700; }
.side .farm span { font-size:11.5px; color:var(--ink3); }
.side nav { display:flex; flex-direction:column; }
.side nav button {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 18px; font-size:13.5px; color:var(--ink2); background:none;
  border:none; border-left:3px solid transparent; cursor:pointer; text-align:left;
}
.side nav button:hover { background:var(--surface); color:var(--ink); }
.side nav button.on { color:var(--ink); font-weight:700; border-left-color:var(--accent); background:var(--surface); }
.side nav .n {
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
  background:var(--warn-bg); color:var(--warn); border-radius:999px; padding:1px 8px;
}
.side nav .n.zero { background:var(--line-soft); color:var(--ink3); }
.side .foot { padding:14px 18px 0; margin-top:12px; border-top:1px solid var(--line-soft); }
.side .foot button { background:none; border:none; color:var(--ink3); font-size:12px; cursor:pointer; padding:0; text-decoration:underline; }
main { padding:28px 32px 72px; min-width:0; max-width:960px; }

/* ---- 見出し ---- */
.head { margin-bottom:20px; }
.head h1 { font-size:22px; font-weight:700; }
.head p { margin:6px 0 0; color:var(--ink2); font-size:13px; max-width:64ch; }

/* ---- カード ---- */
.rows { display:flex; flex-direction:column; gap:10px; }
.row {
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:13px 15px; display:grid; grid-template-columns:88px 1fr; gap:4px 14px;
  transition:opacity .25s ease, transform .25s ease;
}
.row.gone { opacity:0; transform:translateY(-6px); pointer-events:none; }
.row.alert { border-color:var(--alert); background:var(--alert-bg); }
.row .when { font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink2); }
.row .who { grid-column:1; font-size:11.5px; color:var(--ink3); }
.row .body { grid-column:2; min-width:0; }
.quote { font-size:15px; font-weight:500; margin:0 0 3px; }
.said::before { content:"「"; color:var(--ink3); }
.said::after { content:"」"; color:var(--ink3); }
.ja { font-size:13px; color:var(--ink2); margin:0 0 4px; }
.why { font-size:12px; color:var(--ink3); margin:0 0 9px; }
.why b { color:var(--warn); font-weight:700; }

.phase { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em;
  border-radius:4px; padding:1px 7px; margin-right:7px; vertical-align:2px; }
.phase.start { background:var(--accent-bg); color:var(--accent); }
.phase.end { background:var(--surface2); color:var(--ink2); border:1px solid var(--line); }

.cands { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.cands .lbl { font-size:11.5px; color:var(--ink3); margin-right:2px; }
.chip {
  font-size:13px; cursor:pointer; background:var(--surface2); color:var(--ink);
  border:1px solid var(--line); border-radius:6px; padding:5px 11px;
  display:inline-flex; align-items:baseline; gap:6px;
}
.chip:hover { border-color:var(--accent); background:var(--accent-bg); }
.chip .m { font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink3); }
.chip.other { color:var(--ink2); }
.newfield { display:flex; gap:7px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.newfield input {
  font:inherit; font-size:13px; padding:5px 10px; min-width:190px;
  border:1px solid var(--accent); border-radius:6px; background:var(--surface); color:var(--ink);
}
.newfield .go { font-size:13px; font-weight:700; cursor:pointer; background:var(--accent);
  color:#fff; border:1px solid var(--accent); border-radius:6px; padding:5px 13px; }
.newfield .cancel { font-size:12.5px; cursor:pointer; background:none; border:none;
  color:var(--ink3); text-decoration:underline; }

/* ---- 圃場 ---- */
.fields { display:flex; flex-direction:column; gap:8px; }
.field { border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:12px 15px; }
.field.auto { border-left:3px solid var(--warn); }
.field .top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.field .name { font-size:15px; font-weight:700; }
.field .tag { font-size:11px; border-radius:999px; padding:1px 8px; background:var(--warn-bg); color:var(--warn); }
.field .meta { font-size:11.5px; color:var(--ink3); margin-left:auto; }
.aliases { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center; }
.alias { font-size:12.5px; background:var(--surface2); border:1px solid var(--line);
  border-radius:999px; padding:2px 6px 2px 10px; display:inline-flex; align-items:center; gap:4px; }
.alias button { background:none; border:none; color:var(--ink3); cursor:pointer; font-size:14px; line-height:1; padding:0 4px; }
.alias button:hover { color:var(--alert); }
.field .acts { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.field .acts button { background:none; border:none; color:var(--ink2); font-size:12.5px;
  cursor:pointer; text-decoration:underline; padding:0; }
.field .acts button:hover { color:var(--accent); }
.field .acts button.danger:hover { color:var(--alert); }

/* ---- 緊急 ---- */
.sos { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; }
.sos a, .sos .rec { font-size:12px; color:var(--alert); border:1px solid var(--alert);
  border-radius:5px; padding:2px 9px; background:var(--surface); text-decoration:none; }
.sos .rec.none { color:var(--ink3); border-color:var(--line); }
audio { margin-top:8px; width:100%; max-width:360px; }

/* ---- 共通 ---- */
.empty { color:var(--ink3); font-size:13.5px; padding:24px 2px; }
.note { border-left:3px solid var(--accent); background:var(--accent-bg); border-radius:0 6px 6px 0;
  padding:9px 13px; margin:0 0 16px; font-size:12.5px; color:var(--ink2); }
.note b { color:var(--accent); }

/* ---- ログイン ---- */
.login { max-width:340px; margin:14vh auto; padding:0 20px; }
.login h1 { font-size:24px; color:var(--accent); text-align:center; margin-bottom:6px; }
.login p { color:var(--ink2); font-size:13px; text-align:center; margin:0 0 22px; }
.login input { width:100%; font:inherit; font-size:20px; text-align:center; letter-spacing:1px;
  padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); }
.login button.primary { width:100%; margin-top:14px; padding:13px; font-size:16px; font-weight:700;
  background:var(--accent); color:#fff; border:none; border-radius:10px; cursor:pointer; }
.login button.primary:disabled { opacity:.5; cursor:default; }
.login .err { color:var(--alert); font-size:13px; text-align:center; margin-top:10px; }
.login .back { display:block; margin:10px auto 0; background:none; border:none;
  color:var(--ink3); font-size:12.5px; cursor:pointer; text-decoration:underline; }

#toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--ground); font-size:13px; font-weight:500;
  padding:9px 18px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:20; }
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:820px) {
  /* **行も指定する。**列だけ1本にすると、min-height:100vh のぶんが
     2行へ分けられ、上の帯が画面の半分まで伸びる。本題との間に
     大きな空白ができて、記録が下へ押し出されていた */
  .shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  /* **格子の子は、既定では中身より小さくならない（min-width:auto）。**
     横並びにした目次が中身の幅（約790px）まで .side を押し広げ、
     画面全体が右へはみ出していた。スマホで「見づらい」の正体がこれ。
     指で横に振らないと、右側の文字が読めない状態だった */
  .side { min-width:0; border-right:none; border-bottom:1px solid var(--line); }
  .side nav { flex-direction:row; overflow-x:auto; min-width:0;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .side nav::-webkit-scrollbar { display:none; }
  .side nav button { border-left:none; border-bottom:3px solid transparent; white-space:nowrap; }
  .side nav button.on { border-left-color:transparent; border-bottom-color:var(--accent); }
  main { padding:20px; min-width:0; }
  .row { grid-template-columns:1fr; }
  .row .body { grid-column:1; }
  /* 長い農園名で押し広げられない */
  .side .farm b, .side .farm span { overflow-wrap:anywhere; }
}

/* ---- 指で押す ---- */
/*
 * **畑では手袋のまま触る。**細い文字の行は押せない。
 * 44px は Apple の指針。下限として 44px を確保する
 */
@media (max-width:820px) {
  /* **縦に積むと、1画面目がぜんぶ「使い方・ログアウト」になる。**
     本題（記録）が見えないので、横一列に畳む */
  .side .foot { display:flex; flex-direction:row; flex-wrap:wrap;
    align-items:center; gap:0 20px; padding-top:6px; }
  .side .foot .tolink,
  .side .foot button,
  .rec .edit,
  .field .acts button,
  /* 出退勤の表の「直す」。**打ち忘れを直すのは畑から帰ったあと、
     スマホでやることが多い。**押せない大きさだと直せない */
  .sum .edit,
  #pcTable .edit,
  .notice button {
    min-height:44px; display:inline-flex; align-items:center;
    font-size:14.5px; margin-bottom:0;
  }
  .side .foot .tolink { display:inline-flex; margin-bottom:0; }
  .rec .edit, .field .acts button { padding:0 2px; }
  .field .acts { gap:4px 18px; }
  /* 打ち込む欄も、指で狙える高さに */
  .tin, select.tin, .cardacts input, .cardacts button, .cardacts select {
    min-height:44px; font-size:16px;
  }
  /* 呼び名を外す「×」。**消す操作こそ、狙って押せないと困る** */
  .alias { font-size:14px; }
  .alias button {
    min-width:34px; min-height:34px; font-size:18px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .aliases { gap:10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ---- 設定 ---- */
.card { border:1px solid var(--line); border-radius:8px; background:var(--surface); padding:16px 18px; max-width:600px; }
.card h3 { font-size:15px; font-weight:700; margin-bottom:6px; }
.card .cardlead { margin:0; font-size:13.5px; color:var(--ink2); }
.card .cardlead a { color:var(--accent); }
.card .cardacts { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.card .cardacts:empty { display:none; }
.card .cardnote { margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line);
  font-size:12px; color:var(--ink3); line-height:1.75; }
.card .cardnote b { color:var(--ink2); }
.btn { font-size:13.5px; font-weight:700; cursor:pointer; background:var(--accent); color:#fff;
  border:1px solid var(--accent); border-radius:6px; padding:8px 16px; }
.btn:disabled { opacity:.5; cursor:default; }
.btn.quiet { background:var(--surface2); color:var(--ink2); border-color:var(--line); font-weight:500; }

.tin { font:inherit; font-size:13.5px; padding:7px 11px; border:1px solid var(--line);
  border-radius:6px; background:var(--surface); color:var(--ink); min-width:150px; }
.tin:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
select.tin { min-width:180px; }
.member { border:1px solid var(--line); border-radius:8px; background:var(--surface);
  padding:11px 15px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.member .nm { font-size:14.5px; font-weight:700; }
.member .ph { font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink3); }
.member .rl { font-size:11.5px; border-radius:999px; padding:1px 9px;
  background:var(--surface2); border:1px solid var(--line); color:var(--ink2); }
.member .rl.admin { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); }
.member .rl.pending { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.member .sp { margin-left:auto; display:flex; gap:10px; }
.member .sp button { background:none; border:none; color:var(--ink2); font-size:12.5px;
  cursor:pointer; text-decoration:underline; padding:0; }
.member .sp button:hover { color:var(--alert); }
.errdetail { display:block; margin-top:8px; padding:8px 10px; border-radius:6px;
  background:var(--alert-bg); color:var(--alert); font-size:12px; line-height:1.6;
  font-family:"IBM Plex Mono",ui-monospace,monospace; word-break:break-word; }
.login textarea { width:100%; font:inherit; font-size:15px; line-height:1.9; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink);
  resize:vertical; }
.login textarea:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.qrbox { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; }
.qrbox canvas { border:1px solid var(--line); border-radius:8px; background:#fff; padding:8px; }
.qrside { flex:1; min-width:220px; }
.qrlead { margin:0 0 10px; font-size:13.5px; color:var(--ink2); }
.qrurl { font-size:11.5px; color:var(--ink3); word-break:break-all; margin:0 0 10px; }
.side .foot .tolink { display:block; margin-bottom:10px; font-size:12.5px;
  color:var(--accent); text-decoration:none; }
.side .foot .tolink:hover { text-decoration:underline; }
#recaptcha { display:flex; justify-content:center; margin-top:14px; }
#recaptcha:empty, #recaptcha[hidden] { display:none; }

/* ---- 作業記録 ---- */
.rec .meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px; }
.rec .tag { font-size:12px; border-radius:5px; padding:2px 9px;
  background:var(--surface2); border:1px solid var(--line); color:var(--ink2); }
.rec .tag.field { background:var(--accent-bg); border-color:var(--accent); color:var(--accent); font-weight:700; }
.rec .tag.pend { background:var(--warn-bg); border-color:var(--warn); color:var(--warn); }
.rec .tag.quiet { color:var(--ink3); }
.rec .edit { background:none; border:none; color:var(--ink3); font-size:12.5px;
  cursor:pointer; text-decoration:underline; padding:0; margin-left:auto; }
.rec .edit:hover { color:var(--accent); }
.side .notice { margin:12px 14px 0; padding:9px 11px; border-radius:6px;
  background:var(--warn-bg); border:1px solid var(--warn); font-size:12px;
  color:var(--warn); line-height:1.65; }
.side .notice button { display:block; margin-top:7px; background:var(--warn); color:#fff;
  border:none; border-radius:5px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.login .sub { margin:-2px 0 20px; color:var(--ink3); font-size:13px; text-align:center; }

/* チェックが入るまで送信は押せない。何が足りないのかを短く添える */
.login .hint { margin:10px 0 0; color:var(--muted); font-size:13px; }

/* 開いた直後。ログイン済みかどうかが分かるまでの、静かな待ち時間 */
.boot { display:flex; align-items:center; justify-content:center; height:100dvh; }
.boot h1 { margin:0; font-size:30px; font-weight:700; color:var(--accent); }
.boot[hidden] { display:none; }

/* 紹介。リンクを受け取った人が最初に見る画面 */
.intro {
  max-width: 440px; margin: 0 auto; padding: 8vh 28px 40px; text-align: center;
}
.intro h1 { font-size: 30px; font-weight: 700; color: var(--accent); margin: 0 0 4px; }
.intro .sub { color: var(--ink2); margin: 0 0 26px; }
.intro .pitch { font-size: 18px; line-height: 1.8; margin: 0 0 22px; }
.intro .points {
  list-style: none; margin: 0 0 28px; padding: 0; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.intro .points li {
  position: relative; padding-left: 22px; color: var(--ink); font-size: 15px; line-height: 1.7;
}
.intro .points li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.intro .hint { margin: 12px 0 0; }
.intro .hint a { color: var(--accent); }

.intro button.primary {
  width: 100%; margin-top: 4px; padding: 15px; font-size: 17px; font-weight: 700;
  background: var(--accent); color: #fff; border: none; border-radius: 12px; cursor: pointer;
}
.intro .hint { color: var(--ink2); font-size: 13px; line-height: 1.7; }
.intro .legal { margin-top: 18px; font-size: 12px; line-height: 1.8; color: var(--ink3); }

/* 件数の添え字。絞り込みの結果がその場で分かるように */
.tally { color: var(--ink3); font-size: 13px; align-self: center; }
/* 候補が多い農園向け。探して選ぶ */
.cands .pick { display: flex; gap: 8px; align-items: center; margin-top: 8px; width: 100%; }
.cands .pick select { max-width: 280px; }

/* 緊急が誰にも届かなかったとき。目立たせる */
.alert .nowhere { margin: 6px 0 0; padding: 8px 12px; border-radius: 8px;
  background: var(--alert-bg); color: var(--alert); font-weight: 700; font-size: 14px; }

/* 緊急が誰にも届かないときの告知。設定するまで出し続ける */
.blocker { margin: 0 0 20px; padding: 16px 18px; border-radius: 12px;
  background: var(--alert-bg); border: 1px solid var(--alert); }
.blocker .head { margin: 0 0 6px; font-weight: 700; color: var(--alert); font-size: 16px; }
.blocker p { margin: 0 0 10px; font-size: 14px; }
.blocker .line { display: flex; gap: 8px; flex-wrap: wrap; }
.blocker .line input { min-width: 240px; }
.blocker[hidden] { display: none; }

/* ---- 圃場をまとめて登録する ---- */
.bulk { border:1px solid var(--line); border-radius:11px; background:var(--surface);
  padding:16px 18px; margin-bottom:16px; }
.bulkhead b { display:block; font-size:15px; font-weight:700; margin-bottom:3px; }
.bulkhead span { display:block; color:var(--ink2); font-size:13px; line-height:1.85;
  max-width:70ch; }
.bulkacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.bulkacts .btn { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:9px 14px; line-height:1.5; }
.bulkacts .btn i { font-style:normal; font-size:11px; color:var(--ink3); }

.bulkstate { margin-top:12px; font-size:13px; color:var(--ink2); line-height:1.8; }
.bulkstate.ok { color:var(--accent); font-weight:700; }
.bulkstate.bad { color:var(--alert); }

.bulkseq { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft); }
.bulkseq label { display:flex; align-items:center; gap:6px; font-size:13px;
  color:var(--ink2); }
.bulkseq .tin { width:110px; }
.bulkseq .tin.num { width:76px; }

.bulkpick { margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft); }
.pickhead b { display:block; font-size:14px; font-weight:700; }
.pickhead span { display:block; color:var(--ink3); font-size:12.5px; margin-top:2px;
  line-height:1.8; }
/* 400件でも画面を埋めない。中で送る */
.picklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:2px 12px; margin:11px 0; max-height:310px; overflow-y:auto;
  border:1px solid var(--line-soft); border-radius:8px; padding:9px 11px;
  background:var(--surface2); }
.pick { display:flex; align-items:center; gap:7px; font-size:13.5px; cursor:pointer;
  padding:3px 0; min-width:0; }
.pick span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick.off span { color:var(--ink3); text-decoration:line-through; }
.pick input { flex:none; accent-color:var(--accent); }
.pickacts { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- 栽培履歴 ---- */
.tinlbl { display:inline-flex; align-items:center; gap:6px; font-size:13px;
  color:var(--ink2); }
.hisdone { border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; background:var(--surface); padding:14px 17px; }
.hisdone b { display:block; font-size:14px; font-weight:700; }
.hisdone p { margin:3px 0 0; color:var(--ink2); font-size:13px; }
.hisdone .lbl { margin-top:11px; color:var(--ink3); font-size:12px; }
/* 空欄は数ではなく名前で見せる。何を埋めるかが分からないと動けない */
.blanks { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.blank { font-size:12px; padding:2px 8px; border-radius:4px;
  background:var(--surface2); border:1px solid var(--line); color:var(--ink2); }

/* 使用基準と違うところ。書き出しは止めないが、見落とさせない */
.troubles { border:1px solid var(--alert); background:var(--alert-bg);
  border-radius:9px; padding:13px 16px; margin-bottom:14px; }
.troubles > b { display:block; font-size:14px; color:var(--alert); }
.troubles > p { margin:3px 0 9px; font-size:13px; color:var(--ink2); }
.trouble { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  padding:6px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.8; }
.trouble .kind { flex:none; font-size:11px; font-weight:700; color:var(--alert);
  border:1px solid var(--alert); border-radius:4px; padding:1px 6px; }
.trouble .mat { font-weight:700; }

/* 栽培履歴の公開。出す前に、何が載るかを言う */
.pub { margin-top:14px; border:1px solid var(--line); border-radius:11px;
  background:var(--surface); padding:15px 18px; }
.pub > b { display:block; font-size:14px; font-weight:700; }
.pub > p { margin:4px 0 11px; color:var(--ink2); font-size:13px; line-height:1.85;
  max-width:72ch; }
.pub .check { display:inline-flex; align-items:center; gap:7px; font-size:13px;
  color:var(--ink2); cursor:pointer; }
.pub .check input { accent-color:var(--accent); }
.pubacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.publink { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft); }
.publink .lbl { font-size:12px; color:var(--ink3); }
.publink a { font-size:13px; color:var(--accent); word-break:break-all; }

/* 緊急の届け先の関門。帯では効かなかったので入口に置く */
.gate { position:fixed; inset:0; z-index:60; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(12,16,13,.55); backdrop-filter:blur(2px); }
.gate[hidden] { display:none; }
.gatebox { width:100%; max-width:26rem; background:var(--surface);
  border:1px solid var(--alert); border-radius:14px; padding:24px 26px;
  box-shadow:0 18px 44px rgba(0,0,0,.24); }
.gatebox .head { margin:0 0 10px; font-size:17px; font-weight:700;
  color:var(--alert); line-height:1.6; }
.gatebox p { margin:0 0 12px; font-size:14px; line-height:1.9; color:var(--ink2); }
.gatebox p b { color:var(--ink); }
.gatebox .tin { width:100%; font-size:16px; }
.gatebox .primary { width:100%; margin-top:12px; padding:12px;
  font:inherit; font-size:15px; font-weight:700; color:#fff;
  background:var(--accent); border:none; border-radius:9px; cursor:pointer; }
.gatebox .primary:disabled { opacity:.5; cursor:default; }
.gatebox .later { display:block; margin:10px auto 0; padding:4px;
  font:inherit; font-size:13px; background:none; border:none;
  color:var(--ink3); text-decoration:underline; cursor:pointer; }
.gatebox .err { margin-top:9px; color:var(--alert); font-size:13px; }
.gatebox .hint { margin:12px 0 0; font-size:12px; color:var(--ink3); }

/* ---- 集計 ---- */
.sumwrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); }
.sumwrap table { border-collapse:collapse; width:100%; font-size:13.5px;
  min-width:40rem; }
.sumwrap th, .sumwrap td { text-align:left; padding:10px 14px;
  border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.sumwrap thead th { font-size:11.5px; letter-spacing:.06em; color:var(--ink3);
  background:var(--surface2); border-bottom:1px solid var(--line);
  white-space:nowrap; font-weight:700; }
.sumwrap tbody tr:last-child td { border-bottom:none; }
.sumwrap td.name { font-weight:700; white-space:nowrap; }
.sumwrap td.num { text-align:right; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
/* 時間が何件から出たかを、数の下に小さく添える */
.sumwrap td.num .of { display:block; font-size:11px; color:var(--ink3);
  font-weight:400; }
/* 棒。どこが多いかを目で拾えるようにする */
.sumwrap td.bar { width:34%; padding-left:0; padding-right:18px; }
.sumwrap td.bar span { display:block; height:7px; border-radius:4px;
  background:var(--accent); opacity:.75; }
.sumwrap td.quiet { color:var(--ink2); font-size:12.5px; }

/* 連絡先の関門。打たずに済むほうを上に、大きく */
.gatebox .google { display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:4px; padding:12px; font:inherit; font-size:15px;
  font-weight:700; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.gatebox .google:hover { background:var(--surface2); }
.gatebox .google:disabled { opacity:.5; cursor:default; }
.gatebox .google .g { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#4285F4; color:#fff;
  font-size:14px; font-weight:700; flex:none; }
.gatebox .or { margin:14px 0 8px; font-size:12px; color:var(--ink3);
  text-align:center; display:flex; align-items:center; gap:10px; }
.gatebox .or::before, .gatebox .or::after { content:""; flex:1;
  border-top:1px solid var(--line); }
.gatebox .primary { margin-top:8px; }

/* ---- 栽培履歴の様式 ---- */
.tpl { border:1px solid var(--line); border-radius:11px; background:var(--surface);
  padding:15px 18px; margin-bottom:16px; }
.tplhead b { display:block; font-size:14px; font-weight:700; }
.tplhead span { display:block; color:var(--ink2); font-size:13px; line-height:1.85;
  margin-top:3px; max-width:72ch; }
.tplacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
.tplacts .tin { min-width:15rem; }
.tplacts .btn { display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:8px 13px; line-height:1.5; }
.tplacts .btn i { font-style:normal; font-size:11px; color:var(--ink3); }

.tplmap { margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft); }
.tplmap > b { display:block; font-size:13.5px; font-weight:700; }
.tplmap > p { margin:3px 0 10px; font-size:12.5px; color:var(--ink3); line-height:1.8; }
/* 番地ではなく「となりの文字」で読ませる。番地は確かめようがない */
.maprows { display:grid; gap:1px; }
.maprow { display:grid; grid-template-columns:8rem 1.2rem 4rem 1fr; gap:10px;
  align-items:baseline; padding:5px 0; border-bottom:1px solid var(--line-soft);
  font-size:13px; }
.maprow:last-child { border-bottom:none; }
.maprow .from { font-weight:700; }
.maprow .arrow { color:var(--ink3); }
.maprow .cell { font-family:"IBM Plex Mono",monospace; font-size:12px;
  color:var(--accent); }
.maprow .near { color:var(--ink2); font-size:12.5px; }
.maprow.block .cell { color:var(--ink2); }
.mapmiss { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:11px;
  padding-top:10px; border-top:1px solid var(--line-soft); }
.mapmiss .lbl { font-size:12px; color:var(--ink3); margin-right:4px; }
@media (max-width:760px) {
  .maprow { grid-template-columns:1fr; gap:1px; }
  .maprow .arrow { display:none; }
}

/* ---- 代理入力 ---- */
.proxy { border:1px solid var(--line); border-radius:11px; background:var(--surface);
  padding:15px 18px; margin-bottom:16px; }
.proxy[hidden] { display:none; }
.proxyhead b { display:block; font-size:14px; font-weight:700; }
.proxyhead span { display:block; color:var(--ink2); font-size:13px; line-height:1.85;
  margin-top:3px; max-width:74ch; }
.proxyhead span b { display:inline; font-weight:700; color:var(--ink); }
.proxygrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:9px 14px; margin-top:13px; }
.proxygrid label { display:flex; flex-direction:column; gap:4px; font-size:12px;
  color:var(--ink3); }
.proxygrid label.wide { grid-column:1 / -1; }
.proxygrid .tin { width:100%; font-size:14px; }
.proxyacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }

/* 喋った記録と見分けがつくように。混ざると根拠が分からなくなる */
.rec .quote .proxytag { display:inline-block; font-size:11px; font-weight:700;
  color:var(--accent); background:var(--accent-bg); border-radius:4px;
  padding:1px 7px; margin-right:8px; vertical-align:1px; }

/* 2回で聞こえ方が割れた録音。捨てずに両方見せる */
.heard { margin-top:8px; padding:9px 12px; border-radius:8px;
  background:var(--surface2); border:1px solid var(--line-soft); }
.heard .lbl { display:block; font-size:11.5px; color:var(--ink3); margin-bottom:5px; }
.heard .variant { display:inline-block; font-size:14px; font-weight:700;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:3px 10px; margin:0 6px 5px 0; }
.heard .why { display:block; font-size:12px; color:var(--ink2); line-height:1.8;
  margin-top:3px; }

/* ---- 選んで消す ---- */
.delbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  margin-bottom:14px; padding:12px 16px; border-radius:10px;
  background:var(--alert-bg); border:1px solid var(--alert); }
.delbar[hidden] { display:none; }
.delbar > b { font-size:14px; color:var(--alert); margin-right:4px; }
.btn.danger { color:#fff; background:var(--alert); border-color:var(--alert); }
.btn.danger:hover { opacity:.9; }
.btn.danger:disabled { opacity:.45; cursor:default; }
/* 選んだ行は、ひと目で分かるようにする。消すものを間違えないために */
.row.rec.picked { border-color:var(--alert); background:var(--alert-bg); }
.rec .pickbox { flex:none; width:20px; height:20px; margin-right:10px;
  accent-color:var(--alert); cursor:pointer; align-self:flex-start;
  margin-top:2px; }

/* 一日ぶんの見直し。何をどう当てたかを出す */
.revised { border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 9px 9px 0; background:var(--surface); padding:14px 17px;
  margin-bottom:14px; }
.revised > b { display:block; font-size:14px; font-weight:700; }
.revised > p { margin:3px 0 10px; color:var(--ink2); font-size:13px; line-height:1.85; }
.revrow { display:grid; grid-template-columns:auto 1.2rem auto 1fr; gap:10px;
  align-items:baseline; padding:6px 0; border-top:1px solid var(--line-soft);
  font-size:13px; }
.revrow .said { color:var(--ink2); }
.revrow .arrow { color:var(--ink3); }
.revrow .to { font-weight:700; }
.revrow .why { color:var(--ink3); font-size:12.5px; }
@media (max-width:760px) {
  .revrow { grid-template-columns:1fr; gap:2px; }
  .revrow .arrow { display:none; }
}
/* あとから当てた記録。喋ったままのものと区別する */
.rec .quote .revtag { display:inline-block; font-size:11px; font-weight:700;
  color:var(--accent); background:var(--accent-bg); border-radius:4px;
  padding:1px 7px; margin-right:8px; vertical-align:1px; }

/* 圃場が覚えたこと。溜めているだけでは、使う人に分からない */
.field .learned { display:flex; flex-direction:column; gap:3px; margin-top:7px;
  padding-top:7px; border-top:1px solid var(--line-soft); }
.field .learned .know { font-size:13px; color:var(--ink); }
.field .learned .know b { display:inline-block; min-width:11rem; font-weight:400;
  font-size:12px; color:var(--ink3); }
.field .learned .know i { font-style:normal; font-size:11.5px; color:var(--ink3);
  margin-left:8px; }
@media (max-width:640px) {
  .field .learned .know b { display:block; min-width:0; }
}

/* 登録名に寄せた農薬。隠さず、違っていたら気づけるように */
.rec .meta .tag.fixed { background:var(--accent-bg); color:var(--accent);
  border-color:transparent; font-size:11.5px; }

/* ---- 圃場を選ぶ画面 ---- */
/* prompt に71件並べて21件目までしか見えなかったので、作り直した */
.picker { position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(12,16,13,.5); backdrop-filter:blur(2px); }
.picker[hidden] { display:none; }
.pickbox { width:100%; max-width:30rem; max-height:82vh; display:flex;
  flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; box-shadow:0 18px 44px rgba(0,0,0,.24); }
.pickbox .head { margin:0; font-size:16px; font-weight:700; }
.pickbox .sub { margin:2px 0 12px; font-size:12px; color:var(--ink3); }
.pickbox .tin { width:100%; }
.picklist2 { flex:1; overflow-y:auto; margin:10px 0; border:1px solid var(--line-soft);
  border-radius:9px; background:var(--surface2); min-height:8rem; }
.pickrow { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  width:100%; text-align:left; padding:10px 13px; font:inherit; font-size:14px;
  background:none; border:none; border-bottom:1px solid var(--line-soft);
  cursor:pointer; color:var(--ink); }
.pickrow:last-child { border-bottom:none; }
.pickrow:hover { background:var(--surface); }
.pickrow.on { background:var(--accent-bg); }
.pickrow .nm { font-weight:700; }
.pickrow .sub { font-size:12px; color:var(--accent); }
.pickrow .al { font-size:12px; color:var(--ink3); }
.pickempty { padding:14px; text-align:center; color:var(--ink3); font-size:13px; }
.picktask { display:flex; align-items:center; gap:8px; font-size:13px;
  color:var(--ink2); margin-bottom:12px; }
.picktask .tin { flex:1; }
.pickacts2 { display:flex; flex-wrap:wrap; gap:8px; }

/* 役割の選び口 */
.member .sp .rolepick { font:inherit; font-size:12.5px; padding:4px 8px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink); cursor:pointer; }
.member .sp .rolepick:disabled { opacity:.5; cursor:default; }

/* ---- 打刻を直す ---- */
/* **打ち忘れは必ず起きる。**退勤を押さずに帰る日がある */
.pelist { display:flex; flex-direction:column; gap:8px; margin:12px 0 0; }
.peline { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; border:1px solid var(--line-soft); border-radius:9px;
  background:var(--surface2); }
.peline .lbl { min-width:6.5rem; font-size:13.5px; font-weight:600; }
.peline .tin { width:8rem; }
.peline .cardnote { margin:0; font-size:12px; }

/* ---- 圃場の並び替え ---- */
/* **冬に使わない畑を下へ。**名前の順だと毎回同じ場所を探すことになる */
.field .arrows { display:inline-flex; gap:4px; margin-right:10px; vertical-align:2px; }
.field .arrow { width:30px; height:30px; padding:0; font-size:15px; line-height:1;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  color:var(--ink2); cursor:pointer; }
.field .arrow:hover:not(:disabled) { color:var(--accent); border-color:var(--accent); }
.field .arrow:disabled { color:var(--line); cursor:default; }