/*
   Basketball Freak TRADE LAB

   スコープは .bf-tl 配下のみ。既存サイトへ漏らさない。
   デザイントークンは Salary DB（--bf-sal-*）があればそれを使い、
   無くても単体で成立するよう自前の既定値を持つ。

   スマホ優先。320px で横に溢れないことを最優先にしている。
   横に伸びうるもの（表・タブ）は自分の中でスクロールさせる。
*/

.bf-tl {
	--tl-ink:    var(--bf-sal-ink,    #16161a);
	--tl-ink-2:  var(--bf-sal-ink-2,  #4a4a55);
	--tl-ink-3:  var(--bf-sal-ink-3,  #6d6d7a);
	--tl-bg:     var(--bf-sal-bg,     #ffffff);
	--tl-bg-2:   var(--bf-sal-bg-2,   #f6f6f8);
	--tl-bg-3:   var(--bf-sal-bg-3,   #eeeef2);
	--tl-line:   var(--bf-sal-line,   #dcdce3);
	--tl-accent: var(--bf-sal-accent, #17408B);
	--tl-radius: 10px;

	/* 判定色。チームカラーとは分ける。 */
	--tl-pass: #1c8a52;
	--tl-warn: #c97a00;
	--tl-fail: #c0392b;
	--tl-unk:  #6d6d7a;

	color: var(--tl-ink);
	background: var(--tl-bg);
	font-size: 14px;
	line-height: 1.7;
}

/*
   OSがダークモードでも常にライト表示を維持する（2026-09-09）。
   Salary DB / Team Hub は最初からライト固定でダーク分岐を持たない。
   Trade Lab だけ prefers-color-scheme: dark に反応してダーク背景に
   切り替えていたため、iPhone Safari 側がダークモードだと選手カード等が
   黒背景になっていた。ここは意図的に何も上書きしない。
*/

.bf-tl *,
.bf-tl *::before,
.bf-tl *::after { box-sizing: border-box; }

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

.bf-tl-h2 {
	margin: 20px 0 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
}

.bf-tl-h3 {
	margin: 12px 0 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--tl-ink-2);
}

.bf-tl-lead { margin: 0 0 14px; color: var(--tl-ink-2); }

.bf-tl-note {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--tl-ink-3);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.bf-tl-warn {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--tl-warn);
}

.bf-tl-unknown {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--tl-ink-3);
}

/* ---------- ヒーロー ---------- */

.bf-tl-hero {
	padding: 4px 0 2px 16px;
	border-left: 6px solid var(--tl-accent);
	margin: 0 0 16px;
}

.bf-tl-hero__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--tl-ink-3);
}

.bf-tl-hero__title {
	margin: 0 0 4px;
	font-size: 24px;
	line-height: 1.25;
	text-wrap: balance;
}

.bf-tl-hero__tag {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--tl-accent);
}

/* ---------- 上部のチーム表示（sticky） ---------- */

.bf-tl-sticky {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--tl-bg);
	border-bottom: 1px solid var(--tl-line);
	padding: 8px 0;
}

.bf-tl-teams {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bf-tl-swap { color: var(--tl-ink-3); font-weight: 700; }

.bf-tl-teamchip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px 2px 8px;
	border-radius: 999px;
	border: 2px solid var(--tl-s, var(--tl-line));
	background: var(--tl-p, var(--tl-bg-2));
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
}

/*
   見た目は小さいままで、指が当たる範囲だけ広げる。
   丸を 44px にすると chip が縦に伸びてレイアウトが変わるので、
   ::after を重ねて当たり判定だけ広げる。
*/
.bf-tl-teamchip__x {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border: none;
	border-radius: 999px;
	background: rgba(255,255,255,.25);
	color: #fff;
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.bf-tl-addteam,
.bf-tl-ghost {
	min-height: 32px;
	padding: 0 12px;
	border: 1px dashed var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.bf-tl-ghost { margin-top: 12px; border-style: solid; min-height: 44px; }

/* ---------- タブ ---------- */

.bf-tl-teamchip__x::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.bf-tl-tabs {
	position: sticky;
	top: 46px;
	z-index: 19;
	background: var(--tl-bg);
	border-bottom: 1px solid var(--tl-line);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-tl-tabs__list {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: max-content;
	min-width: 100%;
}

.bf-tl-tab {
	min-height: 44px;
	padding: 0 14px;
	border: none;
	border-bottom: 3px solid transparent;
	background: none;
	color: var(--tl-ink-3);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.bf-tl-tab[aria-pressed="true"] {
	color: var(--tl-accent);
	border-bottom-color: var(--tl-accent);
}

/* ---------- チーム選択 ---------- */

.bf-tl-teamgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 8px;
}

.bf-tl-teambtn {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 10px;
	border: 1px solid var(--tl-line);
	border-left: 5px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bf-tl-teambtn.is-on { opacity: .45; cursor: default; }

.bf-tl-teambtn__abbr {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 30px;
	border-radius: 6px;
	background: var(--tl-p, var(--tl-ink));
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.bf-tl-teambtn__ja { font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- 送り先選択 ---------- */

.bf-tl-dest__what { margin: 0 0 10px; font-weight: 700; }

.bf-tl-destbtn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bf-tl-destbtn__abbr { font-weight: 700; }

/* ---------- チーム見出し ---------- */

.bf-tl-teamhead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	margin: 12px 0;
	border-radius: var(--tl-radius);
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-p, var(--tl-accent));
	background: var(--tl-bg-2);
}

.bf-tl-teamhead__abbr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 34px;
	border-radius: 8px;
	border: 2px solid var(--tl-s, transparent);
	background: var(--tl-p, var(--tl-ink));
	color: #fff;
	font-weight: 700;
}

.bf-tl-teamhead__names { display: flex; flex-direction: column; min-width: 0; }
.bf-tl-teamhead__ja { font-weight: 700; overflow-wrap: anywhere; }
.bf-tl-teamhead__en { font-size: 11px; color: var(--tl-ink-3); }

/* ---------- 選手カード ---------- */

.bf-tl-plist,
.bf-tl-dlist,
.bf-tl-side__list,
.bf-tl-tl,
.bf-tl-saves,
.bf-tl-five__list,
.bf-tl-search__res {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-tl-p {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	grid-template-areas: "av body sal" "av body btn";
	align-items: center;
	gap: 2px 10px;
	padding: 8px 10px;
	margin: 0 0 6px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg);
}

.bf-tl-p.is-on { border-color: var(--tl-accent); background: var(--tl-bg-2); }

.bf-tl-p__av {
	grid-area: av;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 2px solid var(--tl-s, var(--tl-line));
	background: var(--tl-p, var(--tl-bg-3));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.bf-tl-p__body { grid-area: body; min-width: 0; }
.bf-tl-p__name { display: block; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

.bf-tl-p__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--tl-ink-3);
}

.bf-tl-p__yr { font-variant-numeric: tabular-nums; }

.bf-tl-p__sal {
	grid-area: sal;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

.bf-tl-p__sal.is-unknown { color: var(--tl-ink-3); font-weight: 400; font-size: 11.5px; }

.bf-tl-p__btn,
.bf-tl-d__btn {
	grid-area: btn;
	justify-self: end;
	/* Trade Lab で一番よく押すボタン。指の下限に合わせる。 */
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.bf-tl-p__btn[aria-pressed="true"],
.bf-tl-d__btn[aria-pressed="true"] {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}

.bf-tl-tag {
	display: inline-block;
	padding: 0 6px;
	border: 1px solid var(--tl-line);
	border-radius: 4px;
	background: var(--tl-bg-3);
	color: var(--tl-ink-2);
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---------- 指名権 ---------- */

.bf-tl-d {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	margin: 0 0 6px;
	border: 1px solid var(--tl-line);
	border-left: 4px solid var(--tl-unk);
	border-radius: 8px;
}

.bf-tl-d--selectable { border-left-color: var(--tl-pass); }
.bf-tl-d--review     { border-left-color: var(--tl-warn); }
.bf-tl-d--restricted { border-left-color: var(--tl-fail); }
.bf-tl-d.is-on       { background: var(--tl-bg-2); }

.bf-tl-d__body { min-width: 0; }
.bf-tl-d__label { display: block; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }

.bf-tl-d__state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: var(--tl-ink-3);
}

/* ---------- タイムライン ---------- */

.bf-tl-tl__row {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 8px;
	padding: 6px 2px;
	border-bottom: 1px solid var(--tl-line);
	align-items: center;
}

.bf-tl-tl__row:last-child { border-bottom: none; }
.bf-tl-tl__y { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.bf-tl-tl__items { display: flex; flex-wrap: wrap; gap: 4px; }

.bf-tl-tl__chip {
	padding: 1px 7px;
	border: 1px solid var(--tl-line);
	border-radius: 4px;
	background: var(--tl-bg-2);
	font-size: 10.5px;
	font-weight: 700;
}

.bf-tl-tl__chip.is-out {
	text-decoration: line-through;
	opacity: .55;
	border-style: dashed;
}

/* ---------- PACKAGE ---------- */

.bf-tl-pkgteam {
	padding: 10px 12px;
	margin: 0 0 14px;
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
}

.bf-tl-side { margin: 0 0 10px; }

.bf-tl-side__list li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 4px 0;
	border-bottom: 1px solid var(--tl-line);
	font-size: 12.5px;
}

.bf-tl-side__list li:last-child { border-bottom: none; }
.bf-tl-side__n { min-width: 0; overflow-wrap: anywhere; }
.bf-tl-side__v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bf-tl-side__empty { color: var(--tl-ink-3); }
.bf-tl-side__total { margin: 6px 0 0; font-size: 12px; font-weight: 700; }

/* 表は自分の中でスクロールさせる。ページを押し広げない。 */
.bf-tl-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-tl-ba__t,
.bf-tl-compare__t {
	width: 100%;
	min-width: 280px;
	border-collapse: collapse;
	font-size: 12.5px;
}

.bf-tl-ba__t th,
.bf-tl-ba__t td,
.bf-tl-compare__t th,
.bf-tl-compare__t td {
	padding: 6px 6px;
	border-bottom: 1px solid var(--tl-line);
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bf-tl-ba__t th,
.bf-tl-compare__t th {
	text-align: left;
	font-weight: 400;
	color: var(--tl-ink-3);
	white-space: normal;
}

.bf-tl-ba__arrow { color: var(--tl-ink-3); width: 20px; }
.bf-tl-ba__a.is-up { color: var(--tl-pass); font-weight: 700; }
.bf-tl-ba__a.is-down { color: var(--tl-fail); font-weight: 700; }

/* ---------- 将来 / Depth / Five ---------- */

.bf-tl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.bf-tl-chip {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.bf-tl-chip[aria-pressed="true"] {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}

.bf-tl-kv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.bf-tl-kv div { display: flex; align-items: baseline; gap: 5px; }
.bf-tl-kv dt { font-size: 11px; color: var(--tl-ink-3); }
.bf-tl-kv dd { margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bf-tl-depth__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 6px;
}

.bf-tl-depth__col {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	min-width: 0;
}

.bf-tl-depth__pos { font-size: 11px; font-weight: 700; color: var(--tl-ink-3); }
.bf-tl-depth__p { font-size: 11.5px; overflow-wrap: anywhere; }
.bf-tl-depth__none { color: var(--tl-ink-3); }

.bf-tl-five__list { display: flex; flex-wrap: wrap; gap: 6px; }

.bf-tl-five__btn {
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

.bf-tl-five__btn.is-on {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
	font-weight: 700;
}

/* ---------- CHECK ---------- */

.bf-tl-verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--tl-radius);
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-unk);
	font-weight: 700;
}

.bf-tl-verdict--pass    { border-left-color: var(--tl-pass); }
.bf-tl-verdict--warning { border-left-color: var(--tl-warn); }
.bf-tl-verdict--fail    { border-left-color: var(--tl-fail); }
.bf-tl-verdict--unknown { border-left-color: var(--tl-unk); }

.bf-tl-verdict__mark { font-size: 18px; }
.bf-tl-verdict__text { font-size: 14px; overflow-wrap: anywhere; }

.bf-tl-rule {
	padding: 8px 10px;
	margin: 0 0 8px;
	border: 1px solid var(--tl-line);
	border-left: 4px solid var(--tl-unk);
	border-radius: 8px;
}

.bf-tl-rule--pass    { border-left-color: var(--tl-pass); }
.bf-tl-rule--warning { border-left-color: var(--tl-warn); }
.bf-tl-rule--fail    { border-left-color: var(--tl-fail); }

.bf-tl-rule__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.bf-tl-rule__title { font-size: 13px; font-weight: 700; }

.bf-tl-rule__level {
	margin-left: auto;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--tl-ink-3);
}

.bf-tl-rule__why {
	margin: 6px 0 0;
	padding-left: 20px;
	font-size: 12px;
	color: var(--tl-ink-2);
}

.bf-tl-rule__why li { margin: 2px 0; overflow-wrap: anywhere; }

.bf-tl-fix__list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border-bottom: 1px solid var(--tl-line);
	font-size: 12.5px;
}

.bf-tl-fix__t { min-width: 0; overflow-wrap: anywhere; }

.bf-tl-fix__do {
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--tl-accent);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-accent);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- IMPACT / SCORE ---------- */

.bf-tl-impact__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--tl-line);
}

.bf-tl-impact__k { font-size: 11px; font-weight: 700; color: var(--tl-ink-3); letter-spacing: .06em; }
.bf-tl-impact__v { grid-column: 1; font-size: 12.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.bf-tl-impact__s {
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	font-size: 11.5px;
	font-weight: 700;
	white-space: nowrap;
}

.bf-tl-impact--improved .bf-tl-impact__s { color: var(--tl-pass); }
.bf-tl-impact--worse .bf-tl-impact__s { color: var(--tl-fail); }
.bf-tl-impact--unknown .bf-tl-impact__s { color: var(--tl-ink-3); }

.bf-tl-score__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin: 10px 0 4px;
}

.bf-tl-score__ja { font-weight: 700; }
.bf-tl-score__grade { font-size: 20px; font-weight: 700; }

.bf-tl-score__row {
	display: grid;
	grid-template-columns: 88px 1fr 32px;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
}

.bf-tl-score__k { font-size: 10.5px; color: var(--tl-ink-3); font-weight: 700; }

.bf-tl-score__bar {
	height: 6px;
	border-radius: 999px;
	background: var(--tl-bg-3);
	overflow: hidden;
}

.bf-tl-score__fill { display: block; height: 100%; background: var(--tl-accent); }
.bf-tl-score__v { font-size: 11.5px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- MODE ---------- */

.bf-tl-mission {
	padding: 12px 14px;
	margin: 0 0 14px;
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-warn);
	border-radius: var(--tl-radius);
}

.bf-tl-mission--done { border-left-color: var(--tl-pass); }
.bf-tl-mission__team { font-size: 12px; color: var(--tl-ink-3); }
.bf-tl-mission__v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-tl-mission__done { font-size: 16px; font-weight: 700; color: var(--tl-pass); }

.bf-tl-modebtn {
	display: block;
	width: 100%;
	min-height: 56px;
	margin: 0 0 8px;
	padding: 8px 12px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bf-tl-modebtn__n { display: block; font-size: 13px; font-weight: 700; }
.bf-tl-modebtn__d { display: block; font-size: 11.5px; color: var(--tl-ink-3); }

.bf-tl-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 8px 8px 0 0;
	padding: 0 16px;
	border: 2px solid var(--tl-accent);
	border-radius: 999px;
	background: var(--tl-accent);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.bf-tl-weekly__m { font-size: 14px; font-weight: 700; margin: 0; }
.bf-tl-weekly__t { font-size: 12px; color: var(--tl-ink-3); margin: 2px 0 0; }

/* ---------- 検索 ---------- */

.bf-tl-search {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	font-size: 13px;
}

.bf-tl-search__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 4px 8px;
	border: none;
	border-bottom: 1px solid var(--tl-line);
	background: none;
	color: var(--tl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.bf-tl-search__n { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.bf-tl-search__s { font-size: 11.5px; color: var(--tl-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- SHARE ---------- */

.bf-tl-copyrow { display: flex; gap: 6px; align-items: center; margin: 8px 0; }

.bf-tl-copyrow__in {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg-2);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
}

.bf-tl-saves li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--tl-line);
}

.bf-tl-saves__open {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	border: none;
	background: none;
	color: var(--tl-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	text-align: left;
	overflow-wrap: anywhere;
	cursor: pointer;
}

.bf-tl-saves__del {
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-3);
	font: inherit;
	font-size: 11.5px;
	cursor: pointer;
}

/* ---------- 共有カード ---------- */

.bf-tl-card {
	margin: 10px 0 0;
	padding: 14px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--tl-a, var(--tl-accent)) 14%, var(--tl-bg)) 0%,
			var(--tl-bg) 45%,
			color-mix(in srgb, var(--tl-b, var(--tl-accent)) 14%, var(--tl-bg)) 100%);
	overflow: hidden;
}

