/* hamko.page の唯一のスタイル。正本は docs/hamko-page/DESIGN.md。
   このファイルを直したら DESIGN.md の表も直す。逆も同じ。

   使う側（全画面がこの4行だけを置く。自前の色・書体・余白を書かない）:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="/static/hamko.css">
     <link rel="stylesheet" href="/static/fonts.css" media="print" onload="this.media='all'">
     <script defer src="/static/hamko-nav.js"></script>

   file:// で開く自己完結の1枚（/pl）は、下の
   WEBFONT:BEGIN 〜 WEBFONT:END を除いた全文をそのまま <style> に埋め込む。
   埋め込んだ中身がこのファイルと一致することは
   pm/projects/realestate-pl/app/test_theme_and_facts.py が検査する。 */

/* WEBFONT:BEGIN */
/* ここに @import は置かない（issue #557）。@import は「hamko.css を落として
   解析し終えてから次を取りに行く」直列の連鎖になり、しかも Google Fonts の CSS は
   149KB あって描画をせき止めていた（初回描画が 280〜450ms 遅れていた）。
   書体は各画面が /static/fonts.css を**描画をせき止めない形で**読む（上の使い方）。
   実体は pm/hamko-page/static/build_fonts_css.py が作る。
   この切れ目は /pl の埋め込みが目印に使うので消さない。 */
/* WEBFONT:END */

/* ---------------------------------------------------------------- トークン */
:root {
  color-scheme: light dark;

  /* 色（用途は DESIGN.md の色トークン表） */
  --ground:#F6F6F2; --card:#FFFFFF; --ink:#22261F; --muted:#5E6257;
  --accent:#2C4F70; --good:#1F6B41; --bad:#93341F; --warn:#7A530B;
  --border:#E1E1D8; --chip:#ECECE4; --band:#C9D6E4;
  --rule:#C9C9BE;          /* 表の外枠・見出し下の強い罫 */
  --field:#8C8C82;         /* 入力欄・ボタンの枠（WCAG 1.4.11 の 3:1 を満たす） */
  --row-alt:#FBFBF7;       /* ゼブラ（1行おきの地） */
  --hover:#EEF2F6;         /* 行のホバー */

  /* 図の色は役割に付ける（dataviz）。実体はここだけが持つ */
  --s1: var(--accent); --s1-lite: var(--band); --s2: var(--warn);
  --s3: var(--good); --neg: var(--bad);
  /* 図の中立色（積み上げの「未評価」「その他」）。明暗で入れ替える。
     入れ替えないと暗い地に大面積の明るい面が残る */
  --n1:#C3C2B7; --n2:#E1E0D9;
  /* 単色の段（濃→淡）。暗いテーマでは向きを反転して沈まないようにする */
  --r1:#0D366B; --r2:#1C5CAB; --r3:#3987E5; --r4:#86B6EF; --r5:#B9D4F5;
  /* 5段の評価（悪い→良い）。明暗で入れ替える */
  --d1:#93341F; --d2:#B4693A; --d3:#C3C2B7; --d4:#3E9A72; --d5:#1F6B41;

  /* 書体 */
  --font-sans:"IBM Plex Sans JP","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-display:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,"Hiragino Sans",monospace;

  /* 余白（4px 刻み。これ以外の値を書かない） */
  --s1x:4px; --s2x:8px; --s3x:12px; --s4x:16px; --s6x:24px; --s8x:32px; --s12x:48px;

  /* 密度 */
  --row-y:6px;             /* 表のセルの上下（行の高さ 32px 相当） */
  --row-x:10px;            /* 表のセルの左右 */
  --radius:8px;
  --nav-h:44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#15171A; --card:#1D2024; --ink:#E8E8E2; --muted:#A2A69B;
    --accent:#8FB4D6; --good:#5FBF8A; --bad:#E08871; --warn:#E0B45C;
    --border:#2E3237; --chip:#2A2E33; --band:#31465C;
    --rule:#3C4148; --field:#767C84; --row-alt:#202429; --hover:#252B31;
    --n1:#5A6068; --n2:#3A4046;
    --d1:#E08871; --d2:#D9A76A; --d3:#5A6068; --d4:#5FBF8A; --d5:#3E9A72;
    --r1:#B9D4F5; --r2:#86B6EF; --r3:#3987E5; --r4:#1C5CAB; --r5:#0D366B;
  }
}

