/*
 * 点数の段（神作・傑作・名作…）の見た目。
 *
 * 記事の採点カードと、レビュー一覧の行の両方で使うので、
 * プラグイン側の1枚にまとめて両方から読む。
 * 段の名前は設定で変えられるため、名前ではなく「上から何番目か」で色を決める。
 *
 * 上位3段は塗り、下位3段は枠だけ。
 * 色の濃さを少しずつ変えるだけだと段の違いが伝わらないので、
 * 「勧めたい / 悪くはない」の境目を塗りと枠の差にしている。
 * 最上段だけ外側に輪を足して、ひと目で分かるようにする。
 */

.tab-tier {
	display: inline-flex;
	align-items: center;
	padding: .18em .75em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .78em;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.7;
	white-space: nowrap;
	vertical-align: middle;
	text-indent: .1em; /* letter-spacing が末尾にも入るぶんの片寄りを戻す */
}

/* 段ごとの色。--tier は点数の数字など、札の外でも使う */
.tab-tier--1, .is-tier-1 { --tier: #a8780c; }
.tab-tier--2, .is-tier-2 { --tier: #b8501f; }
.tab-tier--3, .is-tier-3 { --tier: #2c7a68; }
.tab-tier--4, .is-tier-4 { --tier: #3f6fa8; }
.tab-tier--5, .is-tier-5 { --tier: #6b7280; }
.tab-tier--6, .is-tier-6 { --tier: #9aa3af; }

/* ── 上位3段：塗り ── */

.tab-tier--1 {
	border-color: #c39516;
	background: linear-gradient(160deg, #f7e099 0%, #dcac26 52%, #b5820f 100%);
	color: #4a3403;
	box-shadow: 0 0 0 2px rgba(196, 150, 25, .2);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
}

.tab-tier--2 {
	border-color: #a4451a;
	background: linear-gradient(160deg, #d4693a, #b8501f);
	color: #fff;
}

.tab-tier--3 {
	border-color: #256657;
	background: linear-gradient(160deg, #3d9080, #2c7a68);
	color: #fff;
}

/* ── 下位3段：枠だけ ── */

.tab-tier--4 {
	border-color: rgba(63, 111, 168, .5);
	background: rgba(63, 111, 168, .08);
	color: #3f6fa8;
}

.tab-tier--5 {
	border-color: rgba(107, 114, 128, .45);
	background: rgba(107, 114, 128, .07);
	color: #6b7280;
}

.tab-tier--6 {
	border-color: rgba(154, 163, 175, .45);
	background: none;
	color: #9aa3af;
	font-weight: 700;
	letter-spacing: .06em;
}