@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.bf-tl-card { background: var(--tl-bg-2); }
}

.bf-tl-card__brand { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--tl-ink-3); }
.bf-tl-card__type { margin: 2px 0 10px; font-size: 15px; font-weight: 700; }

.bf-tl-card__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px;
}

.bf-tl-card__col {
	padding: 8px 10px;
	border-radius: 8px;
	border-left: 5px solid var(--tl-p, var(--tl-accent));
	background: var(--tl-bg);
	min-width: 0;
}

.bf-tl-card__abbr { display: block; font-size: 16px; font-weight: 700; }
.bf-tl-card__lab { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--tl-ink-3); }

.bf-tl-card__list { margin: 4px 0 0; padding-left: 16px; font-size: 12px; }
.bf-tl-card__list li { overflow-wrap: anywhere; }

/* 2026-09-09追加。IN/OUT/NET（給与）。チームカラー・判定色とは別の中間グレー。 */
.bf-tl-card__stat { margin: 6px 0 0; font-size: 10.5px; font-weight: 600; color: var(--tl-ink-3); overflow-wrap: anywhere; }

/* verdict の色は判定色（PASS=緑/REVIEW=橙/FAIL=赤/UNKNOWN=灰）をJS側でstyle.colorに直接設定する。
   チームカラー（--tl-p等）とは別系統に保つため、CSS側では色を固定しない。 */