/* ---------------------------------------------------------------- 土台 */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-sans); font-size:14px; line-height:1.6;
  font-feature-settings:"palt" 0;   /* 詰めない。数字と表の桁を揃える */
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:3px;
}

h1, h2, h3, h4 { font-family:var(--font-display); font-weight:700; }
h1 { font-size:1.25rem; line-height:1.4; margin:0 0 var(--s1x); }
h2 { font-size:1rem; line-height:1.4; margin:var(--s6x) 0 var(--s2x);
     padding-bottom:var(--s1x); border-bottom:2px solid var(--rule);
     display:flex; align-items:baseline; gap:var(--s3x); flex-wrap:wrap; }
h3 { font-size:.875rem; line-height:1.5; margin:var(--s4x) 0 var(--s1x); }
h4 { font-size:.8125rem; line-height:1.5; margin:var(--s3x) 0 var(--s1x); color:var(--muted); }
p { margin:0 0 var(--s2x); }
ul, ol { margin:0 0 var(--s2x); padding-left:1.35em; }
li { margin:2px 0; }

/* 数字・ID・コードは等幅で桁を揃える。**見出し（th）には等幅を当てない**。
   見出しは 12px sans（DESIGN 第3節）で、当てると「7日前比（件）」の 7 だけ
   字面が変わって日本語と揃わない（issue #574-7）。桁を揃える相手はセルの値
   だけなので tabular-nums も要らない */
code, .mono, .num, td.num, .big {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
code { font-size:.85em; background:var(--chip); border-radius:4px; padding:0 4px; }
pre { margin:0; }

/* 役割クラス（DESIGN.md タイポグラフィ表と1対1） */
.lbl   { font-size:.75rem; line-height:1.5; color:var(--muted); font-weight:400; }
.sub   { font-size:.8125rem; line-height:1.5; color:var(--muted); }
.fine  { font-size:.75rem; line-height:1.5; color:var(--muted); }
.micro { font-size:.6875rem; line-height:1.45; color:var(--muted); }
.muted { color:var(--muted); }
.small { font-size:.8125rem; }
.big   { font-size:1.5rem; line-height:1.15; font-weight:600; }
.big.bad { color:var(--bad); } .big.good { color:var(--good); } .big.warn { color:var(--warn); }
.hidden, [hidden] { display:none !important; }
.nowrap { white-space:nowrap; }

/* ---------------------------------------------------------------- ナビ（全画面で同じ） */
nav.hamko-nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--s1x) var(--s4x);
  min-height:var(--nav-h); padding:var(--s1x) var(--s4x);
  background:var(--card); border-bottom:1px solid var(--rule);
}
nav.hamko-nav .brand {
  font-family:var(--font-display); font-weight:700; font-size:.9375rem;
  color:var(--ink); white-space:nowrap; padding:5px 0;
}
nav.hamko-nav .brand[aria-current="page"] {
  color:var(--accent); background:var(--chip); border:1px solid var(--rule);
  border-radius:6px; padding:4px 9px;
}
nav.hamko-nav .areas { display:flex; gap:2px; flex:1 1 auto; min-width:0; flex-wrap:wrap; }
nav.hamko-nav .areas a {
  padding:5px 10px; border-radius:6px; color:var(--ink); font-size:.8125rem;
  white-space:nowrap; border:1px solid transparent;
}
nav.hamko-nav .areas a:hover { background:var(--chip); text-decoration:none; }
nav.hamko-nav .areas a[aria-current="page"] {
  background:var(--chip); border-color:var(--rule); font-weight:700; color:var(--accent);
}
nav.hamko-nav .me {
  display:flex; align-items:center; gap:var(--s3x); margin-left:auto;
  font-size:.75rem; color:var(--muted); white-space:nowrap; min-width:0;
}
nav.hamko-nav .me .who { overflow:hidden; text-overflow:ellipsis; max-width:22ch; }

/* ---------------------------------------------------------------- 版面 */
.wrap { max-width:1200px; margin:0 auto; padding:var(--s4x) var(--s4x) var(--s12x); }
/* 台帳（一覧が命の画面）は画面の幅を全部使う */
.wrap.full { max-width:none; }
.wrap.read { max-width:760px; }   /* 読み物（ヘルプ） */
section { margin:0 0 var(--s6x); }

