/* ==========================================================================
   Otakara Watcher スキン追加分
   トークン（色・書体・角丸・影）は style.css の :root が正本。
   ここには watcher 固有の意匠だけを置く：記録台帳らしい二重罫・破線、
   数字と日付の等幅表示、引用と年表の緑の基調。
   ========================================================================== */

/* ヘッダー下とフッター上の二重罫（サンプルの header.site / footer.site の基調）。
   フッターは親テーマ側で濃緑の帯になるため、帯の手前に二重罫を引く。 */
.bmb-site-header {
	border-bottom: 3px double var(--ink);
}

.bmb-footer {
	border-top: 3px double var(--ink);
}

/* 数字・日付・推移の値は等幅で揃える（サンプルの --mono の使い分け） */
.bmb-num,
.bmb-numbers-panel__value,
.bmb-numbers-single__value,
.bmb-timeline__when {
	font-family: var(--watcher-mono);
	font-variant-numeric: tabular-nums;
}

/* 年表は破線の区切り＋緑の等幅日付で「記録」の基調にする */
.bmb-timeline__item {
	border-top: 1px dashed var(--line);
}

.bmb-timeline__when {
	color: var(--gold-ink);
	font-weight: 600;
}

/* 会長の言葉は左3pxの緑帯＋淡い緑地（記事サンプルの引用の基調に寄せる） */
.bmb-kotoba-quote {
	border-left: 3px solid var(--gold);
}

/* セクション見出しは墨色の2px下線で締める（サンプルの h2.sec の基調） */
.bmb-section__title {
	border-bottom: 2px solid var(--ink);
	padding-bottom: 8px;
}

/* 記録カードの題字まわりは強い罫線で台帳らしく */
.bmb-record-card {
	border-color: var(--watcher-line-strong);
}

/* ---- 写真の壁：文字入りサムネイルを切り取らずに見せる ----
   親テーマの枠は 3:2 で、watcher のアイキャッチである YouTube サムネイル
   （16:9・文字入り）の左右が欠けて文字が読めなくなる。枠の比率を 16:9 に
   合わせると、16:9 の画像は object-fit: cover でも実質そのまま収まる。
   プロフィールページの壁（--grid）にも同じサムネイルが並ぶため、比率の
   修正は壁共通にする（段組みの調整はフロント側だけ、次項）。 */
.bmb-photo-wall__item img {
	aspect-ratio: 16 / 9;
}

/* フロントの壁（2列・5点）では最後の1点だけが下段に残り、右下が空く。
   行の最後に1点だけ残る場合（奇数番目で終わる場合）に限り、その1点を
   2列ぶんの幅にして段を埋める。偶数点で段が揃う場合は何もしない。
   --grid（3列）の壁は対象外。 */
.bmb-photo-wall:not(.bmb-photo-wall--grid) .bmb-photo-wall__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

/* ---- 案内カード（ダーク面）のCTA：濃緑どうしで読めない問題の修正 ----
   親テーマは .is-dark のCTAを「背景 var(--gold) ／ 文字 var(--navy)」とするが、
   watcher のトークンでは --gold(#1d4d38) も --navy(#17402e) も濃緑で、
   文字とボタンの色がほぼ同じになり読めなくなる（kikuo-fun の金色前提の指定）。
   watcher では、濃緑の地にオフホワイト（--navy-ink）の文字＋枠の輪郭ボタンに
   読み替える。ライト面（白地）のカードのCTAは親の指定のまま変えない。 */
.bmb-guide__card.is-dark .bmb-guide__cta {
	background: transparent;
	border-color: var(--navy-ink);
	color: var(--navy-ink);
}

/* ホバー時は地と文字を反転させ、濃緑×オフホワイトの対比を保つ */
.bmb-guide__card.is-dark .bmb-guide__cta:hover {
	background: var(--navy-ink);
	border-color: var(--navy-ink);
	color: var(--navy);
}

