/* 書体（2026-10-11 C案）。本文は読みやすさ重視の UD ゴシック、見出しだけ丸みのあるゴシック */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Zen+Maru+Gothic:wght@500;700&display=swap");

/* 管理画面（/admin）の意匠。住民が読む画面は style.css のまま。

   役割分担:
   議員本人が日々こなすのはスマホ（LINEと、片づける画面）。
   この管理画面は「整理して、振り返って、数字を見る」ための場所なので、
   密度より読みやすさを取る。文字は小さくしない。1画面に詰め込まない。

   - 地色は薄い青灰、面は白のカード、角は8px、影は1段だけ
   - 索引（PCでは左、スマホでは下）は深緑。差し色は金の1色
   - 状態は淡い塗りの札。色の意味は 受付=朱 / 案内・確認=藍 / 対応中=山吹 / 済み=松葉
   - グラフの系列色はここでは決めない（app/charts.py。色覚検証を通した青と金）
*/

:root {
  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-alt: #f6f8fa;
  --ink: #23272c;
  --ink-sub: #6b7280;
  --line: #e0e5ea;
  --rail: #23403a;          /* 深緑 */
  --rail-veil: rgba(35, 64, 58, .85);  /* 背景の画像に重ねる深緑（85%。施主が3段階から選んだ） */
  --rail-ink: #eaf0ed;
  --gold: #c08a2e;          /* 差し色 */
  --shu: #c0392b;
  --yamabuki: #9a6b12;
  --matsu: #2f6b46;
  --ai: #2b5580;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .06);
  --railw: 224px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt" 1;
}
a { color: var(--ai); text-underline-offset: 2px; }
.tnum, .kpi .n, .stat .n, .tbl td, .card .meta, .timeline .when {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 上の帯 ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.appbar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: .01em; }
.appbar .sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-sub); }
/* 指で押せる大きさを取る（文字は小さくても、押せる範囲は上下左右に広げる） */
.appbar .back {
  display: inline-block; margin: -6px 0 0 -4px; padding: 6px 12px 4px 4px;
  font-size: 13px; font-weight: 700; color: var(--ink-sub); text-decoration: none;
}
.appbar .back:hover { color: var(--ink); text-decoration: underline; }
.appbar h1 .back { display: block; width: fit-content; }
.appbar-right { display: flex; align-items: center; gap: 10px; }
.appbar .who { font-size: 12px; color: var(--ink-sub); white-space: nowrap; }
.appbar form { margin: 0; }
.appbar button {
  background: var(--surface);
  color: var(--ink-sub);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  min-height: 38px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.appbar button:hover { background: var(--surface-alt); color: var(--ink); }

main { padding: 22px 18px 100px; max-width: 800px; margin: 0 auto; }
main.wide { max-width: 1240px; }

/* ---------- 見出し ---------- */
.section { margin: 0 0 40px; }
.section > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
}
/* 縦棒は飾りではなく「急ぎ」の信号。すべての節に同じ棒を付けると模様になり、
   どこが急ぎなのか分からなくなっていた（1画面に6本並ぶこともあった）。
   手を打つ必要がある節（alert / warn）だけに出す */
.section.alert > h2::before,
.section.warn > h2::before {
  content: "";
  width: 4px;
  height: 20px;
  background: var(--shu);
}
.section.warn > h2::before { background: var(--yamabuki); }
.section > h2 .h2-link { margin-left: auto; font-size: 12px; font-weight: 400; }

/* 図を単独で置くときの箱。図（app/charts.py）は幅440pxで組んであり、
   本文幅いっぱいに広げると文字まで一緒に拡大されて読みにくくなる */
.chart-card { max-width: 520px; }

/* 二要素認証の登録QR。PCで開いてキーを手打ちするのが面倒だったので、
   カメラで読めるようにした。白地でないと読み取れない端末がある */
.qr-box {
  display: flex;
  justify-content: center;
  padding: 16px;
  margin: 14px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.qr-box img, .qr-box canvas { display: block; }
.qr-fallback { margin-bottom: 14px; }
/* 二要素の設定: 画面とカメラが同じ端末（スマホ1台）ならQRは読めない。
   タッチ端末ではアプリを直接開くボタンに切り替える */
.setup-phone { display: none; }
@media (hover: none) and (pointer: coarse) {
  .setup-pc { display: none; }
  .setup-phone { display: block; }
}
.qr-fallback > summary { cursor: pointer; font-size: 13px; color: var(--ink-sub); }

/* 支援者の地図。PCで見るので、指で扱うLIFF側（320px）より高く取る */
#map {
  height: 480px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* スマホでは480pxだと画面のほとんどが地図になり、下の断り書きまで届かない */
@media (max-width: 640px) {
  #map { height: 340px; }
}
/* 同じ場所に重なった人をまとめて出すピン。住所から引けるのは地区までなので、
   同じ地区の人は必ず同じ点になる。ずらさずに人数で見せる。
   leaflet.css は画面を開いてから読み込まれ、あとから読んだ方が勝つ。
   .leaflet-marker-icon を併記して詳細度で上回らないと、中央寄せが効かない */
/* 地図の凡例。色が2つになったので、何の色かを必ず添える */
.map-legend { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--ink-sub); }
.map-legend .key { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.map-legend .key.sup { background: #1f4d3a; }
.map-legend .key.voice { background: #2a78d6; }
.map-legend .key + .key { margin-left: 10px; }

.leaflet-marker-icon.pin-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1f4d3a;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
/* 相談（対応箇所）のピン。支援者の深緑と分ける。
   青はホームの「届いた相談」の図（charts.SERIES_1）と同じ色で、製品内で揃えてある。
   **pin-group と詳細度が同じなので、必ずこの後ろに置く。**
   前に置くと同点負けして緑のままになる（実際にそれで全部緑になった） */
.leaflet-marker-icon.pin-group.pin-voice { background: #2a78d6; }

/* 1件だけの地点は数字を出さず、小さい点にする。
   番地まで引けた場所は1件ずつ別の点になるので、そのままだと「1」の丸が並ぶ。
   1という数字は何も伝えないうえ、画面が数字だらけになって読みにくい。
   色は変えないので、丸と点の違いは「まとまりか1件か」だけを表す */
/* 箱そのものは透明で、指で押せる大きさ（30px・寸法は supporters_map.html の DOT_HIT）。
   見た目の点は ::before で描く。箱に色を塗ると、広げた分がそのまま大きな点になる。
   左右に振るときは点を箱の内側の端に寄せる。中央に置くと箱を広げた分だけ
   点が外側へずれ、位置が変わってしまう */
.leaflet-marker-icon.pin-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.leaflet-marker-icon.pin-dot.pin-at-left { justify-content: flex-start; }
.leaflet-marker-icon.pin-dot.pin-at-right { justify-content: flex-end; }
.leaflet-marker-icon.pin-dot::before {
  content: "";
  /* このファイル冒頭の `* { box-sizing: border-box }` は**擬似要素には効かない**
     （`*` は要素しか選ばない）。指定しないと 14px に枠線2px×2が足されて
     18px の点になり、見た目が太る。旧 .pin-dot は要素だったので14pxに収まっていた */
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1f4d3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
/* 青は必ず緑の後ろに置く（同じ詳細度なら後に書いたほうが勝つ） */
.leaflet-marker-icon.pin-dot.pin-voice::before { background: #2a78d6; }

/* 素材の件数と、紙面に載る本数を同じ行に並べる3列。
   .tbl は狭い画面で1件2行に折り返す作りなので、この用途には使えない
   （スマホで名前が省略され、数が別の行に落ちた） */
/* 紙面の組み立て（活動報告をつくる画面）。
   左に素材の件数、右に紙面に載る本数。右の列だけ地色を変えて縦線で区切り、
   帯として立てる。3列を等分に並べただけの版は数字が左に寄って右が空き、
   主役であるはずの本数がいちばん目立たなかった。
   行は flex。列の幅を固定するので grid でなくても縦に揃う */
/* 本文幅いっぱいに伸ばさない。PCでは名前と数字が800px離れ、
   行が長すぎて目線が飛ぶ（グラフを .chart-card で抑えているのと同じ理由） */
.frame-panel { font-size: 14px; max-width: 560px; }
.frame-panel .fp-cols,
.frame-panel .fp-row { display: flex; align-items: baseline; gap: 12px; }
.frame-panel .fp-cols { font-size: 11px; color: var(--ink-sub); }
.frame-panel .fp-row { border-top: 1px solid var(--line); }
.frame-panel .fp-name { flex: 1; min-width: 0; padding: 11px 0; }
.frame-panel .c-av {
  flex: none;
  width: 64px;
  padding: 11px 0;
  text-align: right;
  color: var(--ink-sub);
}
/* 幅は内訳（「大2・小3・その他1」）が収まる大きさ。
   112px では折り返して「1」が1文字だけ次行に落ちた */
.frame-panel .c-ct {
  flex: none;
  width: 136px;
  padding: 11px 12px;
  text-align: right;
}
/* 「今月の数字」カードの明細。数字と、それが何の数かを1行に並べる。
   「受付 2件／回答 0件」と詰めた版は、何の数か読み取れなかった */
.stat-lines { max-width: 520px; }
.stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.stat-line:last-child { border-bottom: 0; }
.stat-line strong { font-weight: 700; text-align: right; }

/* 狭い画面では縦に積む。横に並べると「返答までにかかった日数」の行が折り返し、
   ラベルの「数」や値の「ん」が1文字だけ次行に落ちた。
   文言を短くするだけでは、日数が2桁になった月にまた溢れる */
@media (max-width: 480px) {
  .stat-line { flex-direction: column; gap: 2px; }
  .stat-line strong { text-align: left; }
}

/* 行の一行説明。名前だけでは何を数えているか分からないので行に貼る */
.frame-panel .fp-note {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-sub);
}
/* 帯は行だけ。見出しの行に塗ると表の外枠のように見えてしまう。
   説明で行が2行ぶんになるので、帯は行の高さいっぱいに伸ばす
   （baseline のままだと帯が行ごとに途切れる） */
.frame-panel .fp-row .c-ct {
  align-self: stretch;
  background: var(--surface-alt);
  border-left: 1px solid var(--line);
}
.frame-panel .c-ct strong { font-size: 19px; }
.frame-panel .c-ct .is-none { font-size: 12px; color: var(--ink-sub); }
/* 大小の内訳は数字の下へ。横に並べると狭い画面で帯からはみ出す */
.frame-panel .c-ct .sub-inline {
  display: block;
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.5;
}
.frame-panel .is-fixed .fp-name,
.frame-panel .is-fixed .c-av { color: var(--ink-sub); }
.frame-panel .fp-foot { border-top: 2px solid var(--line-strong); }
.frame-panel .fp-foot .fp-name { font-weight: 700; }

@media (max-width: 480px) {
  .frame-panel .fp-cols,
  .frame-panel .fp-row { gap: 8px; }
  .frame-panel .c-av { width: 52px; }
  .frame-panel .c-ct { width: 112px; padding-left: 8px; padding-right: 8px; }
}

/* 節の中の小見出し。見出し（h2）を増やさずに「今月の数字」の中身を分けるためのもの。
   概況の節を9つから3つに減らしたとき、経路とAI要約をここに畳んだ */
.section > h3 {
  margin: 22px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-sub);
}

.count {
  display: inline-block;
  min-width: 1.8em;
  padding: 1px .5em;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-sub);
  background: var(--surface-alt);
  border: 1px solid var(--line);
}
.count.is-danger { color: #fff; background: var(--shu); border-color: var(--shu); }
.count.is-warn { color: #fff; background: var(--yamabuki); border-color: var(--yamabuki); }

/* ---------- カード ---------- */
.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
.card:hover { border-color: var(--line-strong); }
.card.is-danger { border-left: 4px solid var(--shu); }
.card.is-warn { border-left: 4px solid var(--yamabuki); }
.card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ink-sub);
}
.card .body {
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.card .elapsed { font-weight: 700; }
.card.is-danger .elapsed { color: var(--shu); }
.card.is-warn .elapsed { color: var(--yamabuki); }

.empty {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px 16px;
  color: var(--ink-sub);
  font-size: 13px;
  text-align: center;
}
.note { margin: 10px 0 0; font-size: 12px; line-height: 1.8; color: var(--ink-sub); overflow-wrap: anywhere; }
.voice-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.9;
}
.sub-inline { margin-left: 6px; font-size: 12px; color: var(--ink-sub); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--surface-alt); border-radius: 4px; padding: 2px 5px; word-break: break-all; }

/* ---------- 状態の札（淡い塗り） ---------- */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-sub);
  background-color: var(--surface-alt);
  /* 図のグラデーションと同じ考え方。色は地色のまま、上下にごく薄い濃淡だけ足す。
     色味を変えていないので、状態の札が持つ意味（朱＝急ぎ など）は動かない */
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .28), rgba(0, 0, 0, .05));
  border: 1px solid var(--line);
}
[data-theme="dark"] .badge {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .07), rgba(0, 0, 0, .18));
}
/* 朱（赤系）は「受付からの経過」の濃淡が使う色なので、状態の札では使わない。
   両方が赤系だと、札の色なのか放置の長さなのかが見分けられなくなる。
   未対応の急ぎ具合は、行の色のほうが伝えている */