/* ---------------------------------------------------------------- カード・数値タイル */
.cards, .tiles {
  display:grid; gap:var(--s3x); margin:var(--s2x) 0 var(--s4x);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.card, a.card, .tile {
  display:block; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--s3x) var(--s4x); color:inherit;
}
a.card:hover { border-color:var(--accent); text-decoration:none; }
a.card .t, .tile .t {
  font-family:var(--font-display); font-weight:700; font-size:.9375rem; color:var(--accent);
}
.card .n, .tile .n, .tile .ts { font-size:.75rem; color:var(--muted); margin-top:2px; }
.tile .tv, .tile .val { font-size:1.5rem; line-height:1.15; font-weight:600;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; margin-top:var(--s1x); }
.tile .tv small, .tile .val small { font-size:.875rem; color:var(--muted); font-weight:500; }
.tile .tl, .tile .lbl { font-size:.75rem; color:var(--muted); }

/* ---------------------------------------------------------------- 表 */
.tablewrap, .tableWrap {
  overflow-x:auto; border:1px solid var(--rule); border-radius:var(--radius);
  background:var(--card); margin:var(--s2x) 0;
}
.tablewrap > table, .tableWrap > table { border:none; border-radius:0; margin:0; }
/* 「項目と値」の2列の表は全幅にしない。横に伸ばすとラベルと値の間が空いて
   何の数字か読めなくなる（docs/hamko-page/DESIGN.md 第5節） */
.tablewrap.narrow { max-width:32rem; }
table {
  width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden;
  font-size:.8125rem;
}
th, td {
  text-align:left; padding:var(--row-y) var(--row-x);
  border-bottom:1px solid var(--border); vertical-align:top; line-height:1.45;
}
th {
  background:var(--chip); color:var(--muted);
  font-family:var(--font-sans); font-weight:700; font-size:.75rem;
  white-space:nowrap; border-bottom:2px solid var(--rule);
}
/* 見出しの固定は .tablewrap で囲んだ表の <thead> だけ。セルの中に入れ子にした
   小さい表まで固定すると、重なって読めなくなる */
.tablewrap > table > thead th, .tableWrap > table > thead th {
  position:sticky; top:0; z-index:1;
}
/* 既定は**罫線だけ**（GOV.UK と同じ）。ゼブラは長い表で行を追うときだけ
   table.zebra で付ける。指定子を低くして、画面ごとの行の色付けに負けるようにする */
table.zebra tbody tr:nth-child(even) > td { background:var(--row-alt); }
tr:hover > td { background:var(--hover); }
tbody tr:last-child > td { border-bottom:none; }
/* 列の型（DESIGN.md 表の規約） */
/* 寄せは見出しも値と揃える（列の右端が縦に揃う）が、書体は値だけ等幅 */
td.num, th.num, td.money, th.money { text-align:right; white-space:nowrap; }
td.num, td.money { font-family:var(--font-mono);
  font-variant-numeric:tabular-nums; }
td.date, th.date { white-space:nowrap; font-variant-numeric:tabular-nums; }
td.id, th.id { white-space:nowrap; }
td.id { font-family:var(--font-mono); }
td.ctr, th.ctr { text-align:center; }
td.txt { white-space:normal; word-break:break-word; }
/* 文字の列は**日本語の途中で改行しない**（DESIGN 第5節「列の型」の「既定は
   折り返さない」）。既定のままだと、狭い画面で列が詰まったときに和文が
   1文字ずつ縦に割れる（390px の「いまの状況」で「定期実行」が4行になった。
   issue #582）。表は .tablewrap の中で横に流れるので、幅は足りなくてよい。
   折り返してよい列は .txt / .mission / .desc / .facts が個別に上書きする */
td { word-break:keep-all; }
caption { text-align:left; font-size:.75rem; color:var(--muted); padding:0 0 var(--s1x); }
/* 無い値。空欄と「未収集」を書き分ける */
.miss {
  color:var(--muted); font-size:.75rem; border:1px dashed var(--border);
  border-radius:4px; padding:0 5px; white-space:nowrap; cursor:help;
}

/* ---------------------------------------------------------------- チップ（状態） */
.chip, .badge {
  display:inline-block; padding:1px 8px; border-radius:999px;
  font-size:.75rem; line-height:1.6; white-space:nowrap;
  border:1px solid var(--border); background:var(--chip); color:var(--ink);
}
.chip.good, .badge.good { color:var(--good); border-color:var(--good); background:transparent; }
.chip.bad,  .badge.bad  { color:var(--bad);  border-color:var(--bad);  background:transparent; }
.chip.warn, .badge.warn { color:var(--warn); border-color:var(--warn); background:transparent; }
.chip.info, .badge.info { color:var(--accent); border-color:var(--accent); background:transparent; }
.chip.muted,.badge.muted{ color:var(--muted); }

