/* 今日の日本株予想 — フラットデザイン
   すべて .ohagya-index 配下にスコープし、テーマ側に影響しないようにする。

   色の意味は「今日の日本株にとって良いか悪いか」に統一している。
   緑＝プラス、赤＝マイナス、グレー＝中立。市場慣習の「上げが赤」ではない。 */

.ohagya-index {
	--oi-bg: #ffffff;
	--oi-fg: #16202b;
	--oi-muted: #7d8894;
	--oi-line: #e9edf1;
	--oi-soft: #f4f7f9;

	--oi-plus: #1f9d55;
	--oi-minus: #d94437;
	--oi-neutral: #94a1ae;

	/* カードを紙のように浮かせる。濃さを変えたいのはだいたいここ。 */
	--oi-shadow: 0 2px 6px rgba(15, 30, 45, 0.07), 0 14px 32px rgba(15, 30, 45, 0.13);

	--oi-accent: var(--oi-neutral);

	box-sizing: border-box;
	max-width: min(100%, 620px);
	margin: 1.8em auto;
	padding: 1.4em 1.5em 1.2em;
	border: 1px solid var(--oi-line);
	border-radius: 14px;
	background: var(--oi-bg);
	box-shadow: var(--oi-shadow);
	color: var(--oi-fg);
	font-size: 15px;
	line-height: 1.65;
}

.ohagya-index.is-plus {
	--oi-accent: var(--oi-plus);
}

.ohagya-index.is-minus {
	--oi-accent: var(--oi-minus);
}

.ohagya-index *,
.ohagya-index *::before,
.ohagya-index *::after {
	box-sizing: inherit;
}

/* ---- ヘッダ ---- */

.ohagya-index .oi-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3em;
	margin-bottom: 1em;
}

.ohagya-index .oi-name {
	font-weight: 700;
	font-size: 1.3em;
}

.ohagya-index .oi-time {
	color: var(--oi-muted);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
}

/* ---- 結論 ---- */

.ohagya-index .oi-headline {
	display: flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.9em 1em;
	border-radius: 10px;
	background: var(--oi-soft);
}

.ohagya-index .oi-dot {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--oi-accent);
}

.ohagya-index .oi-headline-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ohagya-index .oi-verdict {
	font-weight: 700;
	font-size: 1.75em;
	line-height: 1.25;
	color: var(--oi-accent);
}

.ohagya-index .oi-open {
	font-size: 0.95em;
	font-variant-numeric: tabular-nums;
}

.ohagya-index .oi-open strong {
	font-weight: 700;
}

.ohagya-index .oi-range {
	color: var(--oi-muted);
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
}

/* ---- 5段階ゲージ ---- */

.ohagya-index .oi-gauge {
	display: flex;
	gap: 4px;
	margin-top: 0.9em;
}

.ohagya-index .oi-step {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35em;
	min-width: 0;
}

.ohagya-index .oi-step-bar {
	display: block;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: var(--oi-line);
}

.ohagya-index .oi-step.is-active.is-plus .oi-step-bar {
	background: var(--oi-plus);
}

.ohagya-index .oi-step.is-active.is-minus .oi-step-bar {
	background: var(--oi-minus);
}

.ohagya-index .oi-step.is-active.is-neutral .oi-step-bar {
	background: var(--oi-neutral);
}

.ohagya-index .oi-step-label {
	color: var(--oi-muted);
	font-size: 0.68em;
	white-space: nowrap;
}

.ohagya-index .oi-step.is-active .oi-step-label {
	color: var(--oi-fg);
	font-weight: 700;
}

/* ---- 理由 ---- */

.ohagya-index .oi-reason {
	margin: 1em 0 0;
	font-size: 0.92em;
	line-height: 1.75;
}

.ohagya-index .oi-degraded {
	margin: 0.6em 0 0;
	color: var(--oi-muted);
	font-size: 0.78em;
}

/* ---- 確度 ---- */

.ohagya-index .oi-confidence {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.7em;
	font-size: 0.85em;
}

.ohagya-index .oi-conf-label {
	color: var(--oi-muted);
}

.ohagya-index .oi-conf-dots {
	color: var(--oi-accent);
	letter-spacing: 0.1em;
}

.ohagya-index .oi-conf-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ---- 見出し ---- */

