:root { --fg: #222; --bg: #fff; --line: #d7d7d7; --accent: #1f6feb; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--fg); background: var(--bg); font-size: 16px;
  font-family: system-ui, "Hiragino Sans", "Meiryo", sans-serif; line-height: 1.6; }
a { color: var(--accent); }
.bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; border-bottom: 1px solid var(--line); }
.bar__title { font-weight: 700; }
.bar__title a { text-decoration: none; color: inherit; }
.bar__user { margin-left: auto; font-size: .9rem; }
.main { max-width: 900px; margin: 0 auto; padding: 1rem; }
.form { display: flex; flex-direction: column; gap: .5rem; max-width: 420px; }
/* 送信先ピッカーのように幅が要る画面用。.form の基本（狭い1カラムの
   フォーム）はログイン・パスワード変更・スタッフ追加のままにしつつ、
   このモディファイアを足した画面だけ .main いっぱい（900px）まで
   広げる。1行の文字入力までは広げたくないので、テキスト系の入力欄は
   下の .form--wide input 側で420pxに戻す。
   セレクタは .form.form--wide（.form と同じ詳細度の単一クラスにしない）
   — こうしないと .form より後ろに書かれているという順序だけで勝っている
   ことになり、.photos img と同じ理由で、誰かが後ろに .form の別ルールを
   足しただけで900px指定が静かに420pxへ戻ってしまう */
.form.form--wide { max-width: none; }
/* スマホでの誤タップを避けるため、入力とボタンは十分な高さを確保する。
   チェックボックス／ラジオはこの対象から外す — ネイティブの見た目ごと
   高さも幅も広がってしまうため（339px×44pxの巨大な箱になった原因）。
   チェックボックス／ラジオ自体の大きさは下の専用ルールで決める */
input:not([type=checkbox]):not([type=radio]), select, textarea, button {
  font-size: 1rem; min-height: 44px; padding: .5rem .6rem;
}
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 1px solid var(--line); border-radius: 4px; width: 100%;
}
/* .form--wide の中でも、1行のテキスト入力や日付・セレクトは900px幅まで
   間延びさせない（タイトル欄が900px幅になっても読みやすくならない）。
   複数行のtextarea（指示内容）と .sites（送信先ピッカー）はここでは
   絞らず、親の幅いっぱいまで広げる。.sites__tools の検索欄
   （input[type=search]）も除外する — 下で flex: 1 1 12rem を指定しており
   自分の幅はそちらに任せる。420pxで止めると、900px近いツールバーの中で
   検索欄の右に説明のつかない余白が残る */
.form--wide input:not([type=checkbox]):not([type=radio]):not([type=search]),
.form--wide select {
  max-width: 420px;
}
/* チェックボックス／ラジオ本体は指で押しやすい44px四方の正方形に保つ。
   横に100%広がる不具合はここで断つ。タップ領域が44pxあれば十分なので、
   これ以上ラベル側を大きくする必要はない（.sites__list label 参照）。
   border/border-radius は書かない — appearance: auto のネイティブ
   コントロールは author の border を無視し、ネイティブテーマの見た目を
   維持したまま width/height だけ効く（Chromeで
   getComputedStyle(checkbox).borderTopWidth を確認済み。border: 6px
   solid red !important でも 0px のままだった）。色を付けたい場合は
   ブラウザが実際に効かせる accent-color を使う */