/* ---------------------------------------------------------------- 折りたたみ */
details { margin:var(--s2x) 0; }
details > summary {
  cursor:pointer; list-style:none; display:inline-flex; align-items:baseline; gap:6px;
  font-size:.8125rem; padding:3px 11px; border:1px solid var(--border);
  border-radius:999px; background:var(--card); color:var(--ink);
}
details > summary::-webkit-details-marker { display:none; }
details > summary::before { content:'▸'; color:var(--muted); }
details[open] > summary::before { content:'▾'; }

/* ---------------------------------------------------------------- 入力 */
input, select, button, textarea { font:inherit; color:var(--ink); }
input[type=search], input[type=text], .search, select {
  font-size:.8125rem; padding:5px 10px; border:1px solid var(--field);
  border-radius:6px; background:var(--card); color:var(--ink);
}
.search { flex:1 1 26em; min-width:12em; max-width:44em; }
/* 一覧の上の絞り込み。1行に収める（DESIGN.md 第7節「一覧の型」） */
.tools { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2x); margin:var(--s2x) 0; }
button, .btn {
  font-size:.8125rem; padding:5px 12px; border-radius:6px; cursor:pointer;
  border:1px solid var(--field); background:var(--card); color:var(--ink);
}
button:hover, .btn:hover { border-color:var(--accent); }
/* 塗りつぶしの上の文字は地の色。暗いテーマの --accent は明るいので、
   白文字だと対比が 2.2:1 しか出ない（WCAG 1.4.3 は 4.5:1） */
button.on, .btn.on { background:var(--accent); border-color:var(--accent); color:var(--ground); }

/* ---------------------------------------------------------------- ログ・その他 */
pre.log {
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s3x); overflow:auto; white-space:pre-wrap; word-break:break-all;
  font-family:var(--font-mono); font-size:.75rem; line-height:1.5; max-height:75vh;
}
dl.meta { display:grid; grid-template-columns:max-content 1fr; gap:var(--s1x) var(--s4x); margin:0; }
dl.meta dt { color:var(--muted); font-size:.75rem; }
dl.meta dd { margin:0; word-break:break-all; }

/* ------------------------------------------------- 「項目と値」（DESIGN.md 第5節） */
/* **ラベルと値を必ず隣り合わせにする。これがこの部品の目的のすべてである。**
   器が余ったときに 1段（ラベル＋値の1組）を横に伸ばすと、ラベルと値の間に
   空白の海ができて何の数字か読めなくなる。かといって器の左端に細い表を1本だけ
   置くと、右側が丸ごと死んで情報量が減る。**どちらも採らない。伸ばさずに段を
   増やして折り返す。** 1段は 24〜32rem、器に入るだけ横に並べる。

   使い方（`<table>` ではなく `<dl>` で書く。dt/dd の対を `<div>` で包むのは
   HTML5 で許されている書き方）。

     <dl class="pairs">
       <div><dt>販売価格（万円）</dt><dd class="num">3,584</dd></div>
       <div><dt>所在</dt><dd>埼玉県越谷市袋山</dd></div>
     </dl>

   `min(24rem,100%)` は、カードの中のように器が 24rem より狭いときに
   段がはみ出さないようにするため（1段が器の幅まで縮む）。 */
.pairs {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(24rem, 100%), 1fr));
  /* 段の間は 16px。24px にすると 1,218px の器（物件の画面の詳細のカード）で
     3段目が1段だけ入らなくなり、2段 × 36.6rem に伸びて、下の `max-width`
     で止めたぶんが右の空白になる。16px なら 3段 × 24.7rem で器を使い切る */
  gap:0 var(--s4x); align-content:start;
  margin:0 0 var(--s2x); font-size:.8125rem;
}
.pairs > div {
  /* ラベルの列は**中身の幅**（固定幅にすると短いラベルの後ろに空白ができる）。
     値の列に下限を置くのは、長いラベルが値を1文字幅まで潰すのを防ぐため
     （390px で `-12,345,678` が1文字ずつ縦に割れた） */
  display:grid;
  grid-template-columns:minmax(0, max-content) minmax(min(9em, 45%), 1fr);
  gap:0 var(--s3x); align-items:baseline; min-width:0;
  /* 器の段が 32rem より広くなっても、1段はここで止める */
  max-width:32rem;
  padding:var(--row-y) 0; border-bottom:1px solid var(--border);
}
.pairs dt { color:var(--muted); overflow-wrap:anywhere; }
.pairs dd { margin:0; min-width:0; overflow-wrap:anywhere; }
/* 列の型は表と同じ（DESIGN.md 第5節）。値だけ等幅にする */
.pairs dd.num, .pairs dd.money { font-family:var(--font-mono); }
.pairs dd.num, .pairs dd.money, .pairs dd.date {
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow-wrap:normal;
}
.pairs dd .miss { color:var(--muted); }
.band { background:var(--band); border-radius:6px; padding:var(--s2x) var(--s3x); margin-bottom:var(--s3x); }
footer, footer.foot {
  margin-top:var(--s8x); padding-top:var(--s2x); border-top:1px solid var(--border);
  color:var(--muted); font-size:.75rem;
}