/* ---- 数字パネル内の推移リスト（watcher の numbers-panel 複製が足す表） ----
   パネルは濃緑の帯。罫はパネルの見出し罫と同じ --gold で引き、時点と
   値は等幅で台帳らしく揃える。前回比はパネルの推移デルタと同じ基調。 */
.bmb-numbers-panel__list {
	width: 100%;
	border-collapse: collapse;
	margin-top: 22px;
	font-size: 0.9375rem;
}

.bmb-numbers-panel__list caption {
	text-align: left;
	font-weight: 700;
	color: var(--gold-bright);
	padding-bottom: 8px;
}

.bmb-numbers-panel__list th,
.bmb-numbers-panel__list td {
	border-top: 1px solid var(--gold);
	padding: 8px 12px 8px 0;
	text-align: left;
	vertical-align: baseline;
}

.bmb-numbers-panel__list thead th {
	border-top: none;
	padding-bottom: 4px;
	font-size: 0.8125rem;
	font-weight: 400;
	opacity: 0.8;
}

.bmb-numbers-panel__list-when,
.bmb-numbers-panel__list-value {
	font-family: var(--watcher-mono);
	font-variant-numeric: tabular-nums;
}

.bmb-numbers-panel__list-value {
	font-weight: 700;
}

.bmb-numbers-panel__list-delta {
	font-family: var(--watcher-mono);
	font-variant-numeric: tabular-nums;
	color: var(--gold-bright);
	font-weight: 700;
}

/* ---- ヘッダーのサイト名：長い正式名称を省略せず全文出す ----
   watcher のサイト名「おたからやの渡辺喜久男会長を追跡するブログ」は21文字あり、
   親の指定（名称 1.25rem＝20px）のままだと名称≒420px＋ドメイン≒114px＋
   ナビ5ピル≒560px＋間隔で、コンテナ上限 1120px を常時超え、ブランド側が
   「…追跡するブ…」と省略されてしまう（kikuo-fun の短いサイト名では起きない）。
   watcher では名称を 1.125rem（18px）に一段下げて幅を詰め、ブランドは
   縮小させない。入りきらない分は、もともと横スクロール可（.bmb-nav の
   overflow-x: auto）のナビ側が吸収する。モバイル（≤768px）は親の仕様どおり
   ブランド非表示のまま触らない。 */
@media (min-width: 769px) {
	.bmb-site-header__inner {
		gap: 16px 20px;
	}

	.bmb-site-header__brand {
		flex: 0 0 auto;
	}

	.bmb-site-header__name {
		font-size: 1.125rem;
	}

	/* ナビも少しだけ詰め、全幅で収まる範囲を広げる */
	.bmb-nav {
		gap: 6px;
	}

	.bmb-nav a {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ---- 第一画面：観測ログ（1.0.5） ----
   共通のヒーロー組成（キッカー＋大見出し＋メタ行＋大写真）をやめ、
   最新5件を「日付＋見出し＋小サムネイル」の密な行リストで開く。
   段組みは親の .bmb-hero-wrap と同じ比率（本文＋右サイド320px）に
   そろえ、右サイドの2枚（プロフィールmini／言葉pickup）は従来の
   位置に残す。罫は台帳の基調：上端は見出し罫と同じ墨の実線、
   行間は破線。日付は等幅で揃える。 */
.bmb-log-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 28px;
	align-items: start;
}

@media (max-width: 1020px) {
	.bmb-log-wrap {
		grid-template-columns: 1fr;
	}
}

.bmb-log-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--ink);
}

.bmb-log-item {
	border-bottom: 1px dashed var(--line);
}

.bmb-log-item__link {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 6px;
	color: var(--ink);
	text-decoration: none;
}

.bmb-log-item__link:hover {
	background: var(--accent-soft);
}

.bmb-log-item__link:hover .bmb-log-item__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bmb-log-item__thumb {
	flex: 0 0 96px;
}

