/* =========================================================
 *  Utilities / 共通ユーティリティ
 *  - 小さなレイアウト補助や汎用クラス
 * =======================================================*/
.w-100 {
	width: 100%;
}

/* 汎用の非表示。JSから is-hidden を付け外しします。*/
.is-hidden {
	display: none !important;
}

/* =========================================================
 *  Layout / ページ全体レイアウト
 *  - 画面の上下余白など、枠組み調整
 * =======================================================*/
.main-container {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* =========================================================
 *  Header / ヘッダー・ナビ（ブランドロゴ）
 *  - できる限り大きく表示しつつ、狭い画面では自動縮小
 *  - 一行表示を維持（改行しない）
 * =======================================================*/
.nav-wrapper .brand-logo {
	font-size: clamp(1.2rem, 5.5vw, 2.1rem);
	text-align: center;
	width: 100%;
}

/* =========================================================
 *  Overview / 総評エリア
 *  - 読み込み時のレイアウト揺れを抑えるための最小高さ
 *  - 見出し・リストの整形（テンプレ駆動で li を追加）
 * =======================================================*/
.overview {
	min-height: 72px;
}

.overview-header {
	margin-bottom: 6px;
}

.overview-list {
	list-style: none; /* デフォルトのマーカーを消す（lead を自前で表示） */
	padding-left: 0;
}

.overview-item {
	display: flex;
	align-items: flex-start;
}

/* 左側のラベル（例：最短到着/最速乗車/直通/準急）を固定幅で配置 */
.overview-item .lead {
	width: 5em;
	flex-shrink: 0;
}

/* 右側の本文は可変で折り返し */
.overview-item .text {
	flex: 1;
}

/* =========================================================
 *  総評エリアの各ブロック
 * =======================================================*/

/* 概要の1ブロック */
.ov-block {
	border-bottom: 2px dashed rgba(0, 0, 0, 0.12);
	padding: 4px 0;
}

/* バッジ行（chipの集合） */
.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}
.badge-row .chip {
	margin: 0; /* Materializeのchipは余白があるので相殺 */
	padding: 0 10px;
}

/* 本文行・注記行 */
.ov-main {
	font-weight: 500;
}
.ov-note {
	margin-top: 4px;
	opacity: 0.8;
	font-size: 0.95em;
}

/* =========================================================
 *  Cards / 結果カード
 *  - キーバリュー形式の行レイアウト
 * =======================================================*/
.kv .row-item {
	border-bottom: 2px dashed rgba(0, 0, 0, 0.12);
	padding: 4px 0;
}

.kv .key {
	color: rgba(0, 0, 0, 0.7);
}

/* =========================================================
 *  Controls / 入力・操作部の微調整
 *  - 基準時刻右側の「現在時刻に戻して再検索」ボタン
 *  - マテリアルアイコンサイズ
 * =======================================================*/
#refreshNow {
	line-height: 24px;
	height: 32px;
	width: 32px;
	padding: 0;
}

#refreshNow .material-icons {
	font-size: 20px;
}

/* =========================================================
 * Dark mode（OS設定に追随）
 * =======================================================*/
@media (prefers-color-scheme: dark) {
	body {
		background-color: #121212;
		color: #e0e0e0;
	}

	/* ヘッダーやフッター */
	nav {
		background-color: #1f1f1f;
	}
	.footer-copyright {
		background-color: #1f1f1f;
		color: #aaa;
	}

	/* カード */
	.card {
		background-color: #1e1e1e;
		color: #e0e0e0;
	}
	.card .card-title {
		color: #fff;
	}

	.kv .row-item,
	.ov-block {
		border-bottom: 2px dashed rgba(255, 255, 255, 0.12);
	}

	.kv .key {
		color: rgba(255, 255, 255, 0.7);
	}

	.info {
		font-size: 12px;
	}

	/* 入力部 */
	input,
	select {
		background-color: #2a2a2a;
		color: #fff;
	}

	label,
	.btn-flat {
		color: #bbb;
	}

	.select-wrapper .caret {
		fill: #bbb;
	}

	.badge-row .chip {
		background-color: #333;
		color: #eee;
	}

	/* 概要リスト */
	.overview {
		color: #ddd;
	}
}