/* 「水面」パレット(app/src/ui/tokens.ts の palette と同値。
   ここは静的 CSS なので手写しだが、値の正本はあちら —— 変えるときは両方。
   **ずれは src/style.test.ts が機械検査する**)。
   primary(ブランド青)は主要アクションのみ。pulse(朱)はアプリでは地図の新着
   パルス専用になり、この静的ページには出番が無い —— 2026-08-05 に主要アクションが
   朱から青へ移った(app/src/ui/tokens.ts の primary の注記が正本)ので、
   共有ページの CTA もそちらへ揃えてある */
:root {
	color-scheme: light dark;
	--surface: #f6f8f9;
	--ink: #1c2b4a;
	--ink-soft: #5a6b80;
	--ripple: #afc9d6;
	--pulse: #c93f23;
	--pulse-foreground: #ffffff;
	--primary: #197faa;
	--primary-foreground: #ffffff;
	/* 苔: アプリでは地図の公園・緑地の面専用。トップページ(home.css)の
	   地図モックが同じ用途で使うのでここに置く —— 共有ページ・法務ページは使わない */
	--moss: #9dbca9;
}
@media (prefers-color-scheme: dark) {
	:root {
		--surface: #0e1626;
		--ink: #dce6ee;
		--ink-soft: #8da0b5;
		--ripple: #2a3d57;
		--pulse: #e86a4e;
		--pulse-foreground: #0e1626;
		--primary: #29aae0;
		--primary-foreground: #0e1626;
		--moss: #22443c;
	}
}

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family:
		system-ui,
		-apple-system,
		"Hiragino Sans",
		"Noto Sans JP",
		sans-serif;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}
.page {
	max-width: 40rem;
	margin: 0 auto;
	padding: 1.25rem 1.25rem 3rem;
}
.site-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0 1.25rem;
}
.site-header img {
	width: 28px;
	height: 28px;
	border-radius: 7px;
}
.site-header a {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.02em;
}
h1 {
	font-size: 1.5rem;
	line-height: 1.5;
	margin: 0.5rem 0 1rem;
}
h2 {
	font-size: 1.125rem;
	margin: 2rem 0 0.5rem;
}
p {
	margin: 0.75rem 0;
}
a {
	color: inherit;
}
.button {
	display: inline-block;
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 0.8rem 2rem;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 700;
}
.card {
	border: 1px solid var(--ripple);
	border-radius: 12px;
	padding: 0.25rem 1.25rem 1rem;
	margin: 1.5rem 0;
}
.meta {
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	font-size: 0.9rem;
}
.muted {
	color: var(--ink-soft);
	font-size: 0.9rem;
}
.post-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}
.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ripple);
	flex-shrink: 0;
}
/* 投稿に添えられた写真(2026-08-08)。**幅いっぱい・比率そのまま**
   —— アプリの一覧は 4:3 に切って高さを揃えるが(ui/post-photo.tsx)、
   こちらは 1 投稿だけのページなので切る理由が無い。
   `max-height` は縦長の写真がページを占有しないための頭打ち。

   **`aspect-ratio: auto 4 / 3` は「読み込み前だけ」効く**(2026-08-09 のレビュー指摘)。
   `auto` を併記した形は**画像が自然比を持つようになった時点でそちらが勝つ**ので、
   届いた後の見え方は従来どおり(切らない・歪めない)——
   効くのは自然比がまだ無い読み込み前だけで、そこを 4:3 で埋める。
   これが無いと **width だけが決まって高さが 0** になり、
   (1) この `background` の下地が**高さ 0 の帯なので一度も見えない**、
   (2) 写真が届いた瞬間に下の `.meta` と「アプリで開く」が**下へ飛ぶ**。
   アプリ側は同じ現象を 4:3 の固定で避けている(`ui/post-photo.tsx` が
   「行の高さが読み込み後に変わる」を理由に挙げる)—— **値を揃えたのは
   そこに合わせる以上の根拠が無いから**で、DB が寸法を持たない以上
   厳密な予約はできず、縦長の写真では届いた時点で高さが伸びる。
   **2 値構文を解さないブラウザは宣言ごと捨てる** = 高さ 0 の従来の挙動へ戻るだけ */
.post-photo {
	display: block;
	width: 100%;
	aspect-ratio: auto 4 / 3;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 12px;
	background: var(--ripple);
	margin: 0.75rem 0;
}
.post-message {
	font-size: 1.125rem;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	margin: 0.75rem 0;
}
.site-footer {
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--ripple);
	color: var(--ink-soft);
	font-size: 0.85rem;
}
.site-footer a {
	color: inherit;
	margin-right: 1rem;
}