.ohagya-index .oi-sub {
	margin: 1.4em 0 0.5em;
	padding: 0;
	border: 0;
	color: var(--oi-muted);
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* ---- 主な材料 ---- */

.ohagya-index .oi-driver-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ohagya-index .oi-driver-list li {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 0.32em 0;
	margin: 0;
	font-size: 0.92em;
}

.ohagya-index .oi-arrow {
	width: 1em;
	font-weight: 700;
}

.ohagya-index .oi-driver-name {
	flex: 1 1 auto;
	font-weight: 600;
}

.ohagya-index .oi-driver-impact {
	color: var(--oi-muted);
	font-size: 0.85em;
	white-space: nowrap;
}

.ohagya-index .is-plus .oi-arrow,
.ohagya-index li.is-plus .oi-driver-name {
	color: var(--oi-plus);
}

.ohagya-index li.is-minus .oi-arrow,
.ohagya-index li.is-minus .oi-driver-name {
	color: var(--oi-minus);
}

/* ---- 詳細データ ---- */

.ohagya-index .oi-materials {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.88em;
}

.ohagya-index .oi-materials th,
.ohagya-index .oi-materials td {
	padding: 0.5em 0.25em;
	border: 0;
	border-top: 1px solid var(--oi-line);
	background: none;
	vertical-align: middle;
}

.ohagya-index .oi-materials tr:first-child th,
.ohagya-index .oi-materials tr:first-child td {
	border-top: 0;
}

.ohagya-index .oi-materials th {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
}

.ohagya-index .oi-num,
.ohagya-index .oi-chg {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ohagya-index .oi-num {
	font-weight: 700;
}

.ohagya-index .oi-materials td.oi-chg {
	padding-left: 0.6em;
	color: var(--oi-muted);
	font-size: 0.92em;
}

.ohagya-index .oi-impact {
	text-align: right;
	white-space: nowrap;
	font-size: 0.92em;
	font-weight: 600;
}

.ohagya-index .oi-impact.is-plus {
	color: var(--oi-plus);
}

.ohagya-index .oi-impact.is-minus {
	color: var(--oi-minus);
}

.ohagya-index .oi-impact.is-neutral {
	color: var(--oi-muted);
	font-weight: 400;
}

.ohagya-index .oi-note {
	display: block;
	color: var(--oi-muted);
	font-weight: 400;
	font-size: 0.75em;
	white-space: normal;
}

.ohagya-index .oi-row--missing td {
	color: var(--oi-muted);
	text-align: left;
}

/* ---- スパークライン（控えめに） ---- */

.ohagya-index .oi-sparkcell {
	width: 104px;
	text-align: right;
	line-height: 0;
}

.ohagya-index .oi-spark {
	width: 96px;
	max-width: 100%;
	height: 26px;
	opacity: 0.5;
}

.ohagya-index .oi-spark-line {
	fill: none;
	stroke-width: 1.4;
	stroke-linejoin: round;
	stroke-linecap: round;
	stroke: var(--oi-neutral);
}

.ohagya-index .oi-spark.is-plus .oi-spark-line {
	stroke: var(--oi-plus);
}

.ohagya-index .oi-spark.is-minus .oi-spark-line {
	stroke: var(--oi-minus);
}

/* ---- 予想の推移（任意表示） ---- */

.ohagya-index .oi-history {
	display: block;
	width: 100%;
	height: auto;
}

.ohagya-index .oi-history .oi-bar.is-plus {
	fill: var(--oi-plus);
}

.ohagya-index .oi-history .oi-bar.is-minus {
	fill: var(--oi-minus);
}

.ohagya-index .oi-history .oi-axis {
	stroke: var(--oi-line);
	stroke-width: 1;
}

/* ---- 注記 ---- */

.ohagya-index .oi-disclaimer {
	margin: 1.2em 0 0;
	padding-top: 0.8em;
	border-top: 1px solid var(--oi-line);
	color: var(--oi-muted);
	font-size: 0.72em;
	line-height: 1.65;
}

.ohagya-index .oi-disclaimer a {
	color: inherit;
	text-decoration: underline;
}

.ohagya-index-error {
	padding: 0.8em 1em;
	border-left: 3px solid #d94437;
	background: #fdf3f2;
	color: #7a2b25;
	font-size: 0.9em;
}

/* ---- コンパクト表示 ---- */

.ohagya-index.is-compact {
	padding: 1em 1.1em;
}

.ohagya-index.is-compact .oi-verdict {
	font-size: 1.4em;
}

.ohagya-index.is-compact .oi-dot {
	width: 34px;
	height: 34px;
}

/* ---- 狭い画面 ---- */

@media (max-width: 560px) {
	.ohagya-index {
		padding: 1.1em 1em 1em;
		font-size: 14px;
	}

	.ohagya-index .oi-name {
		font-size: 1.15em;
	}

	.ohagya-index .oi-verdict {
		font-size: 1.5em;
	}

	.ohagya-index .oi-step-label {
		font-size: 0.62em;
	}

	.ohagya-index .oi-sparkcell {
		width: 62px;
	}

	.ohagya-index .oi-spark {
		width: 56px;
		height: 22px;
	}

	.ohagya-index .oi-materials {
		font-size: 0.82em;
	}
}

/* ---- ダークテーマ ----

   既定（theme="auto"）は閲覧者の OS 設定に追従する。
   theme="light" / theme="dark" で固定できる。
   CSS だけで完結させるため同じトークンを2か所に書いている。 */

@media (prefers-color-scheme: dark) {
	.ohagya-index:not(.oi-theme-light) {
		--oi-bg: #181c22;
		--oi-fg: #e7ecf2;
		--oi-muted: #8b96a3;
		--oi-line: #2a313a;
		--oi-soft: #212730;
		--oi-plus: #3fbb77;
		--oi-minus: #ea5c4f;
		--oi-neutral: #8b96a3;
		/* 暗い背景では薄い影は見えないので黒を強める */
		--oi-shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 14px 32px rgba(0, 0, 0, 0.46);
	}

	.ohagya-index-error {
		background: #2a1c1b;
		color: #f0b5b0;
	}
}

.ohagya-index.oi-theme-dark {
	--oi-bg: #181c22;
	--oi-fg: #e7ecf2;
	--oi-muted: #8b96a3;
	--oi-line: #2a313a;
	--oi-soft: #212730;
	--oi-plus: #3fbb77;
	--oi-minus: #ea5c4f;
	--oi-neutral: #8b96a3;
}