.bmb-log-item__thumb img {
	display: block;
	width: 96px;
	height: 72px;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* 先頭行だけ一段大きく：サムネイルと題字を広げ、抜粋も添える */
.bmb-log-item.is-first .bmb-log-item__thumb {
	flex-basis: 168px;
}

.bmb-log-item.is-first .bmb-log-item__thumb img {
	width: 168px;
	height: 105px;
}

.bmb-log-item__body {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.bmb-log-item__date {
	font-family: var(--watcher-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--gold-ink);
}

.bmb-log-item__title {
	font-weight: 700;
	line-height: 1.55;
}

.bmb-log-item.is-first .bmb-log-item__title {
	font-size: 1.125rem;
}

.bmb-log-item__excerpt {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--ink-soft);
}

@media (max-width: 560px) {
	.bmb-log-item__thumb {
		flex-basis: 76px;
	}

	.bmb-log-item__thumb img {
		width: 76px;
		height: 57px;
	}

	.bmb-log-item.is-first .bmb-log-item__thumb {
		flex-basis: 118px;
	}

	.bmb-log-item.is-first .bmb-log-item__thumb img {
		width: 118px;
		height: 74px;
	}
}

/* ---- ヘッダーを細く（1.0.5）：実務的な記録所の顔 ----
   スマートヘッダーの挙動（sticky＋.is-hidden の transform＋
   focus-within）は親の .bmb-site-header と smart-header.js が担う。
   クラス名・構造・ID は変えず、ここでは内側の余白と文字だけを詰める。
   モバイルのピルはタップ領域 44px のまま（親の指定を上書きしない）。 */
.bmb-site-header__inner {
	padding-top: 6px;
	padding-bottom: 6px;
}

@media (min-width: 769px) {
	.bmb-site-header__name {
		font-size: 1.0625rem;
	}

	.bmb-nav a {
		min-height: 38px;
	}
}

/* ---- ヘッダー：1本バー＋テキストリンクのナビ（1.0.6） ----
   フレッシュバーを廃止し（header.php の watcher 複製）、追従バーも
   記録所らしくピルをやめてテキストリンクにする。区切りは「｜」の罫。
   スマートヘッダーの構造・クラス・ID は親のまま（header.php 複製側で
   維持）。現在地はピルの面ではなく、緑の文字＋下線で示す。
   モバイル（≤768px）ではブランドが隠れ、「トップ」＋ナビのテキストが
   横スクロールする1段になる（親のレイアウトのまま、形だけ変える）。 */
.bmb-site-header__domain {
	font-family: var(--watcher-mono);
}

.bmb-nav {
	gap: 2px;
}

.bmb-nav li {
	display: flex;
	align-items: center;
}

.bmb-nav li + li::before {
	content: "｜";
	font-size: 0.75rem;
	color: var(--watcher-line-strong);
}

.bmb-nav a,
.bmb-nav-home {
	border: none;
	border-radius: 0;
	background: transparent;
	padding: 6px 10px;
	font-weight: 500;
}

.bmb-nav a:hover,
.bmb-nav-home:hover {
	background: transparent;
	color: var(--gold-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.bmb-nav .current-menu-item > a,
.bmb-nav .current_page_item > a {
	background: transparent;
	border-color: transparent;
	color: var(--gold-ink);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--gold);
}

/* ---- 記事：日付ヘッド（1.0.6） ----
   親の鮮度バー（小さなグレーの1行）をやめ、公開日を観測日のように
   等幅で大きく置く。上下の罫は台帳の基調（上＝墨の実線、下＝細罫）。 */
.bmb-datehead {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 20px;
	border-top: 2px solid var(--ink);
	border-bottom: 1px solid var(--line);
	padding: 10px 0 12px;
	margin-bottom: 22px;
}

.bmb-datehead__date {
	font-family: var(--watcher-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.bmb-datehead__sub {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 0.8125rem;
	color: var(--ink-faint);
}

@media (max-width: 640px) {
	.bmb-datehead__date {
		font-size: 1.375rem;
	}
}

/* ---- 記事：見どころは「場面：」のテキスト行（1.0.6） ----
   チップの独立ブロックをやめ、タイトル下の1行にする。リンクは
   タームアーカイブへの導線として残す。 */
.bmb-article__scenes {
	font-size: 0.875rem;
	color: var(--ink-soft);
	margin: 0 0 16px;
}

.bmb-article__scenes-label {
	font-weight: 700;
	color: var(--ink);
}

.bmb-article__scenes a {
	color: var(--gold-ink);
	text-underline-offset: 3px;
}

/* ---- 案内：カードをやめ「記録の続き」の行リストに（1.0.6） ----
   guide-cards.php の watcher 複製が出す行リスト。観測ログと同じ
   罫のリズム（上端は墨の実線、行間は破線）で、ラベル＋文＋リンクを
   1行に並べる。フロントの「書き手について＋案内」節でも同じ形になる。 */
.bmb-guide--log {
	display: block;
}

.bmb-guide-log {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--ink);
}

.bmb-guide-log__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: 14px 6px;
	border-bottom: 1px dashed var(--line);
}

.bmb-guide-log__label {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 0.9375rem;
	color: var(--ink);
}

.bmb-guide-log__row.is-dark .bmb-guide-log__label {
	color: var(--gold-ink);
}

.bmb-guide-log__text {
	flex: 1 1 240px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--ink-soft);
}

.bmb-guide-log__text a {
	color: var(--gold-ink);
	text-underline-offset: 3px;
}

.bmb-guide-log__cta {
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--gold-ink);
	white-space: nowrap;
	text-underline-offset: 3px;
}