input[type=checkbox], input[type=radio] {
  width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0;
  flex: none; accent-color: var(--accent);
  /* .form.as_p はチェックボックスをラベルと並べて置くだけで、
     .sites__list label のような行全体をflexにするラッパーがない
     （店舗側の確認・完了報告画面がこれに当たる）。44px四方にした
     チェックボックスはデフォルトのbaseline整列だと上に浮いて見えるため、
     ラベルの行の高さの中央に合わせる */
  vertical-align: middle;
}
button { background: var(--accent); color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.error { color: #b00020; }
.messages { list-style: none; padding: 0; }
@media (max-width: 480px) { .main { padding: .75rem; } .bar__user { width: 100%; margin-left: 0; } }
.issued { border: 1px solid var(--line); border-left: 4px solid var(--accent);
  padding: .75rem 1rem; margin: 1rem 0; }
.issued dt { font-weight: 700; margin-top: .5rem; }
.issued code { font-size: 1.1rem; background: #f4f4f4; padding: .1rem .4rem; }
.muted { color: #666; font-size: .9rem; }
.todo { list-style: none; padding: 0; margin: 1rem 0; }
.todo__row { border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 4px; margin-bottom: .5rem; }
/* 指で押しやすい高さを確保する */
.todo__link { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline;
  min-height: 44px; padding: .6rem .75rem; text-decoration: none; color: inherit; }
.todo__due { font-size: .85rem; color: #666; white-space: nowrap; }
.todo__title { flex: 1 1 60%; font-weight: 600; }
.todo__badge { font-size: .8rem; border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .5rem; white-space: nowrap; }
/* 重要な指示にだけ付く印。6,614件のうち133件しかないので、通常の指示には
   何も足さない。色だけに意味を持たせず、必ず「重要」「最重要」の文字で示す
   （色が見分けられない人や、店内の照明・画面の傾きでも読めるように） */
.todo__emphasis, .importance { font-size: .8rem; font-weight: 700; color: #b00020;
  border: 1px solid #b00020; border-radius: 3px; padding: 0 .3rem; white-space: nowrap; }
.todo--overdue { border-left-color: #d32f2f; }
.todo--overdue .todo__due { color: #d32f2f; font-weight: 700; }
.todo--today { border-left-color: #f9a825; }
.todo--today .todo__due { color: #b26a00; font-weight: 700; }
.todo__warning { color: #b26a00; background: #fff8e1; border: 1px solid #f9a825;
  border-radius: 4px; padding: .6rem .75rem; }
.area-sites { list-style: none; padding: 0; margin: 1rem 0; }
.area-sites__row { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: baseline;
  padding: 0.6em 0; border-bottom: 1px solid #ddd; }
.area-sites__name { font-weight: bold; min-width: 8em; }
.area-sites__counts { display: flex; flex-wrap: wrap; gap: 0.5em; }
.area-sites__count { padding: 0.1em 0.6em; border-radius: 0.2em; background: #eee;
  text-decoration: none; color: inherit; }
.area-sites__count--alert { background: #ffdddd; font-weight: bold; }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; }
.meta dt { color: #666; font-size: .9rem; }
.meta dd { margin: 0; }
.body { margin: 1rem 0; }
.photos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* workorder/_attachment.html のサムネイルは img.thumb（72px、下の .thumb 参照）
   を出すが、.photos の中ではこちらの幅が勝つ（セレクタの詳細度が .thumb 単体より
   高いため）。よってこの1行が .photos 配下のサムネイルを160pxにしている
   ——消すと店舗が報告した写真が72pxに縮む */
.photos img { width: 160px; height: auto; border: 1px solid var(--line); border-radius: 4px; }

.pager { display: flex; gap: 1rem; align-items: center; justify-content: center;
  margin: 1rem 0; }

.sites { border: 1px solid var(--line); border-radius: 4px; padding: .75rem; margin: 1rem 0; }
.sites__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sites__tools input[type=search] { flex: 1 1 12rem; }
.sites__list ul { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem; }
/* このプロジェクトのタップ対象は44pxが基準（input, select, textarea,
   button と同じ）。32pxのままだとチェックボックス（44px四方）だけが
   行内で浮いて見えるので合わせる */
.sites__list label { display: flex; gap: .4rem; align-items: center; min-height: 44px; }

.grid { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.grid th, .grid td { border: 1px solid var(--line); padding: .4rem .5rem; text-align: left;
  vertical-align: top; }
.grid th { background: #f6f6f6; }
/* 店舗別の状況で、日時の下に出す「誰が操作したか」 */
.actor { display: block; font-size: .8rem; color: #666; }
/* .photos の外（店舗別の状況の表）ではこの72pxがそのまま適用される。
   .photos の中では上の .photos img（詳細度が高い）が160pxで上書きする */
.thumb { width: 72px; height: auto; border: 1px solid var(--line); border-radius: 3px; }
/* 狭い画面では横スクロールさせず、表を縦に積む */
@media (max-width: 480px) {
  .grid, .grid thead, .grid tbody, .grid tr, .grid th, .grid td { display: block; }
  .grid thead { display: none; }
  .grid tr { border: 1px solid var(--line); border-radius: 4px; margin-bottom: .5rem; }
  .grid td { border: 0; }
}

/* サムネイルを囲むボタン。見た目は画像そのものにして、ボタンらしさを消す */
.thumb-open { display: inline-block; padding: 0; margin: 0; border: 0;
  background: none; min-height: 0; line-height: 0; cursor: pointer; }

/* 写真をその場で大きく開くビューアー（core/static/core/photo-viewer.js が開閉する）。
   375px 幅でも横にはみ出さず、縦もスクロールなしで収まるよう vw/vh で抑える。
   position は指定しない — dialog:modal に対する position: fixed はUAスタイル
   シートが与えており、詳細度に関係なく作者のCSSが勝つ。ここに
   position: relative を書くと fixed が消え、top-layer 上の要素は
   固定/絶対配置でない限りビューポートではなく文書の初期包含ブロック
   （文書の先頭）を基準に配置される。スクロールして開くと画面外に
   ダイアログが出てしまう不具合を実機で踏んだ（レビュー指摘）。
   ×ボタンの position: absolute は、fixed 配置された dialog が包含
   ブロックになるため、position を書かなくても正しく効く */
.photo-viewer { border: 0; border-radius: 6px; padding: 0;
  max-width: 95vw; max-height: 90vh; background: #000; }
.photo-viewer::backdrop { background: rgba(0, 0, 0, .75); }
.photo-viewer__image { display: block; max-width: 95vw; max-height: 78vh;
  width: auto; height: auto; margin: 0 auto; }
.photo-viewer__name { margin: 0; padding: .5rem 1rem; color: #fff;
  font-size: .85rem; text-align: center; word-break: break-all; }
/* 指で押しやすいよう、他の操作対象と同じ44pxを最小の大きさにする */
.photo-viewer__close { position: absolute; top: 0; right: 0; z-index: 1;
  min-width: 44px; min-height: 44px; border: 0; border-radius: 0 0 0 6px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.6rem; line-height: 1;
  padding: 0; cursor: pointer; }

.kinds { list-style: none; padding: 0; margin: 1rem 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.kinds__link { display: flex; flex-direction: column; gap: .2rem;
  min-height: 64px; padding: .75rem; border: 1px solid var(--line); border-radius: 4px;
  text-decoration: none; color: inherit; }
.kinds__name { font-weight: 700; }
.kinds__hint { font-size: .85rem; color: #666; }

/* 欠品情報の詳細で、誤登録の取り消しボタンを本文から離す。
   返答が来ると出さなくなる（keppin/views_store.py の withdraw 参照） */
.withdraw { margin: 1.5rem 0; }
/* 取り消しボタンは画面で唯一の破壊的操作。デフォルトの button は
   .accent 色で塗られ「送信する」と同じ見た目になり、いちばん目立つ
   ものになってしまう（レビュー指摘）。枠線だけの控えめな見た目にする。
   タップ領域は button 共通ルールの min-height: 44px をそのまま使う */
.btn-muted { background: none; border: 1px solid var(--line); color: #666; }

.filter { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.filter select { max-width: 16rem; }