.badge.received { color: var(--tone-neutral-ink); background: var(--tone-neutral-bg); border-color: var(--tone-neutral-line); }
/* 配信の失敗など、本当に赤で出したいもの（状態の札とは別） */
.badge.error { color: var(--tone-danger-ink); background: var(--tone-danger-bg); border-color: var(--tone-danger-line); }
.badge.referred { color: var(--tone-info-ink); background: var(--tone-info-bg); border-color: var(--tone-info-line); }
/* reading と acting は画面上どちらも「対応中」。色が違うと、同じ名前なのに
   別のものに見える。同じ見た目にする */
.badge.reading,
.badge.acting { color: var(--tone-warn-ink); background: var(--tone-warn-bg); border-color: var(--tone-warn-line); }
.badge.answered { color: var(--tone-ok-ink); background: var(--tone-ok-bg); border-color: var(--tone-ok-line); }
/* 完了は「もう見なくていい」ほうなので、回答待ちより沈ませる */
.badge.completed { color: var(--tone-done-ink); background: var(--tone-done-bg); border-color: var(--tone-done-line); }
.badge.closed { color: var(--tone-quiet-ink); background: var(--tone-quiet-bg); border-color: var(--tone-quiet-line); }
.badge.public { color: var(--tone-ok-ink); background: var(--tone-ok-bg); border-color: var(--tone-ok-line); }
.badge.private { color: var(--tone-quiet-ink); background: var(--tone-quiet-bg); border-color: var(--tone-quiet-line); }
/* 一覧の状態は、いちばん長い「窓口案内済」に合わせて幅を揃える。
   長さがまちまちだと、縦に並んだとき札の端がガタついて目が落ち着かない。
   幅を固定するのはこの列だけ（詳細画面や支援者のタグは内容ぴったりのままにする） */
.tbl td.st .badge { min-width: 7em; text-align: center; }
/* 優先度は列にすると色が増えて一覧が読みにくくなる。高いものだけ星を1つ出す。
   星は常に同じ幅の枠を確保する（高いものだけ枠を作ると、番号の縦位置がずれる） */
.star {
  display: inline-block; width: 1.1em; margin-right: 2px;
  color: var(--shu); font-size: 13px; text-align: center;
}
.pri { font-size: 12px; font-weight: 700; color: var(--ink-sub); }
.pri.high { color: var(--shu); }
.pri.normal { color: var(--ink); font-weight: 400; }

/* ---------- 数字 ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 10px;
  text-align: center;
}
.stat .n { font-size: 28px; font-weight: 700; line-height: 1.2; }
.stat .k { font-size: 11px; color: var(--ink-sub); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 24px; }

/* ---------- 表 ---------- */
.tbl-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-sub);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
/* マウスを乗せた行。**固定の背景色は塗らない。**
   行の背景は「放置日数」を表していて、そこへ別の色を足すと
   「濃い＝古い」なのか「濃い＝カーソルが乗っている」なのか読み取れなくなる。
   代わりに、行全体へごく薄い膜を重ねる。全行に同じ量だけかかるので
   赤の濃淡（＝放置日数）の差はそのまま保たれ、カーソルの下だけ少し沈む。
   左端の金の線はそのまま（線だけでは細くて気づきにくいという指摘があった） */
.tbl tbody tr:hover { background-size: 100% 100%; box-shadow: inset 3px 0 0 var(--gold); }
/* 項目と値の表（設定など）は並べて見比べる一覧ではないので、カーソルの膜を掛けない。
   掛けると、中に開閉欄があるときに行の途中までだけ灰色になる */
.tbl.kv tbody tr:hover { background-size: 0 0; box-shadow: none; }
.tbl td.nowrap { white-space: nowrap; }
.tbl td.wide { width: 100%; }
.tbl a { color: var(--ai); }
.tbl .clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink); text-decoration: none;
}
.tbl a:hover .clamp { text-decoration: underline; }
.tbl .thumb { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); display: block; }
/* 受付からの経過。1色（朱）の濃淡だけで、放置の長さを表す。
   数字そのものは常に出ているので、色は補助（色が読めなくても情報は落ちない）。
   終わった要望には付けない（古いのは当たり前で、赤くする意味がない）。
   色は行そのもの（tr）に敷く。セルに敷くとその1マスだけが塗られ、行に見えない。
   セルには背景を持たせないこと（持たせると行の色を隠してしまう）。 */