.bmb-guide-log__cta:hover {
	text-decoration: underline;
}

/* ---- フロント構成の作り替え（1.0.7） ----
   観測ログの右サイド（プロフィールmini／会長の言葉pickup）を
   フロントから外したため、ログの段組みを1カラムに戻す
   （1.0.5 節の2カラム指定への上書き）。 */
.bmb-log-wrap {
	grid-template-columns: 1fr;
}

/* カード写真に重なるキャプションは、焼き込み文字のあるサムネイルと
   衝突して読めなくなるため、カード上では隠す（キャプション自体は
   記事ページの写真下と構造化データに残る） */
.bmb-card__caption {
	display: none;
}

/* ---- ヘッダー：モバイルはハンバーガー＋ドロワー（1.0.9） ----
   ≤768px の横一列ナビ（横スクロールするテキストリンク）は、他サイトと
   「横並びナビ」の型が同じに見えるため、watcher はハンバーガーに畳む。
   ボタンとドロワーは <header> の内側（header.php）に置くので、親の
   スマートヘッダー（.is-hidden の transform）とは競合しない。
   意匠は記録所の基調に寄せる：緑のアイコン、罫線区切り（ボタン内の
   「MENU」文字は 1.0.12 で廃止し、アイコンのみにした）。
   デスクトップ（769px〜）は 1.0.6 のテキストリンクのまま一切変えない。 */
.bmb-menu-toggle {
	display: none;
}

.bmb-drawer[hidden] {
	display: none;
}

@media (max-width: 768px) {
	.bmb-site-header__nav {
		display: none;
	}

	.bmb-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin-left: auto;
		min-height: 44px;
		padding: 6px 12px;
		border: 1px solid var(--watcher-line-strong);
		border-radius: var(--radius);
		background: transparent;
		color: var(--ink);
		font: inherit;
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
	}

	.bmb-menu-toggle__icon {
		color: var(--gold);
		font-size: 1rem;
		line-height: 1;
	}

	.bmb-menu-toggle[aria-expanded="true"] {
		background: var(--accent-soft);
	}

	.bmb-drawer {
		border-top: 1px solid var(--line);
	}

	.bmb-drawer__list {
		list-style: none;
		margin: 0;
		padding: 0 0 8px;
	}

	.bmb-drawer__list li + li {
		border-top: 1px solid var(--line);
	}

	.bmb-drawer__list a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 10px 8px;
		color: var(--ink);
		text-decoration: none;
		font-weight: 500;
	}

	.bmb-drawer__list a:hover {
		color: var(--gold-ink);
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.bmb-drawer__list .is-current a {
		color: var(--gold-ink);
		font-weight: 700;
		box-shadow: inset 3px 0 0 var(--gold);
	}
}