.bf-tl-card__verdict { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.bf-tl-card__foot { margin: 6px 0 0; font-size: 10.5px; color: var(--tl-ink-3); }

.bf-tl-manga { margin: 12px 0 0; }
.bf-tl-manga summary { cursor: pointer; font-size: 12.5px; font-weight: 700; min-height: 44px; display: flex; align-items: center; }

.bf-tl-manga__p {
	margin: 6px 0;
	padding: 10px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg-2);
	font-size: 11px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ---------- 下部サマリー（sticky） ---------- */

.bf-tl-summary {
	position: sticky;
	bottom: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	margin: 16px 0 0;
	border-top: 1px solid var(--tl-line);
	background: var(--tl-bg);
}

.bf-tl-summary__flows { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; min-width: 0; }
.bf-tl-summary__t { display: flex; flex-direction: column; min-width: 0; }
.bf-tl-summary__ab { font-size: 11px; font-weight: 700; color: var(--tl-ink-3); }
.bf-tl-summary__io { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bf-tl-summary__v {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-left-width: 5px;
	border-radius: 8px;
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

/* ---------- トースト ---------- */

.bf-tl-toast {
	position: fixed;
	left: 50%;
	bottom: 76px;
	transform: translateX(-50%);
	z-index: 60;
	max-width: min(92vw, 420px);
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid var(--tl-line);
	background: var(--tl-bg);
	color: var(--tl-ink);
	font-size: 12.5px;
	box-shadow: 0 4px 16px rgba(0,0,0,.18);
	text-align: center;
	overflow-wrap: anywhere;
}

.bf-tl-toast--warn  { border-color: var(--tl-warn); }
.bf-tl-toast--error { border-color: var(--tl-fail); }

/* ---------- 免責 ---------- */

.bf-tl-disc {
	margin: 28px 0 0;
	padding: 12px 14px;
	border-top: 1px solid var(--tl-line);
	font-size: 11.5px;
	color: var(--tl-ink-3);
	line-height: 1.8;
}

.bf-tl-disc p { margin: 0 0 6px; }
.bf-tl-disc p:last-child { margin-bottom: 0; }

/* ---------- フォーカス ---------- */

.bf-tl button:focus-visible,
.bf-tl input:focus-visible,
.bf-tl summary:focus-visible {
	outline: 3px solid var(--tl-accent);
	outline-offset: 2px;
}

/* ---------- 広い画面 ---------- */

@media (min-width: 900px) {
	.bf-tl-pkg { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
	.bf-tl-pkg > .bf-tl-future,
	.bf-tl-pkg > .bf-tl-depth,
	.bf-tl-pkg > .bf-tl-five { grid-column: 1 / -1; }
	.bf-tl-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
	.bf-tl-check > .bf-tl-verdict,
	.bf-tl-check > .bf-tl-note { grid-column: 1 / -1; }
}

@media (max-width: 380px) {
	.bf-tl-p { grid-template-columns: 30px 1fr; grid-template-areas: "av body" "av sal" "btn btn"; }
	.bf-tl-p__btn { justify-self: stretch; }
	.bf-tl-p__sal { text-align: left; }
	.bf-tl-score__row { grid-template-columns: 72px 1fr 28px; }
}

/* ---------- 他ページからの入口 ---------- */

/*
   Team Hub / Salary DB / 記事下に出すリンク。
   Trade Lab 本体のCSSはTrade Labのページでしか読まないので、
   使う側でこの2クラスだけ足すか、インラインで出す。
*/
.bf-tl-entry { margin: 14px 0 0; }

.bf-tl-entry__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 2px solid var(--tl-accent, #17408B);
	border-radius: 999px;
	color: var(--tl-accent, #17408B);
	background: var(--tl-bg, #fff);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.bf-tl-entry__link:hover,
.bf-tl-entry__link:focus-visible {
	background: var(--tl-bg-2, #f6f6f8);
	text-decoration: none;
}
/* ---------- 漫画風カード ---------- */

.bf-tl-manga__out { margin: 12px 0 0; }

/*
   キャンバスは 1536px 等で描くが、表示は画面幅に収める。
   縦横比は canvas の属性が保つので、ここでは幅だけ縛る。
*/
.bf-tl-manga__canvas {
	margin: 0 0 10px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	overflow: hidden;
	background: var(--tl-bg-2);
	line-height: 0;
}

.bf-tl-manga__canvas canvas {
	display: block;
	width: 100%;
	height: auto;
}

.bf-tl-manga__act {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.bf-tl-manga__prompt { flex: 1 1 100%; margin: 6px 0 0; }

.bf-tl-manga__prompt summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 700;
}

.bf-tl-manga__p {
	margin: 6px 0;
	padding: 10px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg-2);
	font-size: 11px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	max-height: 320px;
	overflow-y: auto;
}

/* ---------- 他ページへの導線 ---------- */

.bf-tl-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
}

.bf-tl-links__a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	color: var(--tl-ink-2);
	background: var(--tl-bg);
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
}

.bf-tl-links__a:hover,
.bf-tl-links__a:focus-visible {
	background: var(--tl-bg-2);
	color: var(--tl-accent);
	text-decoration: none;
}

/* ==========================================================
   SINGLE WORKSPACE（2026-09-09追加）
   ==========================================================

   「順番に入力して完成させるフォーム」ではなく、
   「1つの画面上で何度も資産を入れ替えて遊べるGM Sandbox」にするための追加分。
   既存クラス（.bf-tl-p / .bf-tl-d / .bf-tl-teamhead 等）はそのまま再利用し、
   ここでは「並べ方」「グレード」「ドロワー」「モーダル」だけを足す。
   ========================================================== */

/* ---------- チームレール（.bf-tl-teams を拡張、sticky top は既存のまま） ---------- */

.bf-tl-railchip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px 2px 8px;
	border-radius: 999px;
	border: 2px solid var(--tl-s, var(--tl-line));
	background: var(--tl-p, var(--tl-bg-2));
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	min-height: 32px;
}

.bf-tl-railchip__grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 18px;
	padding: 0 4px;
	border-radius: 5px;
	background: rgba(255,255,255,.28);
	font-size: 10.5px;
	font-weight: 800;
}

/* ---------- ワークスペース（チームパネルを同時表示） ---------- */

.bf-tl-workspace {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 14px 0;
}

@media (min-width: 620px) {
	.bf-tl-workspace { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1280px) {
	/* 3チーム: 3列。4チーム: 2x2（次のmin-widthで上書き） */
	.bf-tl-workspace[data-teams="3"] { grid-template-columns: repeat(3, 1fr); }
	.bf-tl-workspace[data-teams="2"] { grid-template-columns: repeat(2, minmax(0,560px)); justify-content: center; }
}
@media (min-width: 1024px) {
	.bf-tl-workspace[data-teams="4"] { grid-template-columns: repeat(2, 1fr); }
}

.bf-tl-panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--tl-line);
	border-top: 6px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	padding: 12px;
}

.bf-tl-panel__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.bf-tl-panel__abbr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 30px;
	border-radius: 8px;
	background: var(--tl-p, var(--tl-ink));
	color: #fff;
	font-weight: 700;
	flex: 0 0 auto;
}

.bf-tl-panel__names { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bf-tl-panel__ja { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.bf-tl-panel__en { font-size: 10.5px; color: var(--tl-ink-3); }

.bf-tl-panel__x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 999px;
	background: var(--tl-bg-3);
	color: var(--tl-ink-2);
	font-size: 14px;
	cursor: pointer;
}

.bf-tl-panel__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 8px;
	font-size: 11.5px;
	color: var(--tl-ink-2);
	font-variant-numeric: tabular-nums;
}

.bf-tl-panel__cba {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
}

.bf-tl-panel__body {
	min-height: 0;
	overflow-y: auto;
	border: 1px dashed var(--tl-line);
	border-radius: 8px;
	padding: 6px;
}

/*
   Zero Scroll化前（チーム0の開始画面や、JS未対応環境向けのフォールバック）では
   .bf-tl-panel に明示的な高さが無いため、ここは自然な高さのまま
   （overflow-yはmin-heightが0のflexアイテムでない限り実害はない）。
*/

.bf-tl-panel__label {
	margin: 4px 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tl-ink-3);
	letter-spacing: .04em;
}