/* カーソルを乗せた行の膜を、左から右へ広げる。
   幅0の帯を敷いておき、ホバーで100%まで伸ばす（色ではなく幅が動く）。
   半透明なので、下にある放置日数の濃淡はそのまま透ける */
.tbl tbody tr {
  background-image: linear-gradient(to right, var(--row-hover), var(--row-hover));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .28s ease, box-shadow .12s ease;
}
/* 行いっぱいに広がるぶん、1マスだった頃より薄くても同じだけ目に入る。
   1日未満にも最も薄い色を敷く。無色にすると、並びの途中が抜けて見える */
/* **background の一括指定を使わない。** 一括だと background-image も一緒に
   打ち消してしまい、ホバーで左から流れる膜（下の .tbl tbody tr）が消える。
   しかもこの規則はホバー規則より後ろにあるので、後勝ちで必ず負ける */
.tbl tbody tr.age-0 { background-color: var(--age-0); }
.tbl tbody tr.age-1 { background-color: var(--age-1); }
.tbl tbody tr.age-2 { background-color: var(--age-2); }
.tbl tbody tr.age-3 { background-color: var(--age-3); }
.tbl tbody tr.age-4 { background-color: var(--age-4); }
/* 日数そのものは太字にしない。行に色が付いているので、そこへ太字を重ねると
   同じことを二度言うことになり、かえって目が散る */
.tbl .age-danger { color: var(--shu); font-weight: 700; }
.tbl.kv th { width: 9em; background: transparent; }

/* ---------- 経過 ---------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; margin-left: 8px; padding: 0 0 20px 20px; border-left: 2px solid var(--line); }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--surface);
}
.timeline li.response::before { background: var(--matsu); }
/* 住民に見えている一言。内部の記録と混ざらないよう、線と点を変える */
.timeline li.note-item { border-left-color: var(--gold); }
.timeline li.note-item::before { background: var(--surface); border-color: var(--gold); }
.timeline li.note-item .what { border-left: 3px solid var(--gold); padding-left: 10px; }
.timeline .when { font-size: 12px; color: var(--ink-sub); }
.timeline .what { font-size: 15px; white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.timeline img { width: 100%; max-width: 420px; margin-top: 10px; border-radius: var(--radius); }

/* ---------- 入力 ---------- */
label { display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-sub); }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 11px 13px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  min-height: 46px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
textarea { min-height: 124px; resize: vertical; line-height: 1.8; }
/* 動きの記録は1〜2行で済むことが多い。返答を書く欄とは分ける */
textarea.short { min-height: 76px; }
/* 毎回は使わない項目（写真・日時）を1行に寝かせる */
.field-row { display: flex; flex-wrap: wrap; gap: 0 24px; }
.field-row .fr { flex: 1 1 14em; min-width: 0; }
.field-row input[type=datetime-local] { width: 100%; }
/* チェックひとつの項目。上に見出しを立てず、文字とチェックを横に並べる */
label.check {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; font-size: 13px; font-weight: 400; color: var(--ink);
}
label.check input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--rail); }
input[type=file] { font-size: 13px; padding: 8px 0; width: 100%; }
input[type=date] { max-width: 100%; }

.btn {
  display: inline-block;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  margin-top: 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--accent-hover); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--field-line); }
.btn.secondary:hover { background: var(--surface-alt); }
.btn.danger { background: var(--surface); color: var(--shu); border-color: var(--danger-line); }
.btn.small { min-height: 38px; padding: 8px 14px; margin-top: 10px; font-size: 13px; width: auto; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label {
  margin: 0; padding: 9px 16px; min-height: 42px;
  display: flex; align-items: center;
  font-size: 13px; font-weight: 400;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: 999px;
}
.chips input:checked + label { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }

/* 設定の帯。ひとつの設定に見出し・全幅の入力・保存ボタン・説明文を積むと、
   小さな設定2つで画面1枚分の高さになる。横1本に寝かせ、選んだ時点で保存する */
.setbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.setbar .set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.setbar .set-k { font-size: 12px; font-weight: 700; color: var(--ink-sub); }
.setbar select { width: auto; min-width: 8em; margin: 0; padding: 8px 32px 8px 10px; }
.setbar .chips { margin: 0; gap: 6px; }
.setbar .chips label { min-height: 34px; padding: 5px 14px; }
.setbar .btn.small { margin: 0; }
/* 設定の横に小さく置く補足。別行の説明文にすると帯が2段になって太る */
.setbar .set-note { font-size: 12px; color: var(--ink-sub); }

/* 詳細画面の頭。色付きの札（手の打ち方が変わるもの）と、
   灰色の文字（参照するだけの事実）を行で分ける */
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.facts {
  margin: 6px 0 10px; font-size: 12px; line-height: 1.8; color: var(--ink-sub);
}

/* 毎回は読まない説明。開いたときだけ出す */
.more-note > summary,
.more-kinds > summary {
  font-size: 12px; color: var(--ink-sub); cursor: pointer;
  margin-top: 10px; list-style: none;
}
.more-note > summary::before,
.more-kinds > summary::before { content: "＋ "; }
.more-note[open] > summary::before,
.more-kinds[open] > summary::before { content: "− "; }
.more-note > summary::-webkit-details-marker,
.more-kinds > summary::-webkit-details-marker { display: none; }
.more-kinds .chips { margin-top: 8px; }

.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.filters > *, .filterbar > * { min-width: 0; }
.filters .wide { grid-column: 1 / -1; }
.filterbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.filterbar input[type=text], .filterbar select { min-height: 40px; padding: 8px 12px; font-size: 13px; }
.filterbar-actions { display: flex; gap: 8px; grid-column: 1 / -1; }
.filterbar .wide { grid-column: 1 / -1; }
/* 絞り込みを畳む行（スマホ）。パソコンでは隠して、中身をいつも見せる */
.filter-fold { margin: 0 0 16px; }
.filter-fold > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none;
  background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius);
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.filter-fold > summary::-webkit-details-marker { display: none; }
.filter-fold > summary::after { content: "＋"; color: var(--ink-sub); font-weight: 400; }
.filter-fold[open] > summary::after { content: "−"; }
.filter-fold[open] > summary { margin-bottom: 10px; }
.filter-fold > .filterbar { margin-bottom: 0; }
@media (min-width: 768px) {
  .filter-fold > summary { display: none; }
}
.filterbar-actions .btn { margin-top: 0; }

/* ---------- 折りたたみ ---------- */
details.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
}
details.panel > summary {
  padding: 15px 18px; min-height: 52px;
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer; list-style: none;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::after { content: "＋"; margin-left: auto; color: var(--ink-sub); font-size: 13px; }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }
details.panel[open] > summary::after { content: "−"; }
details.panel.danger > summary { color: var(--shu); }
details.panel .inner { padding: 6px 18px 20px; }

/* 主役の操作（状態を進める / 住民に一言）。
   同じ大きさの箱が4つ並ぶと、どれが普段使うものか分からない。
   主役だけ枠を強くして最初から開き、残りは下の小さな一覧に落とす */
details.panel.primary {
  border: 2px solid var(--accent);
  margin-bottom: 18px;
}
details.panel.primary > summary { background: var(--accent); color: #fff; font-size: 16px; }
details.panel.primary > summary::after { color: rgba(255, 255, 255, .8); }
details.panel.primary[open] > summary { border-bottom: 0; }

/* 内部の記録と、住民に見えるものの境目。
   1つのフォームに混ざるので、どこから相手に見えるのかを線で示す */
hr.to-resident {
  margin: 22px 0 0; border: 0; border-top: 2px dashed var(--line);
}
.to-resident-note {
  margin: 8px 0 0; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--matsu);
}

/* 補助の操作。めったに使わないので、小さくまとめて置く */
.sub-ops { margin-top: 4px; }
.sub-ops > h3 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--ink-sub);
}
.sub-ops details.panel {
  box-shadow: none; margin-bottom: 6px; background: var(--surface-alt);
}
.sub-ops details.panel > summary {
  padding: 11px 14px; min-height: 44px; font-size: 13px; font-weight: 400;
}
.sub-ops details.panel[open] > summary { font-weight: 700; }
.sub-ops details.panel[open] { background: var(--surface); }

