/**
 * ドーナツチャート（円形プログレスバー） - フロント & エディタ共通スタイル
 *
 * テーマ（SWELL / AFFINGER 等）の既存 CSS と衝突しないよう、
 * すべて .dpb-donut 配下にスコープし、必要な値は明示的に打ち消している。
 */

.dpb-donut {
	display: flex;
	margin: 0 0 1.5em;
}

.dpb-donut * {
	box-sizing: border-box;
}

.dpb-donut.is-justify-left {
	justify-content: flex-start;
}

.dpb-donut.is-justify-center {
	justify-content: center;
}

.dpb-donut.is-justify-right {
	justify-content: flex-end;
}

.dpb-donut__inner {
	position: relative;
	width: var(--dpb-size, 200px);
	max-width: 100%;
	line-height: 1;
	container-type: inline-size;
}

.dpb-donut__svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	vertical-align: top;
	overflow: visible; /* 影が切れないように */
}

.dpb-donut__track,
.dpb-donut__bar {
	fill: none;
}

/*
 * ここでの dashoffset は「アニメーションしない場合の最終状態」。
 *
 * アニメーション中の値は view.js が data 属性を読んでインラインで直接書き込む。
 * CSS 変数の解決やテーマ側の詳細度に左右されず、必ず「0% → 目標値」の向きで
 * 動かすため、アニメーションの経路にはこのルールを一切関与させていない。
 *
 * var() の第2引数は、カスタムプロパティが失われた場合でも
 * dasharray/dashoffset が無効値にならないようにするための保険。
 */
.dpb-donut__bar {
	stroke-dasharray: var(--dpb-circumference, 10000);
	stroke-dashoffset: var(--dpb-offset, 0);
	transition: stroke-dashoffset var(--dpb-duration, 1200ms) cubic-bezier(0.33, 1, 0.68, 1);
}

/*
 * 0% の初期状態をセットする一瞬だけトランジションを切る。
 * これがないと、読み込み時に「最終値 → 0%」へ縮む動きが見えてしまう。
 */
.dpb-donut.dpb-arming .dpb-donut__bar {
	transition: none;
}

/* --- 中央テキスト --- */

.dpb-donut__text {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	padding: 0 12%;
	text-align: center;
	pointer-events: none;
	color: var(--dpb-text-color, inherit);
}

.dpb-donut__text.is-italic {
	font-style: italic;
}

.dpb-donut__text.is-serif {
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS PMincho", serif;
}

.dpb-donut__number {
	display: block;
	font-size: var(--dpb-fs-px, 32px);
	font-weight: var(--dpb-weight, 700);
	line-height: 1.1;
	white-space: nowrap;
}

.dpb-donut__suffix {
	font-size: 0.6em;
	margin-left: 0.05em;
}

.dpb-donut__label {
	display: block;
	font-size: var(--dpb-sub-px, 14px);
	font-weight: 400;
	line-height: 1.35;
	opacity: 0.85;
}

/* 円が縮んだときも文字比率を保つ */
@supports (font-size: 1cqw) {
	.dpb-donut__number {
		font-size: var(--dpb-fs-cqw, 16cqw);
	}

	.dpb-donut__label {
		font-size: var(--dpb-sub-cqw, 7cqw);
	}
}

/* 「視差効果を減らす」設定のときは動かさない（view.js 側でも処理を飛ばしている）。 */
@media (prefers-reduced-motion: reduce) {
	.dpb-donut__bar {
		transition: none;
	}
}