/* ---------------------------------------------------------------- 図（SVG）の囲み */
/* 図そのもの（`.fig` の大きさ・色）は各画面の生成器が持つ。ここが持つのは
   「狭い画面でどう畳むか」だけ。 */
.figbox { overflow-x:auto; }
/* 広い画面では、狭い画面用に添えた表（同じ数字）を出さない */
@media (min-width:641px) { .fig-alt { display:none; } }

/* ---------------------------------------------------------------- 狭い画面 */
@media (max-width:640px) {
  :root { --row-x:8px; }
  /* 図は縮めない。1,220px の図を 390px に押し込むと 10px の目盛りが 3px に
     なって読めない。実寸のまま囲みの中だけで横に流す（ページ全体は
     横に流さない。DESIGN.md 第9節） */
  .figbox > svg.fig { width:auto; max-width:none; min-width:0; }
  /* 横棒の図は 390px では棒も金額のラベルも読めないので、図をやめて
     同じ数字の表に切り替える（数字は1つも落とさない） */
  .fig-main { display:none; }
  /* 領域名が切れて「ログアウト」に接していたので、字と余白を詰める */
  nav.hamko-nav .brand { font-size:.875rem; }
  nav.hamko-nav .areas a { font-size:.75rem; padding:4px 6px; }
  nav.hamko-nav .areas a[aria-current="page"] { padding:3px 6px; }
  /* 携帯でも2列に入れる。1列に伸ばすと1画面に入る数が半分になる
     （本人 2026-09-03「スカスカにするな」） */
  .cards, .tiles { grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap:var(--s2x); }
  .card, a.card, .tile { padding:var(--s2x) var(--s3x); }
  /* 数値が3行に折り返して1画面に入る数が減るので、狭い画面では1段小さくする */
  .big, .tile .tv, .tile .val { font-size:1.125rem; }
  /* **6つの行き先を全部見せる。** 2026-09-06 まで横に流れる帯にしていて
     （flex-wrap:nowrap ＋ overflow-x:auto ＋ 目盛りを消す）、5つを超えた
     ぶんは画面の外に出たまま、横に流せることも見えなかった。
     本人が開ける画面は全部押せないといけない（憲章 第0条）ので折り返す。
     折り返した2段目のぶんナビが 30px ほど高くなる */
  nav.hamko-nav { padding:var(--s1x) var(--s3x); gap:var(--s1x) var(--s2x); flex-wrap:wrap; }
  /* 2段にする。上の段が サイト名 と ログアウト、下の段が行き先6つ。
     行き先を上の段に混ぜると3段になってナビだけで 90px 使う */
  nav.hamko-nav .me { order:1; }
  nav.hamko-nav .areas { order:2; flex:1 0 100%; flex-wrap:wrap; overflow-x:visible; }
  /* メールは畳む。ログアウトだけ残す */
  nav.hamko-nav .me .who { display:none; }
  .wrap { padding:var(--s3x) var(--s3x) var(--s8x); }
  h1 { font-size:1.125rem; }
}

/* ---------------------------------------------------------------- 印刷 */
@media print {
  :root {
    --ground:#FFFFFF; --card:#FFFFFF; --ink:#000000; --muted:#444444;
    --border:#BBBBBB; --rule:#888888; --field:#888888; --chip:#EEEEEE;
    --row-alt:#F5F5F5; --hover:#FFFFFF;
  }
  body { background:#FFFFFF; color:#000000; }
  nav.hamko-nav { display:none; }
  th { position:static; }
}