/* ---- ヘッダー：モバイルの追従バーにサイト名を出す（1.0.10） ----
   従来ブランド行（.bmb-site-header__brand）は親仕様で ≤768px では
   隠れるため、モバイルの追従バーには ☰MENU ボタンしか残らず、
   どのサイトを見ているのか分からなかった。バー行（.bmb-site-header
   __inner は親で flex）の左にバー専用のサイト名リンク
   （.bmb-bar-brand、header.php）を置き、≤768px のときだけ出す。
   バー行は左＝サイト名／右＝ボタン（ボタン側の margin-left: auto は
   1.0.9 節のまま）に並ぶ。デスクトップでは出さず、従来ブランド行と
   二重表示にならない。色は既存の文字色変数（--ink）をそのまま使い、
   ダークな地でも明るい地でも本文色として読める状態を保つ。 */
.bmb-bar-brand {
	display: none;
}

@media (max-width: 768px) {
	/* 従来ブランド行はモバイルで隠す（親でも非表示だが、バー内
	   ブランドとの二重表示を避けるため子側でも明示する） */
	.bmb-site-header__brand {
		display: none;
	}

	.bmb-bar-brand {
		display: block;
		flex: 0 1 auto;
		min-width: 0;
		max-width: 60%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--ink);
		font-size: 0.9rem;
		font-weight: 700;
		line-height: 1.3;
		text-decoration: none;
	}
}

/* ---- ヘッダー：モバイルバーを1行に収める（1.0.11） ----
   1.0.10 のバー内ブランドは max-width: 60% で、ボタン側の実幅と
   合わせるとバーの幅を超え、サイト名とMENUボタンが2段に
   折り返していた。バー行は折り返しを禁止し、ブランド側を
   伸縮させて ellipsis で受け、ボタンは縮ませず左右の余白だけ
   詰める。デスクトップは従来どおり一切変えない。 */
@media (max-width: 768px) {
	.bmb-site-header__inner {
		flex-wrap: nowrap;
	}

	.bmb-bar-brand {
		flex: 1 1 auto;
		max-width: none;
	}

	.bmb-menu-toggle {
		flex: none;
		padding: 6px 10px;
	}
}

/* ---- ヘッダー：モバイルバーのボタンをアイコンだけにする（1.0.12） ----
   ボタン内の文字（「MENU」＋「メニュー」）が幅を取り、左のサイト名
   （.bmb-bar-brand、21文字）が途中で切れていた。header.php 側で文字を
   廃してアイコンだけにし（名前は aria-label="メニュー"）、こちらでは
   ボタンのタップ領域を 44px 以上に保ちつつ、サイト名の文字サイズを
   落として21文字が省略されずに収まるようにする。
   幅の内訳（390px幅）：コンテナ実幅 350px（親 .bmb-container は
   100% - 40px）− ボタン 44px − 間隔 10px ＝ サイト名に 296px。
   全角1文字＝1em として 21文字が収まる上限は約14.1px で、0.875rem
   （14px × 21 ＝ 294px）なら収まる。ellipsis は安全策として
   1.0.10 節の設定をそのまま残す。デスクトップは一切変えない。 */
@media (max-width: 768px) {
	.bmb-menu-toggle {
		min-width: 44px;
		justify-content: center;
		gap: 0;
	}

	.bmb-menu-toggle__icon {
		font-size: 1.125rem;
	}

	.bmb-bar-brand {
		font-size: 0.875rem;
	}
}