.bf-tl-panel__more summary {
	cursor: pointer;
	min-height: 40px;
	display: flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--tl-ink-2);
}

/* ---------- チーム追加タイル（Workspace内、ページ遷移なし） ---------- */

.bf-tl-addtile {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
	border: 2px dashed var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-bg-2);
	color: var(--tl-ink-2);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.bf-tl-addtile:hover,
.bf-tl-addtile:focus-visible { background: var(--tl-bg-3); }

/* ---------- グレードバッジ ---------- */

.bf-tl-grade {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 26px;
	padding: 0 6px;
	border-radius: 7px;
	background: var(--tl-bg-3);
	color: var(--tl-ink);
	font-weight: 800;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.bf-tl-grade--lg { min-width: 52px; height: 38px; font-size: 18px; border-radius: 9px; }
.bf-tl-grade--unknown { color: var(--tl-ink-3); }

/* 100〜250msの軽いパルス。重い演出は禁止（ユーザー要望）。 */
@keyframes bf-tl-grade-pulse {
	0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(23,64,139,.35); }
	40%  { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(23,64,139,0); }
	100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(23,64,139,0); }
}
.bf-tl-grade--pulse { animation: bf-tl-grade-pulse 220ms ease-out; }
@media (prefers-reduced-motion: reduce) {
	.bf-tl-grade--pulse { animation: none; }
}

/* ---------- TRADE GRADE セクション ---------- */

.bf-tl-gradecard {
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	padding: 12px;
	margin: 0 0 12px;
}

.bf-tl-gradecard__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
}

.bf-tl-gradecard__ja { font-weight: 700; flex: 1 1 auto; min-width: 0; }

.bf-tl-gradecard__cba {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tl-bg-3);
}

.bf-tl-gradecard__partial {
	margin: 0 0 8px;
	font-size: 11.5px;
	color: var(--tl-warn);
}

.bf-tl-gradebar {
	display: grid;
	grid-template-columns: 108px 1fr 34px;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	font-size: 11.5px;
}

.bf-tl-gradebar__k { color: var(--tl-ink-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bf-tl-gradebar__track {
	height: 8px;
	border-radius: 999px;
	background: var(--tl-bg-3);
	overflow: hidden;
}

.bf-tl-gradebar__fill {
	display: block;
	height: 100%;
	background: var(--tl-accent);
	border-radius: 999px;
}

.bf-tl-gradebar__g { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bf-tl-gradebar--unknown .bf-tl-gradebar__k,
.bf-tl-gradebar--unknown .bf-tl-gradebar__g { color: var(--tl-ink-3); }

.bf-tl-reasons { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.bf-tl-reasons__col h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .04em; color: var(--tl-ink-3); }
.bf-tl-reasons__col ul { margin: 0; padding: 0 0 0 18px; font-size: 12px; line-height: 1.6; }
.bf-tl-reasons__col--pos h4 { color: var(--tl-pass); }
.bf-tl-reasons__col--neg h4 { color: var(--tl-fail); }

@media (min-width: 620px) {
	.bf-tl-reasons { flex-direction: row; gap: 20px; }
	.bf-tl-reasons__col { flex: 1 1 0; min-width: 0; }
}

/* ---------- PACKAGE / CHECK セクション見出し ---------- */

.bf-tl-sec { margin: 22px 0; scroll-margin-top: 96px; }
.bf-tl-sec__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: .02em; }

/* ---------- 二次機能アコーディオン ---------- */

.bf-tl-accordion { margin: 22px 0; }

.bf-tl-accordion__item {
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	margin: 0 0 8px;
	overflow: hidden;
}

.bf-tl-accordion__item > summary {
	cursor: pointer;
	list-style: none;
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 700;
	background: var(--tl-bg-2);
}
.bf-tl-accordion__item > summary::-webkit-details-marker { display: none; }
.bf-tl-accordion__item > summary::before { content: '▸'; margin-right: 8px; color: var(--tl-ink-3); }
.bf-tl-accordion__item[open] > summary::before { content: '▾'; }

.bf-tl-accordion__body { padding: 12px 14px; }

/* ---------- モバイル PACKAGE BAR（.bf-tl-summary を拡張） ---------- */

.bf-tl-summary__grades { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- PACKAGE DRAWER ---------- */

.bf-tl-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(22,22,26,.45);
}

.bf-tl-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 71;
	max-height: 82vh;
	overflow-y: auto;
	background: var(--tl-bg);
	border-radius: 14px 14px 0 0;
	padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -8px 24px rgba(0,0,0,.22);
}

/* 広い画面ではモバイルのボトムシートのまま全幅にしない（PACKAGE DRAWERは元々モバイル向けの導線）。 */
@media (min-width: 620px) {
	.bf-tl-drawer {
		left: auto;
		right: 16px;
		bottom: 16px;
		width: min(92vw, 420px);
		max-height: 76vh;
		border-radius: 14px;
	}
}

.bf-tl-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

.bf-tl-drawer__close {
	min-width: 44px;
	min-height: 44px;
	border: none;
	border-radius: 999px;
	background: var(--tl-bg-3);
	color: var(--tl-ink);
	font-size: 16px;
	cursor: pointer;
}

.bf-tl-drawer__team {
	border-top: 1px solid var(--tl-line);
	padding: 10px 0;
}
.bf-tl-drawer__team:first-of-type { border-top: none; }

/* ---------- モーダル（チーム追加 / 送り先選択） ---------- */

.bf-tl-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(22,22,26,.45);
	padding: 0;
}

@media (min-width: 620px) {
	.bf-tl-modal-backdrop { align-items: center; padding: 16px; }
}

.bf-tl-modal {
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow-y: auto;
	background: var(--tl-bg);
	border-radius: 14px 14px 0 0;
	padding: 16px;
	box-shadow: 0 -8px 24px rgba(0,0,0,.22);
}

@media (min-width: 620px) {
	.bf-tl-modal { border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.28); }
}

.bf-tl-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 10px;
}

/* ---------- 320px 以下の追加保険 ---------- */

@media (max-width: 340px) {
	.bf-tl-gradebar { grid-template-columns: 88px 1fr 30px; }
}

/* ==========================================================
   ZERO SCROLL / VIEWPORT WORKSPACE（2026-09-10追加）
   ==========================================================

   目的: チームを1つ以上選んでいる間（＝トレードを組み立てている間）は
   #bf-tl-root を「viewportの中だけで完結するApp」にする。
   Desktop 2-team Tradeでは document/body の縦スクロールを0にする。

   仕組み:
     1. body.bf-tl-page（このルートである間つねに付与。PHP側で
        body_classフィルタから付与）で、サイト共通の右サイドバーだけを
        非表示にして #main を全幅化する。サイドバーのウィジェット量に
        ページ全体の高さが引きずられるのを断つのが目的で、
        サイトHeader自体は変更しない。
     2. body.bf-tl-app（チームが1つ以上いる間だけJSが付与）で、
        サイト共通Footerを非表示にする。Footerも高さの主要因のため。
     3. .bf-tl.bf-tl--app の高さは bf-trade-lab-ui.js の fitAppHeight()
        が `100dvh - rootの実際のtop位置` を計算してインラインで設定する。
        祖先要素（#main/#content-in/#container等、テーマ側マークアップ）の
        高さ連鎖には依存しない＝テーマ側の構造を壊さない。
     4. .bf-tl--app の内側だけをflex/gridで管理し、長くなりうる内容
        （ロスター一覧・指名権一覧など）は各Panel内部だけでスクロールさせる。
     5. チームが0（開始画面）のときはこれまで通りの通常ページ
        （サイトHeader/Footer/サイドバーの一部表示、縦スクロールあり）。
   ========================================================== */

/* ---------- 1. サイドバーを常時オフ（幅の確保） ---------- */

body.bf-tl-page #sidebar { display: none !important; }
body.bf-tl-page #content-in { display: block; }
body.bf-tl-page #main { width: 100% !important; max-width: 100% !important; }

/* ---------- 2. Footerはワークスペース稼働中だけオフ（高さの確保） ---------- */

body.bf-tl-app #footer { display: none !important; }
/*
   padding-bottomは0にする。fitAppHeight()は「rootのtop位置」から残り高さを
   計算するだけで、root より後ろ（#mainの下パディング分）は関知しない。
   ここに下パディングを残すと、root の高さぴったりに合わせても
   ページ全体がその分だけ縦に溢れる（2026-09-10、本番デプロイ後の実機QAで
   11px の縦scrollとして発覚・修正）。
*/
body.bf-tl-app #main { padding-top: 10px; padding-bottom: 0; }