/* ---------- 知らせ ---------- */
.flash {
  padding: 13px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  font-size: 13px;
  background: var(--tone-info-bg);
  border: 1px solid var(--tone-info-line);
  color: var(--flash-base-ink);
}
.flash.ok { background: var(--tone-ok-bg); border-color: var(--tone-ok-line); color: var(--tone-ok-ink); }
.flash.error { background: var(--tone-danger-bg); border-color: var(--tone-danger-line); color: var(--tone-danger-ink); }
/* 失敗ではないが、そのまま進むと具合が悪いことを伝える
   （例: 住民に何も伝えないまま完了にした）。色が無いと、ただの白い箱になって気づけない */
.flash.warn { background: var(--tone-warn-bg); border-color: var(--tone-warn-line); color: var(--tone-warn-ink); }
.flash.info { background: var(--tone-info-bg); border-color: var(--tone-info-line); color: var(--tone-info-ink); }

/* ---------- メニュー ---------- */
.menu-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.menu-list a {
  display: block; padding: 15px 18px; min-height: 56px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700;
}
.menu-list a:last-child { border-bottom: 0; }
.menu-list a:hover { background: var(--surface-alt); }
.menu-list a span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-sub); }

/* 設定メニューのカード。広い画面では横に並び、狭い画面では縦に積む。
   マウスを乗せると少し浮く（押せるものだと分かるように） */
.menu-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px;
}
.menu-cards a {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px; min-height: 140px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.menu-cards a:hover, .menu-cards a:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 24, 32, .12);
  border-color: var(--line-strong);
}
.menu-cards svg {
  width: 26px; height: 26px; margin-bottom: 4px;
  stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.menu-cards a span { font-size: 12px; font-weight: 400; line-height: 1.7; color: var(--ink-sub); }
@media (prefers-reduced-motion: reduce) {
  .menu-cards a { transition: none; }
  .menu-cards a:hover, .menu-cards a:focus-visible { transform: none; }
}

/* ---------- 説明モード ----------
   ふだんは何も起きない。設定で入れたときだけ、説明のある言葉に点線が付く。
   常時出す作りにすると、マウスが通り過ぎただけで吹き出しが割り込む。 */
[data-help-mode="on"] [data-help] {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  cursor: help;
}
/* 札や数字そのものが説明の相手のときは、文字の下線ではなく下辺の線で示す。
   タブ（.boxes）はここに入れない——選択中の印が同じ金色の下線なので、
   全部に線が付くと、いまどれを見ているのか分からなくなる */
[data-help-mode="on"] .badge[data-help],
[data-help-mode="on"] th[data-help],
[data-help-mode="on"] .btn[data-help],
[data-help-mode="on"] .figure-row a[data-help] {
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--gold);
}
/* 選択肢は box-shadow が描かれない環境がある。枠の色で示す */
[data-help-mode="on"] select[data-help] {
  text-decoration: none;
  border-color: var(--gold);
}
.helptip {
  position: fixed; z-index: 60;
  max-width: 300px; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font-size: 12.5px; line-height: 1.75;
  box-shadow: 0 6px 20px rgba(16, 24, 32, .16);
}
[data-theme="dark"] .helptip { box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

/* ---------- 使い方 ---------- */
/* この節は main.guide の中だけに効かせる。h3 のような素の要素に地の文で
   スタイルを当てると、他の画面（ホームの図の見出しなど）を巻き込む */
/* 見出しへ飛んだとき、上に貼り付く帯の下に隠れないようにする */
main.guide h2[id] { scroll-margin-top: 76px; }

.guide-why { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin: 14px 0 12px; }
.guide-why div {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px;
}
.guide-why b { display: block; font-size: 17px; }
.guide-why span { display: block; font-size: 12px; color: var(--ink-sub); margin-top: 2px; }
/* 対応する画面名。名前と説明より一段落として、どこを開けばいいかだけ拾えるようにする */
.guide-why em {
  display: block; margin-top: 8px; font-style: normal;
  font-size: 11px; font-weight: 700; color: var(--gold);
}

/* 画面に出ている言葉は札にする。地の文の中で太字にしただけだと、
   どこまでがボタンの名前なのかが読み取れない（強調と区別が付かない） */
.ui {
  display: inline-block;
  padding: 1px 8px; margin: 0 1px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 700; line-height: 1.7;
  white-space: nowrap;
}

/* 手順は番号を丸で出す。段落で書くと「どこまでやったか」が見失われる */
ol.steps { counter-reset: s; list-style: none; margin: 16px 0 0; padding: 0; }
ol.steps > li { position: relative; padding-left: 36px; margin-bottom: 18px; }
ol.steps > li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 2px;
  width: 23px; height: 23px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 押すものと、それを選ぶ場面を2列に割る。札の幅は max-content でそろえる */
.choices {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 10px 14px; align-items: baseline;
  margin: 12px 0 0; padding: 12px 14px;
  background: var(--surface-alt); border-radius: var(--radius);
}
.choices > span:not(.ui) { font-size: 13px; color: var(--ink-sub); }
/* 列の幅は一番長い札に合う。中で伸ばして幅をそろえないと、左端は揃っても右端がばらつく */
.choices > .ui { display: block; text-align: center; }

main.guide .section > h3 {
  margin: 26px 0 8px; font-size: 15px; font-weight: 700;
  padding-top: 16px; border-top: 1px solid var(--line);
}
main.guide .section > h3:first-of-type { padding-top: 0; border-top: 0; }
main.guide .section > p { margin: 0 0 8px; font-size: 14px; line-height: 1.85; }
/* 答えの行。見出しのすぐ下に置いて、理由より先に目に入るようにする */
main.guide .fix {
  margin: 0 0 10px; padding: 9px 14px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-alt);
  font-weight: 700;
}

/* 目次は項目名が短い。1列のまま縦に積むと、広い画面で右半分が丸ごと余る。
   広いときだけ札を並べた格子にする（設定の索引は1列のままでよい——あちらは
   項目ごとの説明が長く、2列にすると折り返しが増える） */
@media (min-width: 640px) {
  main.guide .menu-list {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    background: none; border: 0; border-radius: 0; overflow: visible;
  }
  main.guide .menu-list a {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface);
  }
}

/* 狭い画面では札の列を作らず、札の下に説明を置く（札が折り返して読めなくなる） */
@media (max-width: 520px) {
  .choices { grid-template-columns: 1fr; gap: 4px; }
  .choices > span:not(.ui) { margin-bottom: 8px; }
}

@media (min-width: 720px) {
  .guide-why { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 索引 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr);  /* 予定を足して6つ（2026-10-11） */
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 2px; color: var(--ink-sub); text-decoration: none; font-size: 10px;
}
.tabbar a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tabbar a.on { color: var(--rail); font-weight: 700; }
.tabbar a.on svg { stroke: var(--gold); }
.tabbar .brand { display: none; }
/* 接続の状態はPCの索引にだけ置く。スマホの索引は5枠の格子で、
   6つめを足すと項目が潰れる。不通はバナーで出るので隠しても気づける */
.tabbar .conn { display: none; }

/* ---------- ログイン ---------- */
.login-wrap {
  max-width: 420px; margin: 9vh auto 0; padding: 32px 28px 36px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.login-wrap h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.login-wrap p.lead { margin: 0 0 20px; font-size: 13px; color: var(--ink-sub); }
.steps { margin: 14px 0; padding-left: 1.3em; font-size: 13px; line-height: 1.9; color: var(--ink-sub); }
.secret-box {
  font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .1em;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; word-break: break-all; user-select: all;
}

@media (max-width: 767px) {
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; width: 100%; }
  .tbl tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    padding: 13px 14px; border-bottom: 1px solid var(--line);
  }
  .tbl tbody tr:last-child { border-bottom: 0; }
  .tbl td { display: block; padding: 0; border: 0; font-size: 12px; color: var(--ink-sub); }
  .tbl td.wide { order: 10; flex-basis: 100%; font-size: 15px; color: var(--ink); }
  .tbl.kv tr { display: block; }
  .tbl.kv th { display: block; width: auto; padding: 10px 14px 0; border: 0; }
  .tbl.kv td { padding: 0 14px 10px; font-size: 15px; color: var(--ink); }
  /* スマホでも「列」に見えるよう、行の幅いっぱいの帯にする
     （小さな札にすると、行の途中に印が浮いているようにしか見えない） */
  .tbl .age-0, .tbl .age-1, .tbl .age-2, .tbl .age-3, .tbl .age-4 {
    order: 9;
    flex-basis: 100%;
    margin: 4px 0 2px;
    padding: 3px 10px;
    border-radius: 4px;
  }
  .appbar .who { display: none; }
}

@media (min-width: 768px) {
  .filterbar { display: flex; flex-wrap: wrap; align-items: center; }
  .filterbar input[type=text], .filterbar select { width: auto; min-width: 10em; }
  .filterbar-actions { grid-column: auto; }
  .btn { width: auto; min-width: 11em; }
  .btn + .btn { margin-left: 10px; }
}

