/* 在留外国人ダッシュボード 固有の指定。土台はインバウンドMAPと同じ base.css（app.css の複製）と site.css */
:root { --hatch: #c3c2b7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hatch: #4a4a46; } }
:root[data-theme="dark"] { --hatch: #4a4a46; }

/* 上に固定した帯：表示中の地域（パンくず）と都道府県の選択 */
.crumbbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; padding: 10px 0 9px; font-size: 15px; font-weight: 700; min-width: 0; }
.crumbbar button { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.crumbbar button:hover { text-decoration: underline; }
.crumbbar .sep { color: var(--sh-muted); font-weight: 400; }
@media (max-width: 720px) { .crumbbar { padding: 8px 4px; font-size: 14px; } }

.mapcard + .mapcard { margin-top: 16px; }
.mapcard .rank-head .seg button { padding: 3px 12px; font-size: 12px; }

/* マスMAP */
.tmap svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.tmap .mt { cursor: pointer; outline: none; }
.tmap .mt.off { cursor: default; }
.tmap .mt rect.bg { stroke: none; }
.tmap .mt:hover rect.bg, .tmap .mt:focus-visible rect.bg { stroke: var(--hover-stroke); stroke-width: 1.5; }
.tmap .mt.hl rect.bg { stroke: var(--hover-stroke); stroke-width: 2.5; }
.tmap .mt text { pointer-events: none; }
.tmap .tn { font-weight: 600; }
.tmap .tv { font-variant-numeric: tabular-nums; }
.tmap .city-edge { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; pointer-events: none; }

/* 右側のランキング（HTMLの棒） */
.rank-row { display: grid; grid-template-columns: 8em minmax(0, 1fr) 4.8em; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 4px; border-radius: 4px; }
.rank-row.go { cursor: pointer; }
.rank-row:hover, .rank-row.on { background: var(--page); }
.rank-row.on { font-weight: 700; }
.rank-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .nm small { color: var(--muted); font-weight: 400; margin-right: 4px; font-variant-numeric: tabular-nums; }
.rank-row .bar { height: 12px; background: var(--grid); border-radius: 0 4px 4px 0; overflow: hidden; }
.rank-row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.rank-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tiles .tile .v small { font-size: 13px; font-weight: 600; margin-left: 2px; }
.tooltip { min-width: 220px; max-width: 300px; }
.tooltip .sub2 { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* 1枚のカードの中に 都道府県（上）→ 選んだ都道府県の市区町村（下）を縦に並べる */
.blk + .blk { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grid); }
.blk-ttl { font-size: 14px; margin: 4px 0 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.blk-ttl button { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.blk-ttl button:hover { text-decoration: underline; }
.blk-ttl .lowp { font-weight: 400; }

/* ---------- 静的に書き出す部分（要点の文章・表・リンク） ---------- */
.wrap > .card + .card { margin-top: 16px; }
.prose p { margin: 6px 0 0; font-size: 14px; line-height: 1.85; color: var(--ink); max-width: 72em; }
.prose p b { font-weight: 700; }
.prose h3 { font-size: 14px; margin: 16px 0 6px; }
.preflinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.preflinks a, .preflinks .nolink { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13px; }
.preflinks a:hover { border-color: var(--accent); }
.preflinks a span, .preflinks .nolink span { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.preflinks .nolink { color: var(--ink-2); background: var(--page); }
table.stat td a { color: var(--accent); text-decoration: none; font-weight: 600; }
table.stat td a:hover { text-decoration: underline; }
table.stat tbody tr { cursor: default; }
table.stat.compact { max-width: 420px; }
/* 地図のカードの中の推移・横棒 */
.chart svg { display: block; width: 100%; height: auto; }
.rank-row .nm small.desc { display: block; color: var(--muted); font-size: 10.5px; font-weight: 400; margin: 0; }
#card-work .rank-row { grid-template-columns: 13em minmax(0, 1fr) 6.5em; }
.crumbbar .jump { margin-left: 8px; font-size: 12px; font-weight: 600; text-decoration: none; }

/* ドリルダウン中に地図の上に出す「全国マップに戻る」 */
.backbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.backbar:empty { display: none; }
.backbtn { font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.backbtn:hover { filter: brightness(1.08); }
.backbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.backbtn.sub { background: var(--surface); color: var(--accent); box-shadow: none; }
.backbtn.sub:hover { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); filter: none; }

/* ---------- ランキングページの表 ---------- */
table.rankt td:first-child { color: var(--muted); width: 3em; }
.tbar { display: inline-block; width: 90px; height: 10px; background: var(--grid); border-radius: 0 3px 3px 0; overflow: hidden; vertical-align: -1px; margin-right: 8px; }
.tbar i { display: block; height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.tval { font-variant-numeric: tabular-nums; font-weight: 600; }
.preflinks.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 520px) { .tbar { width: 48px; } }

/* ---------- 国籍ページ（静的なSVGの地図・推移、在留資格の横棒） ---------- */
.smap { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; }
.smap a:hover rect, .smap a:focus-visible rect { stroke: var(--hover-stroke); stroke-width: 1.5; }
.schart { display: block; width: 100%; height: auto; }
.schart .grid { stroke: var(--grid); }
.schart .ax { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.schart .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.schart .pt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.schart .end { fill: var(--ink); font-size: 12px; font-weight: 600; }
.scrollbox { max-height: 560px; overflow: auto; }
.stbars .rank-row { grid-template-columns: minmax(10em, 15em) minmax(0, 1fr) 7.5em; padding: 4px; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; margin-right: 6px; border: 1px solid currentColor; }
/* 区分の色：働く＝青、身分＝オレンジ、学ぶ・家族＝アクア（3色は全組み合わせで色覚検証済み）、その他＝灰色。区分名を文字でも書いている */
.tag.t-work, .stbars i.t-work { color: #2a78d6; } .stbars i.t-work { background: #2a78d6; }
.tag.t-status { color: #c4501f; } .stbars i.t-status { background: #eb6834; }
.tag.t-study { color: #13805a; } .stbars i.t-study { background: #1baf7a; }
.tag.t-other { color: var(--muted); } .stbars i.t-other { background: var(--bar-other); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag.t-work { color: #86b6ef; } :root:not([data-theme="light"]) .tag.t-status { color: #f0a07a; } :root:not([data-theme="light"]) .tag.t-study { color: #5fd3a8; } }
:root[data-theme="dark"] .tag.t-work { color: #86b6ef; } :root[data-theme="dark"] .tag.t-status { color: #f0a07a; } :root[data-theme="dark"] .tag.t-study { color: #5fd3a8; }
@media (max-width: 520px) { .stbars .rank-row { grid-template-columns: 9em minmax(0, 1fr) 6em; } }

.view[hidden] { display: none; }
.vtoggle .view .sub { margin-top: 2px; }

/* ヘッダーの更新日 */
.mast .asof .upd { display: block; margin-top: 4px; font-family: system-ui, sans-serif; font-size: 12px; color: var(--accent, #2a78d6); font-weight: 600; }

/* テーマ色：インバウンドMAP（青）と見分けられるよう紫にする。base.css・site.css はインバウンドMAPと共通なのでここで上書き */
:root { --accent: #7266d3; --accent-ink: #584da9; --sh-accent: #4b4293; --sh-sky: #ecebf9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #7f75e3; --accent-ink: #acaaee; --sh-accent: #b3aef0; --sh-sky: #1a1730; } }
:root[data-theme="dark"] { --accent: #7f75e3; --accent-ink: #acaaee; --sh-accent: #b3aef0; --sh-sky: #1a1730; }

/* ヘッダーの横長画像 assets/title-bg.jpg（1800×600）。高さに合わせて右に置き、左側はマスクで地の色に溶かす
   （cover で敷くと横長の画面で下の帯だけが切り取られ、人の多い所が文字の後ろに来るため）。画像がないときは色だけ */
.mast { position: relative; overflow: hidden; }
.mast::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; aspect-ratio: 3 / 1; pointer-events: none;
  background: url(title-bg.jpg) right bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
.mast-in { position: relative; z-index: 1; min-height: 230px; box-sizing: border-box; }
.mast .asof { justify-self: start; padding: 4px 10px; margin-left: -10px; border-radius: 8px; background: color-mix(in srgb, var(--sh-bg) 70%, transparent); }
/* 国籍別のページは日本地図の assets/title-nat.svg（scripts/make_nat_art.py で作る） */
.mast-nat::before { background-image: url(title-nat.svg?v=4); background-size: contain; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mast::before { filter: brightness(.55) saturate(.8); } }
:root[data-theme="dark"] .mast::before { filter: brightness(.55) saturate(.8); }
/* 画面が狭いと画像が文字の後ろまで来るので薄くする */
@media (max-width: 1100px) {
  .mast::before { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.3) 55%, #000 90%); mask-image: linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.3) 55%, #000 90%); }
}
@media (max-width: 720px) {
  .mast-in { min-height: 0; }
  .mast::before { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 100%); }
}
/* 国籍別の日本地図は右側だけに描いてあり文字と重ならないので、狭い画面でも薄くしない */
@media (min-width: 721px) {
  .mast-nat::before { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, #000 50%); }
}

/* 見出し・説明文は区切り（、？。）ごとに折り返す（build_site.py の phrases） */
.mast .ph { display: inline-block; }