/* ---------- 3. #bf-tl-root 自体をアプリ化 ---------- */

.bf-tl.bf-tl--app {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* heightはJS（fitAppHeight）がインラインで設定する */
}

.bf-tl--app .bf-sal__main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
   マーケティング用の導入文（Hero・データ基準日メモ）とディスクレーマーは
   アプリ稼働中は表示しない（Compact App Headerに置き換わる）。
   機能自体は削除していない。チーム0の開始画面では通常どおり表示される。
*/
.bf-tl--app .bf-tl-hero,
.bf-tl--app .bf-tl-note,
.bf-tl--app .bf-tl-disc { display: none; }

/* クイックジャンプは役目を終えたため常時非表示（JS側でもhidden化している）。 */
.bf-tl-tabs[hidden] { display: none; }

/* チームレール（.bf-tl-sticky）はアプリ稼働中も残す。コンパクトなチーム概観＋
   モバイルでのフォーカス切替に使うため。高さが伸びないよう明示的に縮める。 */
.bf-tl--app .bf-tl-sticky { padding: 6px 0; flex: 0 0 auto; }

.bf-tl-railchip.is-focused { box-shadow: 0 0 0 2px var(--tl-ink) inset; }

/* #bf-tl-main はCompact App Header + Workspace の2段。ここだけが可変高さ。 */
.bf-tl--app #bf-tl-main {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---------- COMPACT APP HEADER ---------- */

.bf-tl-appheader {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	padding: 6px 0;
	border-bottom: 1px solid var(--tl-line);
}

.bf-tl-appheader__brand {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--tl-accent);
	white-space: nowrap;
}

.bf-tl-appheader__strategy {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.bf-tl-chip--sm {
	min-height: 32px;
	padding: 0 10px;
	font-size: 11px;
}

.bf-tl-appheader__actions {
	display: flex;
	gap: 6px;
	margin-left: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-tl-appheader__btn {
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--tl-accent);
	border-radius: 999px;
	background: var(--tl-accent);
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.bf-tl-appheader__btn--ghost {
	background: var(--tl-bg);
	border-color: var(--tl-line);
	color: var(--tl-ink-2);
}

@media (max-width: 379px) {
	.bf-tl-appheader__brand { display: none; }
}

/* ---------- WORKSPACE（高さいっぱい＋内部スクロールへ） ---------- */

.bf-tl--app .bf-tl-workspace {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 10px 0 0;
}

.bf-tl--app .bf-tl-panel {
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.bf-tl--app .bf-tl-panel__body {
	flex: 1 1 auto;
}

/* モバイル: フォーカス中の1チームだけを表示（縦に並べて長くしない） */
@media (max-width: 899px) {
	.bf-tl--app .bf-tl-workspace { grid-template-columns: 1fr; }
	.bf-tl--app .bf-tl-panel { display: none; }
	.bf-tl--app .bf-tl-panel.is-focused { display: flex; }
	.bf-tl--app .bf-tl-liveinfo { display: none; }
}

/* ---------- LIVE INFO（常時表示の要約。詳細はDetail Drawerへ） ---------- */

.bf-tl-liveinfo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 10px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-bg-2);
}

.bf-tl-liveinfo__title {
	margin: 0;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--tl-ink-3);
}

.bf-tl-liveinfo__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 8px;
	border-radius: 8px;
	border-left: 4px solid var(--tl-p, var(--tl-accent));
	background: var(--tl-bg);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

.bf-tl-liveinfo__ab { font-weight: 800; }
.bf-tl-liveinfo__cba { font-weight: 700; color: var(--tl-ink-2); }
.bf-tl-liveinfo__net { margin-left: auto; font-weight: 700; white-space: nowrap; }

.bf-tl-liveinfo__actions {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
}

.bf-tl-liveinfo__more {
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

/* 2チーム: LEFT Team A / CENTER Live Info / RIGHT Team B */
@media (min-width: 900px) {
	.bf-tl--app .bf-tl-workspace[data-teams="2"] {
		grid-template-columns: 1fr minmax(240px, 320px) 1fr;
		grid-template-areas: "p0 live p1";
		align-items: stretch;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="2"] .bf-tl-panel:nth-of-type(1) { grid-area: p0; }
	.bf-tl--app .bf-tl-workspace[data-teams="2"] .bf-tl-panel:nth-of-type(2) { grid-area: p1; }
	.bf-tl--app .bf-tl-workspace[data-teams="2"] .bf-tl-liveinfo { grid-area: live; }

	/* 3/4チーム: Live Infoは最下段の帯（floating panelではなくbottom compact bar）。
	   900px以上なら一貫して3列/2x2にする（旧ルールは1024px/1280px境目で
	   バラバラだったため、Zero Scroll対象幅ではここで明示的に上書きする）。 */
	.bf-tl--app .bf-tl-workspace[data-teams="3"] {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="4"] {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="3"] .bf-tl-liveinfo,
	.bf-tl--app .bf-tl-workspace[data-teams="4"] .bf-tl-liveinfo {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="3"] .bf-tl-liveinfo .bf-tl-liveinfo__title,
	.bf-tl--app .bf-tl-workspace[data-teams="4"] .bf-tl-liveinfo .bf-tl-liveinfo__title {
		flex: 0 0 auto;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="3"] .bf-tl-liveinfo .bf-tl-liveinfo__row,
	.bf-tl--app .bf-tl-workspace[data-teams="4"] .bf-tl-liveinfo .bf-tl-liveinfo__row {
		flex: 1 1 200px;
	}
	.bf-tl--app .bf-tl-workspace[data-teams="3"] .bf-tl-liveinfo .bf-tl-liveinfo__actions,
	.bf-tl--app .bf-tl-workspace[data-teams="4"] .bf-tl-liveinfo .bf-tl-liveinfo__actions {
		flex: 0 0 auto;
		flex-direction: row;
	}

	/*
	   3チーム時の「+4チーム目を追加」タイルはgridの3列を占有し、
	   もう1行を作ってしまう（Zero Scrollを崩す）。チームレールの
	   「+チーム」チップが同じ機能を既に持っているため、Desktopでは
	   大きいタイルの方だけを隠す（機能は消えていない）。
	*/
	.bf-tl--app .bf-tl-workspace[data-teams="3"] .bf-tl-addtile { display: none; }
}

/* ---------- DETAIL DRAWER（GRADE/CHECK/PACKAGE/MOREタブ） ---------- */

.bf-tl-drawer__tabs {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bf-tl-drawer__tab {
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

.bf-tl-drawer__tab[aria-pressed="true"] {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}

.bf-tl-drawer__body { margin-top: 10px; }

/* Detail DrawerはGRADE/CHECK/MORE等の長い内容も入るため、
   Package Drawer時代よりも高さに余裕を持たせる。 */
@media (min-width: 620px) {
	.bf-tl-drawer {
		width: min(94vw, 480px);
		max-height: 84vh;
	}
}

/* ==========================================================
   WHO SAYS NO? / COMMUNITY TRADES / REMIX（2026-09-10追加、2026-09-10 UI/UX改善）
   ==========================================================
   Publish モーダル（Trade Builder内）、Public Trade Page、
   Community Feed で共通して使うクラス群。既存の .bf-tl-* トークン・
   コンポーネント（.bf-tl-cta / .bf-tl-chip / .bf-tl-pkgteam 等）を
   そのまま再利用し、ここでは Community固有の見た目だけを足す。
   Comic/Manga風の装飾は使わない（data-focusedなデザインを継承）。

   UI/UX改善（2026-09-10）の方針：
     "見た瞬間に意味が分かる"を優先し、Public Trade Pageは
     Hero → WHO SAYS NO結果 → Vote → Remix CTA の順で
     above the foldに収める。Salary/CBAの詳細は<details>へ格納。
     優先度: Vote > Trade package > Remix > Grade > CBA/Salary。
   ========================================================== */

/* ---------- Compact App Headerの「公開する」ボタン ---------- */

.bf-tl-appheader__btn--publish {
	background: var(--tl-pass);
	border-color: var(--tl-pass);
}

/* ---------- Publishモーダル ---------- */

.bf-tlc-publish__team {
	padding: 10px 12px;
	margin: 0 0 10px;
	border: 1px solid var(--tl-line);
	border-left: 6px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
}

/* ---------- Public Trade Page: 共通 ---------- */

.bf-tlc-tradepage .bf-sal__main {
	padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.bf-tlc-breadcrumb {
	margin: 0 0 10px;
	font-size: 12.5px;
}

.bf-tlc-breadcrumb a {
	color: var(--tl-ink-3);
	text-decoration: none;
}

.bf-tlc-breadcrumb a:hover,
.bf-tlc-breadcrumb a:focus-visible {
	color: var(--tl-accent);
	text-decoration: underline;
}

/* ---------- Community Home: header ---------- */

.bf-tl-hero--compact {
	padding-top: 2px;
	padding-bottom: 0;
	margin: 0 0 12px;
}

.bf-tl-hero--compact .bf-tl-hero__title { margin-bottom: 2px; font-size: 21px; }

.bf-tlc-community-lead {
	margin: 0 0 8px;
	font-size: 13px;
}

/* ---------- Hero（Teams / Main Assets / Grade。above the fold） ---------- */

.bf-tlc-hero { margin: 0 0 14px; }

.bf-tlc-hero__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--tl-ink-3);
}

.bf-tlc-hero__matchup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 2px 0 8px;
	font-size: clamp(22px, 6vw, 32px);
	font-weight: 800;
	line-height: 1.1;
}

.bf-tlc-hero__swap { color: var(--tl-ink-3); font-weight: 700; font-size: .7em; }

.bf-tlc-hero__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
}