@media (min-width: 960px) {
  .appbar { padding-left: calc(var(--railw) + 28px); }
  /* 「← 戻る」は見出しと同じ行の左に置く（上に1段使うと、見出しの帯が無駄に縦に伸びる）。
     スマホは幅が狭く右にボタンもあるので、見出しの上のまま */
  .appbar h1 .back {
    display: inline-block; vertical-align: 4px;
    margin: 0 12px 0 0; padding: 4px 10px;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-size: 12px; line-height: 1.4;
  }
  .appbar h1 .back:hover { background: var(--surface-alt); text-decoration: none; }
  main {
    margin: 0 auto;
    padding: 28px 32px 56px;
    padding-left: calc(var(--railw) + 32px);
    max-width: calc(860px + var(--railw));
  }
  main.wide { max-width: calc(1240px + var(--railw)); }
  .tabbar {
    top: 0; right: auto; bottom: 0;
    width: var(--railw); height: 100%;
    display: flex; flex-direction: column; justify-content: flex-start;
    background: var(--rail); border-top: 0; border-right: 1px solid var(--line);
    padding: 0;
  }
  .tabbar.has-image {
    background:
      linear-gradient(var(--rail-veil), var(--rail-veil)),
      var(--rail-image) center / cover no-repeat,
      var(--rail);
  }
  .tabbar .brand {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 2px; min-height: 76px; padding: 0 22px;
    color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .02em;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .tabbar .brand span { font-size: 10px; font-weight: 400; color: rgba(234, 240, 237, .6); }
  .tabbar a {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 50px; margin: 6px 12px; padding: 0 14px;
    border-radius: var(--radius);
    font-size: 14px; color: rgba(234, 240, 237, .78);
  }
  .tabbar a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .tabbar a.on { background: rgba(255, 255, 255, .12); color: #fff; }
  .tabbar a.on svg { stroke: var(--gold); }
  .tabbar a svg { width: 19px; height: 19px; }
  /* 索引の足元。項目の並びから離して、状態の表示だと分かるようにする */
  .tabbar .conn {
    display: flex; margin-top: auto; margin-bottom: 14px;
    min-height: 38px; font-size: 12px; color: rgba(234, 240, 237, .55);
  }
  .tabbar .conn i {
    width: 7px; height: 7px; border-radius: 50%; flex: none;
    background: var(--matsu);
  }
  .tabbar .conn.is-down { color: #ffc9c0; font-weight: 700; }
  .tabbar .conn.is-down i { background: var(--shu); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 3つの箱と受信箱（片づける画面。主にスマホ） ---------- */
/* 一覧の切り替えタブ。箱を4つ並べる形をやめた。
   ホームで廃止した数字ボックスと同じ見た目になるうえ、
   これは「数字の表示」ではなく「いまどれを見ているか」を示すリンクなので、
   箱では選択状態が伝わらなかった。下線で選ぶ帯にする。
   狭い画面ではタブが4つ入らないので、横に逃がす */
.boxes {
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.boxes a {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-sub);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.boxes a b {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}
.boxes a:hover { color: var(--ink); }
.boxes a.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--gold); }
.boxes a.on b { color: var(--accent); }

.today-strip {
  margin: 0 0 18px;
  padding: 12px 16px;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
}
.today-strip span { font-weight: 700; margin-right: 10px; }

.inbox-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--shu);
  border-radius: var(--radius);
  padding: 18px;
  margin: 0 0 24px;
}
.inbox-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 12px; font-size: 12px; color: var(--ink-sub);
}
.inbox-head .no { font-size: 20px; font-weight: 700; color: var(--ink); text-decoration: none; }
.inbox-head .elapsed { margin-left: auto; font-weight: 700; }
.inbox-head .elapsed.is-late { color: var(--shu); }
.inbox-card .flash { margin-top: 14px; }
.inbox-card .flash form { margin-top: 8px; }
.inbox-reply { margin-top: 8px; }
/* 対応の欄を開くボタン。閉じているときは主役のボタンに見せ、開いたら控えめにする */
.inbox-work { margin-top: 16px; }
.inbox-work > summary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 16px; cursor: pointer; list-style: none;
  background: var(--accent); color: #fff; border-radius: var(--radius);
  font-size: 15px; font-weight: 700;
}
.inbox-work > summary::-webkit-details-marker { display: none; }
.inbox-work > summary::after { content: "＋"; font-weight: 400; }
.inbox-work[open] > summary {
  background: var(--surface); color: var(--ink-sub); border: 1px solid var(--line);
  min-height: 40px; font-size: 13px;
}
.inbox-work[open] > summary::after { content: "閉じる −"; }
.act-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.act-row form { margin: 0; }
.act-row .btn { margin-top: 0; }
.skip-back { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.skip-back .note { margin: 0; }
.skip-back .btn { margin-top: 0; }

/* ---------- ダッシュボード（見る画面） ---------- */

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 12px; color: var(--ink-sub); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
details.figures { margin-top: 12px; }
details.figures > summary { font-size: 12px; color: var(--ink-sub); cursor: pointer; }
details.figures table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
details.figures th, details.figures td {
  padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left;
  font-variant-numeric: tabular-nums;
}
details.figures th { font-size: 11px; color: var(--ink-sub); font-weight: 700; }
/* 保守用の値は表の左列が見出し。幅を揃えないと URL の長さで毎行ずれる */
details.figures td code { word-break: break-all; }


@media (min-width: 900px) {
}

/* ==========================================================================
   テーマのトークンと、ホームの格子（2026-09-19 の作り直し）

   図の色もここで決める。charts.py は var(--…) を SVG に書き出すだけにしてある
   （hex を焼き込むと、地を暗くしたときに図だけ白地向けのまま取り残される）。
   ========================================================================== */
:root {
  --series-1: #2a78d6;
  --series-2: #c08a2e;
  --chart-grid: #e1e0d9;
  --chart-axis: #c3c2b7;
  --chart-muted: #898781;
  --chart-ink: #23272c;
  --chart-surface: #ffffff;
}

/* 暗い地。地と面の明暗だけを入れ替えるのではなく、
   線は明るく・面は地より少し明るく、という順序を保つ（沈んで見えなくなるため） */
[data-theme="dark"] {
  --bg: #12161a;
  --surface: #1a2026;
  --surface-alt: #222a31;
  --ink: #e8edf1;
  --ink-sub: #9aa7b2;
  --line: #2c353d;
  --rail: #0e1418;
  --rail-veil: rgba(14, 20, 24, .85);
  --rail-ink: #e8edf1;
  --gold: #d9a441;
  --shu: #e8705f;
  --yamabuki: #d9a441;
  --matsu: #5fb98a;
  --ai: #6aa9e9;
  --series-1: #5aa2f0;
  --series-2: #e0ab4d;
  --chart-grid: #2c353d;
  --chart-axis: #3b4650;
  --chart-muted: #9aa7b2;
  --chart-ink: #e8edf1;
  --chart-surface: #1a2026;
}

/* ---- ホーム: 数字の行（等幅の箱4つをやめる） ----
   箱に入れると「同じ重さの4つ」に見え、いちばん見てほしい未返答が埋もれる。
   罫線で区切った1行にして、数字そのものを大きく出す */
.figure-row {
  display: flex; flex-wrap: wrap; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin: 0 0 16px;
}
.figure-row > a {
  flex: 1 1 10em; min-width: 0; padding: 16px 20px;
  color: inherit; text-decoration: none;
  border-left: 1px solid var(--line);
}
.figure-row > a:first-child { border-left: 0; }
.figure-row > a:hover { background: var(--surface-alt); }
.figure-row .n { display: block; font-size: 34px; font-weight: 700; line-height: 1.1; }
.figure-row .k { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-sub); }
.figure-row .is-warn .n { color: var(--shu); }
/* ホームで一番見てほしい数（やること）。カードに色を敷き、数字と文字は白で抜く */
.figure-row > a.is-todo { background: var(--hero-bg); color: var(--hero-ink); }
.figure-row > a.is-todo:hover { background: var(--hero-bg); filter: brightness(1.12); }
.figure-row > a.is-todo .k { color: rgba(234, 240, 237, .85); }
.figure-row > a.is-todo .go { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--gold); }

/* ---- ホーム: 格子 ----
   1カラムで積むと1440pxで右に400px余る。幅に応じて列を増やす */
.dash { display: grid; grid-template-columns: 1fr; gap: 16px; }
.dash > .panel-box { min-width: 0; }
.panel-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.panel-box > h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.panel-box > p.sub { margin: 0 0 14px; font-size: 12px; color: var(--ink-sub); }
.panel-box svg { width: 100%; height: auto; display: block; }
/* 円リングは数字が主役なので、図の幅を絞って中央に置く */
.panel-box.ring-box { display: flex; align-items: center; gap: 18px; }
.panel-box.ring-box svg { width: 132px; flex: none; }
.panel-box.ring-box .ring-note { min-width: 0; }
.panel-box.ring-box h3 { margin-bottom: 4px; }