.bf-tlc-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin: 0 0 8px;
}

.bf-tlc-hero__col {
	padding: 10px 12px;
	border: 1px solid var(--tl-line);
	border-left: 5px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-p-tint, var(--tl-bg-2));
	min-width: 0;
}

.bf-tlc-hero__colhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 6px;
}

.bf-tlc-hero__abbr {
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .02em;
}

.bf-tlc-hero__receiveslabel {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tl-ink-3);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.bf-tlc-hero__asset {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tl-ink);
	overflow-wrap: anywhere;
}

.bf-tlc-hero__asset--empty {
	font-weight: 400;
	color: var(--tl-ink-3);
}

.bf-tlc-hero__meta {
	margin: 4px 0 0;
	font-size: 11.5px;
}

/* ---------- Badges（Feed Card / Hero 共通の煽り文句） ---------- */

.bf-tlc-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	white-space: nowrap;
}

.bf-tlc-badge--remix  { background: #EAF1FF; color: #17408B; }
.bf-tlc-badge--new    { background: #FFF1DD; color: #a35d00; }
.bf-tlc-badge--hardno { background: #FBE6E3; color: var(--tl-fail); }
.bf-tlc-badge--split  { background: #FFF3D6; color: var(--tl-warn); }
.bf-tlc-badge--liked  { background: #E4F5EC; color: var(--tl-pass); }
.bf-tlc-badge--draft  { background: #EDEDF2; color: var(--tl-ink-2); border: 1px dashed var(--tl-ink-3); }

/* ---------- Seed Draft Preview note ---------- */

.bf-tlc-draftnote {
	margin: 0 0 16px;
	padding: 14px;
	border: 1px dashed var(--tl-ink-3);
	border-radius: var(--tl-radius);
	background: var(--tl-bg-2);
	text-align: center;
	font-size: 12.5px;
	color: var(--tl-ink-2);
}

/* ---------- WHO SAYS NO? Result（ページ内で最も目立つブロック） ---------- */

.bf-tlc-wsn {
	padding: 18px 14px;
	margin: 0 0 16px;
	border: 2px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-bg-2);
	text-align: center;
}

.bf-tlc-wsn--team,
.bf-tlc-wsn--everyone { border-color: var(--tl-fail); background: #FBEFEE; }
.bf-tlc-wsn--none     { border-color: var(--tl-pass); background: #EEF8F2; }
.bf-tlc-wsn--unknown  { border-style: dashed; }

.bf-tlc-wsn__label {
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	color: var(--tl-ink-3);
}

.bf-tlc-wsn__v {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 6px 0 0;
	font-size: clamp(26px, 7vw, 38px);
	font-weight: 800;
	line-height: 1.1;
}

.bf-tlc-wsn__icon { font-size: .8em; }

.bf-tlc-wsn__sub {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--tl-ink-2);
}

/* ---------- Vote（Team-by-team。above the fold） ---------- */

.bf-tlc-votearea { margin: 0 0 16px; }

.bf-tlc-voterow {
	margin: 0 0 12px;
	padding: 12px;
	border: 1px solid var(--tl-line);
	border-left: 5px solid var(--tl-p, var(--tl-accent));
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
}

.bf-tlc-voterow__head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
}

.bf-tlc-voterow__abbr { font-size: 14px; font-weight: 800; }

.bf-tlc-voterow__q {
	font-size: 12.5px;
	color: var(--tl-ink-2);
}

.bf-tlc-voterow__mine {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
}

.bf-tlc-voterow__mine--accept { color: var(--tl-pass); }
.bf-tlc-voterow__mine--reject { color: var(--tl-fail); }

.bf-tlc-vote__row {
	display: flex;
	gap: 8px;
	margin: 0 0 10px;
}

.bf-tlc-vote__btn {
	flex: 1 1 0;
	min-height: 48px;
	border: 2px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bf-tlc-vote__btn:focus-visible {
	outline: 3px solid var(--tl-accent);
	outline-offset: 2px;
}

.bf-tlc-vote__btn--accept.is-selected {
	background: var(--tl-pass);
	border-color: var(--tl-pass);
	color: #fff;
}

.bf-tlc-vote__btn--reject.is-selected {
	background: var(--tl-fail);
	border-color: var(--tl-fail);
	color: #fff;
}

.bf-tlc-tally__bar {
	height: 12px;
	border-radius: 999px;
	background: var(--tl-fail);
	overflow: hidden;
}

.bf-tlc-tally__acc {
	display: block;
	height: 100%;
	background: var(--tl-pass);
	transition: width .25s ease;
}

.bf-tlc-tally__label {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--tl-ink-2);
	font-variant-numeric: tabular-nums;
}

.bf-tlc-tally__accn { color: var(--tl-pass); }
.bf-tlc-tally__rejn { color: var(--tl-fail); }

/* ---------- Remix CTA（Voteの直後。最も強く目立たせる） ---------- */

.bf-tlc-remixcta {
	margin: 0 0 12px;
	padding: 16px;
	border: 2px solid var(--tl-accent);
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	text-align: center;
}

.bf-tlc-remixcta__q {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
}

.bf-tlc-remixcta__btn {
	display: inline-block;
	min-height: 48px;
	padding: 0 22px;
	line-height: 48px;
	font-size: 14px;
}

.bf-tlc-remixcta__note {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: var(--tl-ink-3);
}

/* ---------- Share（Remixの近く、控えめ） ---------- */

.bf-tlc-share {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
}

.bf-tlc-share__btn {
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--tl-line);
	border-radius: 999px;
	background: var(--tl-bg);
	color: var(--tl-ink-2);
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
}

.bf-tlc-share__btn:hover,
.bf-tlc-share__btn:focus-visible {
	border-color: var(--tl-accent);
	color: var(--tl-accent);
}

/* ---------- Trade詳細（below the fold、<details>） ---------- */

.bf-tlc-details { margin: 8px 0 20px; }

.bf-tlc-teamdetail {
	margin: 0 0 8px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	overflow: hidden;
}

.bf-tlc-teamdetail__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	cursor: pointer;
	list-style: none;
	border-left: 5px solid var(--tl-p, var(--tl-accent));
	background: var(--tl-p-tint, var(--tl-bg-2));
	font-size: 13px;
	font-weight: 700;
}

.bf-tlc-teamdetail__summary::-webkit-details-marker { display: none; }

.bf-tlc-teamdetail__summary:focus-visible {
	outline: 3px solid var(--tl-accent);
	outline-offset: -3px;
}

.bf-tlc-teamdetail__cba { margin-left: auto; font-size: 12px; color: var(--tl-ink-2); }

.bf-tlc-teamdetail__body { padding: 12px; }

/* ---------- Popular Remixes ---------- */

.bf-tlc-popremix { margin: 0 0 20px; }

/* ---------- Community Home: Hero Card ---------- */

.bf-tlc-hero-card { margin: 0 0 20px; }

.bf-tlc-hero-card__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
}

.bf-tlc-hero-card .bf-tlc-card {
	padding: 18px;
	border-width: 2px;
	border-color: var(--tl-accent);
}

/* ---------- Community Feed ---------- */

.bf-tlc-feed__tabs { margin: 0 0 16px; }

.bf-tlc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	margin: 0 0 16px;
}

.bf-tlc-grid--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.bf-tlc-card {
	display: block;
	padding: 14px;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	background: var(--tl-bg);
	color: inherit;
	text-decoration: none;
	min-width: 0;
}

.bf-tlc-card:hover,
.bf-tlc-card:focus-visible {
	border-color: var(--tl-accent);
	text-decoration: none;
	outline: none;
}

.bf-tlc-card:focus-visible { outline: 3px solid var(--tl-accent); outline-offset: 2px; }

.bf-tlc-card--compact { padding: 12px; }

.bf-tlc-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 8px;
}

.bf-tlc-card__teams {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 800;
}

.bf-tlc-card__swap { color: var(--tl-ink-3); font-weight: 700; font-size: 12px; }

.bf-tlc-card__team {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--tl-bg-3);
	font-size: 13px;
	font-weight: 800;
}

.bf-tlc-card__grade {
	padding: 0 5px;
	border-radius: 5px;
	background: var(--tl-accent);
	color: #fff;
	font-size: 10.5px;
	font-weight: 800;
}

.bf-tlc-card__pkgs { margin: 0 0 8px; }

.bf-tlc-card__pkg {
	margin: 0 0 2px;
	font-size: 12.5px;
	overflow-wrap: anywhere;
}

.bf-tlc-card__pkg-team { font-weight: 800; color: var(--tl-ink-2); margin-right: 4px; }
.bf-tlc-card__pkg-v { color: var(--tl-ink); }

.bf-tlc-card__title {
	margin: 0 0 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--tl-ink);
	overflow-wrap: anywhere;
}

.bf-tlc-card__wsn {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--tl-bg-2);
}

.bf-tlc-card__wsn--team,
.bf-tlc-card__wsn--everyone { background: #FBEFEE; }
.bf-tlc-card__wsn--none     { background: #EEF8F2; }

.bf-tlc-card__wsn-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--tl-ink-3);
}

.bf-tlc-card__wsn-v { font-size: 14px; font-weight: 700; }
.bf-tlc-card__wsn-sub { font-weight: 500; color: var(--tl-ink-2); }

.bf-tlc-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 11px;
	color: var(--tl-ink-3);
	font-variant-numeric: tabular-nums;
}

.bf-tlc-card__age { margin-left: auto; }

@media (max-width: 619px) {
	.bf-tlc-grid,
	.bf-tlc-grid--compact { grid-template-columns: 1fr; }
	.bf-tlc-hero__matchup { font-size: clamp(20px, 7vw, 26px); }
	.bf-tlc-wsn__v { font-size: clamp(24px, 8vw, 30px); }
	/* 2/3/4team問わず、モバイルはTeam Cardを縦stackにする（横に詰め込まない）。 */
	.bf-tlc-hero__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Community User Features（Phase B, 2026-09-11追加）
   ========================================================== */

/* 汎用小型ボタン（既存.bf-tl-ctaより控えめ。Follow/View GM/設定保存等で使う）。 */
.bf-tl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	margin: 4px 6px 4px 0;
	border: 2px solid var(--tl-accent);
	border-radius: 999px;
	background: var(--tl-accent);
	color: #fff;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.bf-tl-btn--primary { background: var(--tl-accent); color: #fff; }
.bf-tl-btn--ghost { background: transparent; color: var(--tl-accent); }
.bf-tl-btn--sm { min-height: 28px; padding: 0 10px; font-size: 11.5px; }
.bf-tl-btn[disabled] { opacity: .6; cursor: default; }

/* Favorite（☆/★）。カード右上・Author行に添える小さな丸ボタン。 */
.bf-tlc-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--tl-ink-3);
	border-radius: 999px;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	color: var(--tl-ink-3);
}
.bf-tlc-fav-btn--on { color: #C48A00; border-color: #C48A00; }
.bf-tlc-card--server { position: relative; }
.bf-tlc-card--server .bf-tlc-fav-btn { position: absolute; top: 10px; right: 10px; }
.bf-tlc-card__link { text-decoration: none; color: inherit; display: block; }
.bf-tlc-card__author { color: var(--tl-ink-3); }

/* Public Trade Page: Created by GMName [View GM] [Follow]（B16/B17、主役にしすぎない）。 */
.bf-tlc-author-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--tl-ink-2);
}
.bf-tlc-author-row__label { margin-right: 4px; }

/* My Trades / My Favorites / My Votes / GM Profile / Settings 共通の器。 */
.bf-tlu-empty {
	padding: 32px 16px;
	text-align: center;
	color: var(--tl-ink-3);
}
.bf-tlu-pagination { margin: 16px 0; }
.bf-tlu-pagination a,
.bf-tlu-pagination strong { display: inline-block; padding: 4px 10px; }

.bf-tlu-votes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bf-tlu-votes-table th,
.bf-tlu-votes-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tl-bg-2); }
.bf-tlu-vote--accept { color: var(--tl-pass); font-weight: 700; }
.bf-tlu-vote--reject { color: var(--tl-fail); font-weight: 700; }

/* GM Profile */
.bf-tlu-profile-head { margin-bottom: 20px; }
.bf-tlu-profile-name { margin: 0 0 4px; }
.bf-tlu-profile-sub { margin: 0 0 8px; color: var(--tl-ink-3); font-size: 13px; }
.bf-tlu-profile-bio { margin: 0 0 8px; font-size: 14px; }
.bf-tlu-profile-team { margin: 0 0 10px; font-size: 13px; }
.bf-tlu-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bf-tlu-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: #FFF1DD;
	color: #a35d00;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
}
.bf-tlu-profile-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 10px;
	margin: 12px 0 16px;
}
.bf-tlu-profile-stats > div {
	background: var(--tl-bg-2);
	border-radius: 8px;
	padding: 10px 12px;
}
.bf-tlu-profile-stats strong { display: block; font-size: 18px; }
.bf-tlu-profile-stats span { display: block; font-size: 11px; color: var(--tl-ink-3); }
.bf-tlu-section-title { margin: 24px 0 10px; }