@media (min-width: 900px) {
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash > .col-2 { grid-column: span 2; }
}
@media (min-width: 1280px) {
  .dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash > .col-2 { grid-column: span 2; }
  .dash > .col-3 { grid-column: span 3; }
}

/* ---- 図の登場 ----
   開いた瞬間に根元から伸びる。見た目だけでなく、
   「数字が更新された」ことに気づける実用も兼ねる。
   **動きを減らす設定の端末では止める。** 高齢の利用者もいる画面で、
   勝手に動く要素は不快感や酔いの原因になる */
@keyframes g-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes g-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-ring { to { stroke-dashoffset: 0; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }

/* SVGの図形は既定だと要素の原点で拡大される。fill-box にしないと
   棒が自分の根元ではなく画布の隅から伸びる */
.g-rise, .g-grow { transform-box: fill-box; }
.g-rise { transform-origin: bottom; animation: g-rise .55s cubic-bezier(.22, 1, .36, 1) both; }
.g-grow { transform-origin: left; animation: g-grow .55s cubic-bezier(.22, 1, .36, 1) both; }
.g-ring { stroke-dashoffset: var(--arc); animation: g-ring .9s cubic-bezier(.22, 1, .36, 1) .1s forwards; }
.g-fade { animation: g-fade .7s ease-out .15s both; }

@media (prefers-reduced-motion: reduce) {
  .g-rise, .g-grow, .g-fade { animation: none; }
  .g-ring { stroke-dashoffset: 0; animation: none; }
}

/* ---- 状態の色 ----
   札（.badge）と知らせの帯（.flash）は同じ配色を共有している。
   別々に持つと、片方だけ直して意味がずれる（実際に別々の hex で書かれていた）。
   **地図のピンと二次元コードの白はここに入れない。** 地図のタイルは
   明暗どちらでも明るいので、暗い地に合わせて色を変えると地図上で見えなくなる */
:root {
  --tone-neutral-ink: #2b3a4a; --tone-neutral-bg: #eef1f5; --tone-neutral-line: #d8e0e8;
  --tone-info-ink:    #2b4f7d; --tone-info-bg:    #eaf1f9; --tone-info-line:    #d3e0ef;
  --tone-ok-ink:      #235437; --tone-ok-bg:      #e9f4ed; --tone-ok-line:      #cfe6d9;
  --tone-warn-ink:    #7d5510; --tone-warn-bg:    #fdf3e2; --tone-warn-line:    #f0e0c0;
  --tone-danger-ink:  #93261a; --tone-danger-bg:  #fdecea; --tone-danger-line:  #f6d4cf;
  --tone-done-ink:    #4b5a51; --tone-done-bg:    #eef1ee; --tone-done-line:    #dbe2dc;
  --tone-quiet-ink:   #5b6470; --tone-quiet-bg:   #eef1f4; --tone-quiet-line:   #dde3e9;
  --flash-base-ink:   #23415f;
  /* 受付からの経過。1色の濃淡だけで放置の長さを表す */
  --age-0: #fdfbfa; --age-1: #fdf3f1; --age-2: #fbe4df; --age-3: #f6d0c7; --age-4: #efb6a9;
  --line-strong: #cfd6dd;   /* 触れたときの枠 */
  --field-line:  #ccd3da;   /* 入力欄の枠 */
  --danger-line: #e2b6b0;
  --rail-solid-hover: #2c4f47;
  --gold-hover: #d29b3c;
  --on-gold: #1f1a0e;
}

[data-theme="dark"] {
  --tone-neutral-ink: #c3ced8; --tone-neutral-bg: #252d35; --tone-neutral-line: #323c46;
  --tone-info-ink:    #9ec5ef; --tone-info-bg:    #1b2a3a; --tone-info-line:    #2a3d52;
  --tone-ok-ink:      #8fd3ae; --tone-ok-bg:      #162a20; --tone-ok-line:      #254634;
  --tone-warn-ink:    #e6c17a; --tone-warn-bg:    #2e2416; --tone-warn-line:    #463a22;
  --tone-danger-ink:  #f0a79a; --tone-danger-bg:  #331d19; --tone-danger-line:  #4d2b25;
  --tone-done-ink:    #a9b6ad; --tone-done-bg:    #222a25; --tone-done-line:    #323b34;
  --tone-quiet-ink:   #a4adb8; --tone-quiet-bg:   #242a31; --tone-quiet-line:   #333b44;
  --flash-base-ink:   #9ec5ef;
  /* 暗い地では淡いピンクが沈むので、赤みを残したまま暗い側へ振る */
  --age-0: #1d2227; --age-1: #2a1f1e; --age-2: #38241f; --age-3: #4a2a22; --age-4: #5d3228;
  --line-strong: #3a444e;
  --field-line:  #3a444e;
  --danger-line: #5d3228;
  --rail-solid-hover: #1a242a;
  --gold-hover: #c9922f;
  --on-gold: #1f1a0e;
}

/* 「やること」の帯。明るい地では深緑がそのまま主役になるが、
   暗い地では地（--bg）と近い明度になって輪郭が消えていた。
   暗い側だけ、地より明るい緑寄りの面にして帯として立てる */
:root { --hero-bg: var(--rail); --hero-ink: #fff; }
[data-theme="dark"] { --hero-bg: #17241f; --hero-ink: #e8edf1; }

/* 明暗の切替ボタン。上の帯のログアウトと並ぶので、同じ見た目に揃える
   （.appbar button の指定を継いでいる）。文字は「いまの状態」ではなく
   「押すとどうなるか」を出す */
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
.theme-toggle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* 上の帯は幅が限られている。スマホでは切替の文字を隠して絵だけにする。
   ボタンが2つ並ぶと「ライ／ト」「ログア／ウト」と両方が2行に折れ、帯が間延びした。
   文字を消すぶん、読み上げ用の名前は処理側（base.html）で必ず付けている */
.appbar button { white-space: nowrap; }
@media (max-width: 767px) {
  .theme-toggle .theme-label { display: none; }
  .theme-toggle { padding-left: 11px; padding-right: 11px; }
}

/* 主役の操作（記録する・返答して次へ・この要望でしたこと）の色。
   **サイドバー（--rail）と兼用しない。** 暗い地ではサイドバーを黒に近づけるので、
   兼用していると主役のボタンまで面と同じ暗さになり、どれを押せばよいか分からなくなる。
   明るい地では従来どおり深緑（値は --rail と同じなので見た目は変わらない） */
:root { --accent: var(--rail); --accent-hover: var(--rail-solid-hover); }
[data-theme="dark"] { --accent: #2f6b5b; --accent-hover: #3a8270; }

/* 項目名のクリックで並べ替える（PCのみ。767px以下は thead を出していない）。
   見出しは元々 11px の小さな文字なので、リンクでも色は変えず下線も出さない。
   いま何で並んでいるかは矢印で示す */
.th-sort {
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  /* **押せることが見た目で分かるようにする。** リンクにしただけでは、
     隣の押せない項目名（カテゴリ／内容）と字面が同じで区別が付かなかった。
     色は変えない — 項目名は11pxの小さな文字で、色を足すと列の落ち着きが崩れる。
     点線だけなら、押せる列と押せない列の差が出て、地味さも保てる */
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}
.th-sort:hover { color: var(--ink); text-decoration: underline solid; }

/* 見出し行の右端に置く並び順。単独の帯にすると1本ぶん丸ごと余白になる */
.section > h2 .h2-sort {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0 auto; font-size: 12px; font-weight: 400;
}
.section > h2 .h2-sort select { width: auto; min-width: 9em; margin: 0; padding: 6px 30px 6px 10px; font-size: 13px; min-height: 36px; }
/* 「並び順」は1語なので折らない（縦に1文字ずつ並んでいた） */
.section > h2 .h2-sort .set-k { white-space: nowrap; }
/* スマホでは見出しと並び順を1行に詰めない。詰めると見出しが2行に折れ、
   選択欄も幅が足りず「受付が新しい順」の末尾が切れていた。
   並び順は見出しの下の行に回し、選択欄を横いっぱいに使う */
@media (max-width: 640px) {
  .section > h2:has(.h2-sort) { flex-wrap: wrap; row-gap: 10px; }
  .section > h2 .h2-sort { flex-basis: 100%; margin-left: 0; }
  .section > h2 .h2-sort select { flex: 1; min-width: 0; }
}

/* カーソルを乗せた行に重ねる膜。明るい地では黒、暗い地では白。
   固定色ではなく半透明にするのは、下にある放置日数の濃淡を潰さないため */
:root { --row-hover: rgba(16, 24, 32, .05); }
[data-theme="dark"] { --row-hover: rgba(255, 255, 255, .055); }

/* 活動の種別。**状態の札とは別クラスにする** — .badge は25テンプレート・約60か所で
   使われる共通部品で、ここに種別の色を直接足すと要望一覧の状態札に混ざり、
   「急ぎ」を示す朱が埋もれる。
   10種類に10色は割り当てない（models.py にあるとおり、実際に使われるのは
   担当課へ確認と現場確認に集中している）。**何をしたか**で4つに束ね、
   既存のトーンを再利用する */
.badge.kind-site_visit,
.badge.kind-inspection,
.badge.kind-visit {
  color: var(--tone-info-ink); background-color: var(--tone-info-bg); border-color: var(--tone-info-line);
}
.badge.kind-dept_inquiry,
.badge.kind-resident_call,
.badge.kind-stakeholder_coord,
.badge.kind-meeting,
.badge.kind-conference {
  color: var(--tone-warn-ink); background-color: var(--tone-warn-bg); border-color: var(--tone-warn-line);
}
.badge.kind-assembly_question {
  color: var(--tone-ok-ink); background-color: var(--tone-ok-bg); border-color: var(--tone-ok-line);
}
.badge.kind-reply,
.badge.kind-other {
  color: var(--tone-neutral-ink); background-color: var(--tone-neutral-bg); border-color: var(--tone-neutral-line);
}

/* 種別の札は幅を揃える。状態の列（.tbl td.st）と同じ扱い——
   長さがまちまちだと、縦に並んだとき札の端がガタついて目が落ち着かない。
   いちばん長いのは「担当課へ確認」の6文字 */
.tbl td.kind .badge { min-width: 8.5em; text-align: center; }  /* 8em(88px) では「担当課へ確認」だけ89pxになり、1pxだけ端がガタついた */

/* カーソルを乗せた行の膜を、その行の種別の色にする。
   膜の色は --row-hover ひとつで決まるので、行ごとに変数を差し替えるだけでよい
   （ホバーの仕組み自体は触らない）。
   活動記録の行には放置日数の色が付いていないので、塗っても他の意味と衝突しない。
   薄く重ねるだけにする——濃くすると本文が読みにくくなる */
.tbl tbody tr.kind-site_visit,
.tbl tbody tr.kind-inspection,
.tbl tbody tr.kind-visit { --row-hover: rgba(43, 79, 125, .10); }
.tbl tbody tr.kind-dept_inquiry,
.tbl tbody tr.kind-stakeholder_coord,
.tbl tbody tr.kind-meeting,
.tbl tbody tr.kind-conference { --row-hover: rgba(125, 85, 16, .10); }
.tbl tbody tr.kind-assembly_question { --row-hover: rgba(35, 84, 55, .10); }

[data-theme="dark"] .tbl tbody tr.kind-site_visit,
[data-theme="dark"] .tbl tbody tr.kind-inspection,
[data-theme="dark"] .tbl tbody tr.kind-visit { --row-hover: rgba(158, 197, 239, .12); }
[data-theme="dark"] .tbl tbody tr.kind-dept_inquiry,
[data-theme="dark"] .tbl tbody tr.kind-stakeholder_coord,
[data-theme="dark"] .tbl tbody tr.kind-meeting,
[data-theme="dark"] .tbl tbody tr.kind-conference { --row-hover: rgba(230, 193, 122, .12); }
[data-theme="dark"] .tbl tbody tr.kind-assembly_question { --row-hover: rgba(143, 211, 174, .12); }

/* タグの札も幅を揃える（活動記録の種別と同じ扱い）。
   1人に複数付くと縦に並ぶので、幅がまちまちだと段差が目立つ。
   タグは取り込みで自由に増える文字列なので、色は割り当てない
   （固定の対応表を作れず、新しいタグだけ無色になってしまう） */
.tbl td.tags .badge { min-width: 8.6em; text-align: center; margin-bottom: 2px; }  /* 実測: いちばん長い「ボランティア」が89px。余裕を6px足した */

/* 相談者の連絡先（名前・電話）。電話をかけるのが次の一手なので、本文の直後に大きめに出す */
.contact-line { margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.contact-line a { white-space: nowrap; }
.contact-line .sub { font-weight: 400; color: var(--ink-sub); font-size: 13px; }

/* 住民の記入した場所と「地図で開く」を1行に並べる */
.card .body.place-row { display: flex; -webkit-line-clamp: unset; overflow: visible; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.card .body.place-row .btn { margin: 0; }

/* 要望の詳細: 地区は「場所」の見出しのすぐ横（並び順のように右端へは寄せない） */
.section > h2 .h2-area { margin-left: 16px; }
.section > h2 .h2-area select.is-unset { border-color: var(--shu); color: var(--shu); font-weight: 700; }
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.place-actions .btn { margin: 0; }

/* 要望の詳細: 見出しの横に相談者の名前と電話（押せば電話がかかる） */
.appbar h1 .h1-contact { margin-left: 14px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.appbar h1 .h1-contact a { margin-left: 6px; white-space: nowrap; }
.appbar h1 .h1-contact .sub-inline { font-size: 12px; font-weight: 400; color: var(--ink-sub); }
@media (max-width: 640px) {
  /* スマホでは見出しの下の行に回す（横に詰めると見出しが折れる） */
  .appbar h1 .h1-contact { display: block; margin: 2px 0 0; font-size: 15px; white-space: normal; }
}
#site-map { height: 320px; border-radius: 10px; margin-top: 12px; border: 1px solid var(--line); }

/* 要望の詳細「この要望でしたこと」: 住民に伝える欄は押したときだけ開く */
details.tell { margin: 14px 0 12px; border-top: 1px dashed var(--line); padding-top: 10px; }
details.tell > summary { cursor: pointer; font-weight: 600; color: var(--accent, var(--ink)); list-style: none; }
details.tell > summary::-webkit-details-marker { display: none; }
details.tell[open] > summary { margin-bottom: 4px; }
/* 終える操作は、記録とは別の小さな帯にする */
.end-ops { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.end-ops h3 { margin: 0 0 8px; font-size: 14px; }
.end-ops form { margin: 0; }
.end-ops #close-form { margin-top: 12px; }
.field-row[hidden] { display: none; }

/* 一覧の行の色は「急ぐもの」だけ（全部に濃淡を付けると急ぎが読めなかった） */
.tbl tbody tr.is-late { background-color: var(--age-2); }

/* 住民に伝える: 「これから届ける」と「もう伝えた」を分けて並べる */
.tell-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
.tell-group .tell-k { font-size: 12px; font-weight: 700; color: var(--ink-sub); min-width: 6.5em; }
.tell-group .chips { margin: 0; }
.section > h2 .h2-link { margin-left: auto; font-size: 13px; font-weight: 400; }

/* 設定: 地区・カテゴリを1行ずつ編集する */
.list-edit { margin: 6px 0 12px; }
.list-edit .list-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.list-edit .list-row input { flex: 1; margin: 0; }
.list-edit .list-row .btn { margin: 0; min-width: 2.6em; }

/* 活動記録一覧の「活動報告に 使う」切り替え。押すたびに入れる・外す */
.pick-form { margin: 0; }
.pick {
  font: inherit; font-size: 13px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-sub);
}
.pick:hover { border-color: var(--tone-ok-line); color: var(--tone-ok-ink); }
.pick.on { color: var(--tone-ok-ink); background: var(--tone-ok-bg); border-color: var(--tone-ok-line); font-weight: 600; }

/* 活動記録一覧の「どこで・誰と」。本文の上に小さく出す */
.act-where { display: block; font-size: 12px; color: var(--ink-sub); margin-bottom: 2px; }

/* 相談の詳細の操作の帯にある地区。未設定のあいだは赤くする */
.setbar .set-area select.is-unset { border-color: var(--shu); color: var(--shu); font-weight: 700; }
/* 畳んだ枠の見出しに添える中身（例: 場所の枠に住所） */
details.panel > summary .summary-sub { font-size: 13px; font-weight: 400; color: var(--ink-sub); }
.place-edit { margin-top: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* 相談の中身のすぐ下に出す、住民が示した場所（と議員が直した場所） */
.voice-place { margin-top: 12px; display: grid; gap: 6px; }
.voice-place .place-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.voice-place .set-k { font-size: 12px; font-weight: 700; color: var(--ink-sub); min-width: 9em; }
.voice-place .sub { color: var(--ink-sub); }
.voice-place .btn.small { margin: 0; }
/* 「解決した」「対応できなかった」を押したら、そのボタンを選んだ見た目にする */
.end-ops .end-pick[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.end-ops #close-open[aria-pressed="true"] { background: var(--shu); border-color: var(--shu); }
.end-ops #done-form { margin-top: 12px; }
#place .site-clear { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
/* 「これまでの経過」の横の、住民の画面での状態 */
.section > h2 .h2-resident { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--ink-sub); }
.place-edit { position: relative; }
.place-edit-cancel { position: absolute; top: 10px; right: 14px; background: none; border: 0; padding: 4px; font: inherit; font-size: 13px; color: var(--ink-sub); text-decoration: underline; cursor: pointer; }
.place-edit-open[hidden] { display: none; }


/* =====================================================================
   C案「やわらか」（2026-10-11 施主が3案から選んだ）
   AIで作ったような「全部が同じ白い角丸の箱・丸い札・端から端まで」をやめる。
   - 地は生成り、面は白。枠線ではなく弱い影で面を分ける
   - 見出しは丸みのあるゴシック（Zen Maru Gothic）、本文は UD ゴシック
   - 相談の詳細はPCで2列（左=読む、右=操作）。入力欄は中身に合った幅
   上の決まりをここでまとめて上書きしている。戻すときはこの節を消せばよい
   ===================================================================== */
/* 明るい地のときだけ。:root のままだと、上の暗い地（[data-theme="dark"]）の色まで上書きしてしまう */
:root:not([data-theme="dark"]) {
  --bg: #f2eee6;
  --surface: #ffffff;
  --surface-alt: #f7f4ee;
  --ink: #2b2a27;
  --ink-sub: #756f63;
  --line: #ebe5d9;
  --line-strong: #ddd5c6;
  --field-line: #d8d0c0;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(60, 50, 30, .08);
  --tone-neutral-ink: #4a4436; --tone-neutral-bg: #f1ede4; --tone-neutral-line: #e6dfd1;
  --tone-quiet-ink:   #6b6558; --tone-quiet-bg:   #f1eee8; --tone-quiet-line:   #e5e0d6;
}
[data-theme="dark"] {
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
html, body { font-family: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.appbar h1, .section > h2, .section > h3, details.panel > summary, .end-ops h3, .login-card h1 {
  font-family: "Zen Maru Gothic", "BIZ UDPGothic", sans-serif;
}
.section > h2 { font-size: 18px; }
.appbar { background: var(--bg); border-bottom-color: transparent; }

/* 面は枠線ではなく弱い影で分ける（枠のある箱が並ぶと、どれも同じ重さに見える） */
.card, .tbl-wrap, .setbar, details.panel, .figure-row, .stat, .end-ops, .filter-fold > summary {
  border-color: transparent;
  box-shadow: var(--shadow);
}
.card:hover { border-color: transparent; box-shadow: 0 2px 8px rgba(60, 50, 30, .12); }
.empty { border-color: var(--line-strong); }
.voice-body { border: 0; background: var(--surface-alt); border-radius: 10px; font-size: 17px; }

/* 札は塗りだけ。枠と濃淡のグラデーションを外す */
.badge, [data-theme="dark"] .badge { background-image: none; border-color: transparent; }

.btn { border-radius: 10px; }
.chips label { border-radius: 10px; }
input, select, textarea { border-radius: 10px; }

/* 入力欄は中身に合った幅（日付・時刻・電話番号まで全幅にしない） */
input[type=date], input[type=datetime-local], input[type=time], input[type=tel] { width: auto; max-width: 100%; }

/* ---- 相談の詳細: 読む面（相談の中身）と操作の面を、白い面2枚にする ---- */
.section.sheet {
  background: var(--surface); border-radius: 16px; padding: 22px 24px;
  box-shadow: var(--shadow);
}
.section.sheet#ops .setbar,
.section.sheet#ops details.panel,
.section.sheet#ops .end-ops { background: var(--surface-alt); box-shadow: none; border-radius: 10px; }
.section.sheet#ops details.panel[open] > summary { border-bottom-color: transparent; }
.voice-place .btn.small { min-height: 30px; padding: 4px 12px; font-size: 12px; }
@media (max-width: 767px) {
  .section.sheet { padding: 16px 14px; border-radius: 14px; }
}
/* PCでは2列。左に相談の中身と経過、右に操作。
   右だけを付いてこさせる（sticky＋右の列だけのスクロール）は、二重スクロールで使いづらかった（施主）ので、
   両方ともページと一緒に流す */
@media (min-width: 1100px) {
  main:has(> #ops) {
    max-width: calc(1200px + var(--railw));
    display: grid; grid-template-columns: minmax(0, 1fr) 440px;
    column-gap: 40px; align-items: start;
  }
  main:has(> #ops) > * { grid-column: 1; min-width: 0; }
  main:has(> #ops) > #ops { grid-column: 2; grid-row: 1 / span 40; }
  main:has(> #ops) .voice-body { max-width: 40em; }
}

/* 塗りのボタンのグラデーション「中」（2026-10-11 施主が今・中・強から選んだ。住民側とそろえる）。
   同じ深緑の中の濃淡だけ。押したとき・暗い地でも少し明るさを変える */
.btn:not(.secondary):not(.danger) {
  background: linear-gradient(to bottom, #3c7262 0%, #1d3731 100%);
  box-shadow: 0 2px 4px rgba(20, 40, 35, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn:not(.secondary):not(.danger):hover { background: linear-gradient(to bottom, #45806e 0%, #234239 100%); }
[data-theme="dark"] .btn:not(.secondary):not(.danger) {
  background: linear-gradient(to bottom, #3f8270 0%, #275c4f 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* ボタン以外の深緑の塗りも同じ濃淡にそろえる（施主「ここがグラデじゃない」）。
   ホームの「やること」は上の帯と同じ斜め、押せる帯・選んだチップ・選んだ終え方はボタンと同じ縦 */
.figure-row > a.is-todo,
.figure-row > a.is-todo:hover { background: linear-gradient(120deg, #3f7a66 0%, #23403a 60%, #182d28 100%); }
.inbox-work > summary,
.chips input:checked + label,
.end-ops .end-pick[aria-pressed="true"]:not(#close-open) { background: linear-gradient(to bottom, #3c7262 0%, #1d3731 100%); }
[data-theme="dark"] .figure-row > a.is-todo,
[data-theme="dark"] .figure-row > a.is-todo:hover { background: linear-gradient(120deg, #3f8270 0%, #275c4f 60%, #1f4a3f 100%); }
/* 暗い地では、周りの面（#1a2026）と同じ暗さだと見分けがつかなかった（施主）。ボタンと同じくらいの明るさにする */
[data-theme="dark"] .inbox-work > summary,
[data-theme="dark"] .chips input:checked + label,
[data-theme="dark"] .end-ops .end-pick[aria-pressed="true"]:not(#close-open) { background: linear-gradient(to bottom, #3f8270 0%, #275c4f 100%); }

/* 暗い地の境目（施主「ダークは見づらい」）。暗い地では影がほとんど見えず、面の境目が消えていた。
   暗い地だけ細い線を戻し、面の中の面（操作の枠・相談の本文）は一段明るくする */
[data-theme="dark"] {
  --surface: #1c2329;
  --surface-alt: #262f37;
  --line: #333e48;
}
[data-theme="dark"] .card, [data-theme="dark"] .tbl-wrap, [data-theme="dark"] .setbar,
[data-theme="dark"] details.panel, [data-theme="dark"] .figure-row, [data-theme="dark"] .stat,
[data-theme="dark"] .end-ops, [data-theme="dark"] .section.sheet {
  border: 1px solid #36424d;
}
[data-theme="dark"] .section.sheet#ops .setbar,
[data-theme="dark"] .section.sheet#ops details.panel,
[data-theme="dark"] .section.sheet#ops .end-ops,
[data-theme="dark"] .voice-body { background: #263039; border-color: #3a4753; }
[data-theme="dark"] .chips label { background: #1c2329; }
/* 活動の記録の地図 */
#act-map { height: 320px; border-radius: 10px; margin-top: 12px; border: 1px solid var(--line); }
.act-map-row { align-items: center; }
.act-map-row .note { margin: 0; }
.link-btn { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--ai); text-decoration: underline; cursor: pointer; }
/* 入力欄の中の右端に置く小さなボタン（活動の記録の「地図で指す」） */
.input-with-btn { position: relative; display: block; }
.input-with-btn input { padding-right: 104px; }
.input-with-btn .in-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 4px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--field-line); background: var(--surface-alt); color: var(--ink);
  font: inherit; font-size: 12px; font-weight: 700;
}
.input-with-btn .in-btn:hover { background: var(--surface); }
.act-map-state { margin-top: 6px; }