/* Settings form */
.bf-tlu-settings-form { max-width: 480px; }
.bf-tlu-field { display: block; margin-bottom: 14px; }
.bf-tlu-field span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.bf-tlu-field input[type="text"],
.bf-tlu-field select,
.bf-tlu-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--tl-ink-3);
	border-radius: 6px;
	font: inherit;
	font-size: 13px;
}
.bf-tlu-checkbox { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.bf-tlu-settings-status { margin-left: 10px; font-size: 12.5px; color: var(--tl-ink-3); }

@media (max-width: 619px) {
	/* B25: My Trades / Favorites / Following / Profile は1カラム（既存.bf-tlc-gridの
	   モバイル規則を再利用。ここでは新規要素だけを縦積みにする）。 */
	.bf-tlu-profile-stats { grid-template-columns: repeat(2, 1fr); }
	.bf-tlc-author-row { font-size: 12px; }
}

/* ==========================================================
   Weekly GM Challenge / GM Leaderboard（Phase C/D, 2026-09-11追加）
   ========================================================== */

/* Challenge Banner（Trade Builder内、#bf-tl-root の外）。C5。 */
.bf-tlch-inbanner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	padding: 8px 16px;
	background: #FFF6E6;
	border-bottom: 1px solid #F0D9A0;
	font-size: 12.5px;
}
.bf-tlch-inbanner__eyebrow { font-weight: 800; letter-spacing: .04em; color: #a35d00; font-size: 11px; }
.bf-tlch-inbanner__title { font-size: 13px; }
.bf-tlch-inbanner__team, .bf-tlch-inbanner__rules, .bf-tlch-inbanner__countdown { color: var(--tl-ink-2); }
.bf-tlch-inbanner__link { margin-left: auto; color: var(--tl-accent); font-weight: 700; white-space: nowrap; }

/* Challenge Mode UX（2026-09-11追加）: Trade Lab内Challenge Headerの拡張分 */
.bf-tlch-inbanner { flex-direction: column; align-items: stretch; gap: 6px; }
.bf-tlch-inbanner__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bf-tlch-inbanner__instruction { margin: 0; font-size: 12.5px; color: var(--tl-ink-2); }
.bf-tlch-inbanner__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.bf-tlch-inbanner__details { font-size: 12.5px; }
.bf-tlch-inbanner__details summary { cursor: pointer; color: var(--tl-accent); font-weight: 700; }
.bf-tlch-inbanner__details[open] summary { margin-bottom: 6px; }

.bf-tlch-steps { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 4px 0; padding: 0; font-size: 12px; color: var(--tl-ink-3); }
.bf-tlch-steps__item { display: flex; align-items: center; gap: 4px; }
.bf-tlch-steps__item.is-done { color: var(--tl-ink); font-weight: 700; }
.bf-tlch-steps__mark { display: inline-block; width: 1.2em; text-align: center; }

.bf-tlch-rulestatus__label { margin: 8px 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--tl-ink-3); }
.bf-tlch-rulestatus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.bf-tlch-rulestatus__item { display: flex; align-items: flex-start; gap: 6px; }
.bf-tlch-rulestatus__item.is-pass { color: #1a7a3a; }
.bf-tlch-rulestatus__item.is-fail { color: #b3261e; }
.bf-tlch-rulestatus__item.is-info { color: var(--tl-ink-3); }
.bf-tlch-rulestatus__mark { flex: none; }

/* Target Team Lock badge（項番3） */
.bf-tl-railchip__lock {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	background: rgba(255,255,255,.25);
	border-radius: 4px;
	padding: 2px 5px;
	cursor: help;
}
.bf-tlch-lockbadge { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; line-height: 1.2; }
.bf-tlch-lockbadge__name { font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.bf-tlch-lockbadge__tag { font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #a35d00; background: #FFF1DD; border-radius: 4px; padding: 1px 5px; margin-top: 2px; }

/* Team 2 CTA（項番4） */
.bf-tl-addteam--cta, .bf-tl-addtile--cta {
	background: var(--tl-accent);
	color: #fff;
	font-weight: 700;
	border-color: var(--tl-accent);
}

/* Invalid State Guidance（項番10） */
.bf-tlch-guidance { border: 1px solid #f3c2bd; background: #fff5f4; border-radius: 8px; padding: 10px 14px; margin: 10px 0; }
.bf-tlch-guidance__label { margin: 0 0 6px; font-weight: 700; color: #b3261e; font-size: 13px; }
.bf-tlch-guidance__list { margin: 0; padding-left: 18px; font-size: 12.5px; color: #7a1f1a; }
.bf-tlch-guidance__list li { margin-bottom: 3px; }

@media (max-width: 619px) {
	.bf-tlch-inbanner { padding: 8px 12px; }
	.bf-tlch-steps { font-size: 11.5px; gap: 3px 10px; }
	.bf-tlch-rulestatus { font-size: 12px; }
	/*
	 * Mobile 390 QA（2026-09-11）で発見: 固定チームの案内文（instruction）が
	 * Headerを大きく縦に伸ばし、Zero ScrollのWorkspace高さが安全下限280px
	 * まで潰れていた。この文はabove foldの必須要素（title/Target Team/
	 * deadline/主要rules/Team picker CTA）には含まれない補足説明であり、
	 * Target Teamは主要rules行（「対象: LAL を含める」）とCHALLENGE TARGET
	 * バッジ側で既に伝わっているため、モバイルでは非表示にしてHeaderを
	 * 縮める（最小修正。要素自体は削除せずCSSで隠すのみ、デスクトップでは
	 * 従来通り表示）。
	 */
	.bf-tlch-inbanner__instruction { display: none; }
}

/* Challenge index / detail */
.bf-tlch-card {
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	padding: 18px;
	margin: 16px 0 24px;
}
.bf-tlch-card--active { border-left: 6px solid var(--tl-accent); background: var(--tl-bg-2); }
.bf-tlch-card__eyebrow { font-weight: 800; letter-spacing: .04em; color: var(--tl-accent); font-size: 12px; margin: 0 0 6px; }
.bf-tlch-card__title { margin: 0 0 6px; font-size: 20px; }
.bf-tlch-card__prompt { margin: 0 0 10px; color: var(--tl-ink-2); }
.bf-tlch-card__meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--tl-ink-3); margin: 0 0 12px; }

.bf-tlch-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.bf-tlch-archive-card {
	display: block;
	border: 1px solid var(--tl-line);
	border-radius: var(--tl-radius);
	padding: 14px;
	color: inherit;
	text-decoration: none;
}
.bf-tlch-archive-card:hover { border-color: var(--tl-accent); }
.bf-tlch-archive-card__title { font-weight: 700; margin: 0 0 6px; }
.bf-tlch-archive-card__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--tl-ink-3); margin: 0 0 4px; }
.bf-tlch-archive-card__remix { font-size: 12px; color: var(--tl-ink-3); margin: 0; }

.bf-tlch-banner { border: 1px solid var(--tl-line); border-radius: var(--tl-radius); padding: 20px; margin: 16px 0 24px; background: var(--tl-bg-2); }
.bf-tlch-banner__eyebrow { font-weight: 800; letter-spacing: .04em; color: var(--tl-accent); font-size: 12px; margin: 0 0 6px; }
.bf-tlch-banner__title { margin: 0 0 8px; font-size: 24px; }
.bf-tlch-banner__prompt { margin: 0 0 12px; color: var(--tl-ink-2); font-size: 15px; }
.bf-tlch-banner__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--tl-ink-3); margin: 0 0 10px; }
.bf-tlch-banner__rules { margin: 0 0 14px; padding-left: 18px; }
.bf-tlch-banner__rules li { margin-bottom: 4px; font-size: 13px; }
.bf-tlch-banner__details { margin-top: 14px; font-size: 13px; }
.bf-tlch-banner__desc { margin-top: 8px; color: var(--tl-ink-2); }

.bf-tlch-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 24px; }
.bf-tlch-result-box { border: 1px solid var(--tl-line); border-radius: var(--tl-radius); padding: 14px; }
.bf-tlch-result-box__label { font-weight: 700; margin: 0 0 8px; font-size: 12.5px; color: var(--tl-ink-3); }
.bf-tlch-result-box__link { font-weight: 700; color: var(--tl-accent); text-decoration: none; }
.bf-tlch-result-box__author { margin: 4px 0 0; font-size: 12px; color: var(--tl-ink-3); }

.bf-tlch-feed__tabs { margin: 10px 0 14px; }
.bf-tl-chip.is-active, .bf-tl-chip[aria-pressed="true"] { background: var(--tl-accent); color: #fff; }

.bf-tlc-badge--winner { background: #FFF1DD; color: #a35d00; font-weight: 700; }
.bf-tlc-badge--challenge-link {
	display: inline-block;
	background: #FFF1DD;
	color: #a35d00;
	font-weight: 700;
	font-size: 12px;
	padding: 5px 10px;
	border-radius: 6px;
	text-decoration: none;
	margin-bottom: 10px;
}

/* GM Leaderboard */
.bf-tllb-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 20px; }
.bf-tllb-list--compact { gap: 4px; margin: 8px 0; }
.bf-tllb-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 10px 12px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	font-size: 13px;
}
.bf-tllb-row__rank { font-weight: 800; color: var(--tl-ink-3); min-width: 32px; }
.bf-tllb-row__name { font-weight: 700; color: var(--tl-accent); text-decoration: none; }
.bf-tllb-row__team { color: var(--tl-ink-3); font-size: 11.5px; }
.bf-tllb-row__score { font-weight: 800; }
.bf-tllb-row__wins { color: #a35d00; }
.bf-tllb-row__stat { color: var(--tl-ink-3); font-size: 12px; }
.bf-tllb-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0; }
.bf-tllb-explainer { margin: 14px 0; font-size: 13px; border: 1px solid var(--tl-line); border-radius: 8px; padding: 10px 14px; }
.bf-tllb-explainer summary { cursor: pointer; font-weight: 700; }
.bf-tllb-explainer__list { margin: 10px 0 6px; padding-left: 18px; }
.bf-tllb-explainer__list li { margin-bottom: 4px; }

/* Community Home: TOP GM THIS WEEK（D15） */
.bf-tllb-mini { margin: 8px 0 16px; padding: 10px 14px; border: 1px solid var(--tl-line); border-radius: 8px; }
.bf-tllb-mini__label { margin: 0 0 6px; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; color: var(--tl-ink-3); }
.bf-tllb-mini__list { display: flex; gap: 16px; flex-wrap: wrap; }
.bf-tllb-mini__gm { color: inherit; text-decoration: none; font-size: 13px; }
.bf-tllb-mini__gm span { color: var(--tl-ink-3); margin-left: 4px; font-size: 12px; }

/* GM Profile: Challenge badges */
.bf-tlu-badge--challenge { background: #FFF1DD; color: #a35d00; }
.bf-tlu-badge--rank { background: var(--tl-bg-3); color: var(--tl-ink-2); }

@media (max-width: 619px) {
	/* Challenge page / Leaderboard は1カラム、横スクロールtableを作らない（MOBILE方針）。 */
	.bf-tlch-archive-grid { grid-template-columns: 1fr; }
	.bf-tlch-results-grid { grid-template-columns: 1fr; }
	.bf-tllb-cols { grid-template-columns: 1fr; }
	.bf-tllb-row { font-size: 12.5px; }
	.bf-tlch-banner__title { font-size: 20px; }
}

/* Notification Center（Phase E, 2026-09-11追加） */
.bf-tln-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.bf-tln-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 24px; }
.bf-tln-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--tl-line);
	border-radius: 8px;
	font-size: 13.5px;
}
.bf-tln-item.is-unread { border-color: var(--tl-accent); background: var(--tl-bg-2); }
.bf-tln-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bf-tln-item__body a { color: inherit; text-decoration: none; }
.bf-tln-item__body a:hover { color: var(--tl-accent); }
.bf-tln-item__time { color: var(--tl-ink-3); font-size: 11.5px; }
.bf-tln-item__read { flex-shrink: 0; }

@media (max-width: 619px) {
	.bf-tln-item { flex-direction: column; align-items: flex-start; }
	.bf-tln-toolbar { flex-direction: column; align-items: flex-start; }
}