/* Paper / feed chrome — colors from soviet.css */
* { box-sizing: border-box; }
html, body {
	margin: 0;
	min-height: 100%;
}
body.combot-paper {
	position: relative;
	padding: 0 1rem 2rem;
	min-height: 100vh;
}
body.combot-paper > .bar {
	position: relative;
	z-index: 40; /* above summary/tables so strategy flyout isn't covered */
}
body.combot-paper > .summary,
body.combot-paper > .explain,
body.combot-paper > .explain-meta,
body.combot-paper > .block,
body.combot-paper > .picks-table,
body.combot-paper > .research-table,
body.combot-paper > .research-feed {
	position: relative;
	z-index: 1;
}

.bar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.55rem;
	margin: 0.75rem 0 0.85rem;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid var(--line);
}
.back { color: var(--accent); text-decoration: none; margin-right: 0.6rem; }
.title {
	font-family: var(--font-display);
	font-weight: 700;
	margin-right: 0.5rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.note { color: var(--muted); font-size: 0.8rem; font-family: var(--font-mono); }
.controls {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.55rem 0.65rem;
	align-items: flex-end;
	width: 100%;
	/* overflow-x:auto clips absolute flyouts (CSS forces overflow-y too). */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 0.1rem;
}
/* While a flyout is open, drop clipping so the menu is visible. */
.controls:has(.strategy-flyout-wrap.is-open),
.controls.has-flyout-open {
	overflow: visible;
}
.strategy-pick {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-family: var(--font-display);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	flex: 0 0 auto;
}
.strategy-pick select,
.strategy-flyout-btn {
	appearance: none;
	background: rgba(40, 5, 5, 0.92);
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 0.45rem 1.8rem 0.45rem 0.65rem;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	text-transform: none;
	letter-spacing: 0;
	min-width: 0;
	cursor: pointer;
}
.strategy-pick select {
	background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
		linear-gradient(135deg, var(--accent) 50%, transparent 50%);
	background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	width: 6.25rem;
}
#combot-range { width: 5.25rem; }
#combot-poll { width: 5.25rem; }
#combot-stake { width: 6.5rem; }
#combot-stop,
#combot-tp { width: 5.75rem; }
.strategy-flyout-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 15rem;
	padding-right: 0.65rem;
}
.commodity-flyout-wrap .strategy-flyout-btn {
	width: 7.25rem;
}
.strategy-flyout-wrap { position: relative; z-index: 50; }
.strategy-flyout-wrap.is-open { z-index: 80; }
.strategy-flyout-btn-label,
.strategy-flyout {
	text-transform: none;
	letter-spacing: 0;
}
.strategy-flyout-btn-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.strategy-flyout-chevron {
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--accent);
}
.strategy-flyout-wrap.is-open .strategy-flyout-chevron { transform: rotate(180deg); }
.strategy-flyout {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	z-index: 60;
	width: min(28rem, calc(100vw - 1.5rem));
	max-height: min(70vh, 32rem);
	overflow: auto;
	/* Fully opaque — metrics must not show through */
	background: #1a0600;
	background-image: linear-gradient(180deg, #2b0c04 0%, #1a0600 100%);
	border: 1px solid rgba(212, 175, 55, 0.55);
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.85),
		0 18px 48px rgba(0, 0, 0, 0.85);
	padding: 0.55rem;
	isolation: isolate;
}
.strategy-flyout-head {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.35rem 0.45rem 0.55rem;
	border-bottom: 1px solid var(--line);
	margin-bottom: 0.35rem;
}
.strategy-flyout-head strong {
	font-family: var(--font-display);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--accent);
}
.strategy-flyout-head span {
	font-size: 0.75rem;
	color: var(--muted);
}
.strategy-flyout-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.strategy-flyout-option {
	appearance: none;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	align-items: flex-start;
	text-align: left;
	background: transparent;
	border: 1px solid transparent;
	color: var(--ink);
	padding: 0.55rem 0.6rem;
	cursor: pointer;
	font-family: var(--font-sans);
}
.strategy-flyout-option:hover,
.strategy-flyout-option:focus {
	background: rgba(204, 0, 0, 0.14);
	border-color: rgba(212, 175, 55, 0.35);
	outline: none;
}
.strategy-flyout-option.is-active {
	background: rgba(204, 0, 0, 0.2);
	border-color: rgba(212, 175, 55, 0.5);
}
.strategy-flyout-option-label { font-size: 0.88rem; font-weight: 600; }
.strategy-flyout-option.is-active .strategy-flyout-option-label::after {
	content: " · active";
	font-size: 0.72rem;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.strategy-flyout-option-blurb { font-size: 0.76rem; line-height: 1.4; color: var(--muted); white-space: normal; }

.commodity-flyout {
	left: 0;
	right: auto;
	width: min(16rem, calc(100vw - 1.5rem));
	max-height: none;
}
.commodity-check-list {
	list-style: none;
	margin: 0;
	padding: 0.15rem 0 0.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.commodity-check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.55rem;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 0.88rem;
	color: var(--ink);
	border: 1px solid transparent;
}
.commodity-check:hover { background: rgba(227, 6, 19, 0.14); border-color: rgba(212, 175, 55, 0.3); }
.commodity-check input { accent-color: #e30613; width: 1rem; height: 1rem; }
.commodity-flyout-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.35rem 0.2rem;
	border-top: 1px solid var(--line);
}
.commodity-flyout-select,
.commodity-flyout-clear,
.commodity-flyout-apply {
	appearance: none;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 0.55rem;
	cursor: pointer;
}
.commodity-flyout-select,
.commodity-flyout-clear {
	flex: 1 1 auto;
}
.commodity-flyout-apply {
	flex: 0 0 auto;
	margin-left: auto;
	background: var(--soviet-red-hot);
	border-color: rgba(212, 175, 55, 0.45);
	color: var(--soviet-gold);
}

.summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0.45rem;
	margin: 0.75rem 0;
}
.card {
	border: 1px solid var(--line);
	padding: 0.55rem 0.65rem;
	background: rgba(30, 5, 5, 0.75);
	position: relative;
}
.card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--soviet-red-hot);
}
.card span {
	display: block;
	font-family: var(--font-display);
	color: var(--muted);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.card strong { font-family: var(--font-mono); font-size: 1.05rem; }

.explain {
	color: var(--muted);
	font-size: 0.82rem;
	max-width: 90ch;
	line-height: 1.45;
}
.explain p { margin: 0 0 0.45rem; }
.explain-meta { font-size: 0.75rem; opacity: 0.85; }
.explain code { color: var(--ink); font-family: var(--font-mono); font-size: 0.78rem; }

.table-wrap {
	overflow: auto;
	margin-top: 0.75rem;
	border: 1px solid var(--line);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
}
.table-wrap th:first-child,
.table-wrap td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--bg, #1a0a0a);
	box-shadow: 4px 0 8px rgba(0, 0, 0, 0.25);
}
.table-wrap th:first-child {
	z-index: 2;
	background: rgba(80, 0, 0, 0.95);
}
table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
th, td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th {
	font-family: var(--font-display);
	color: var(--accent);
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: rgba(80, 0, 0, 0.35);
}
td { font-family: var(--font-mono); }
td.reason { font-family: var(--font-sans); color: var(--muted); white-space: normal; max-width: 22ch; }
tr.is-win td:nth-child(9) { color: var(--win); font-weight: 600; }
tr.is-loss td:nth-child(9) { color: var(--loss); font-weight: 600; }
tr.is-skip { opacity: 0.55; }
tr.is-open td:nth-child(9) { color: var(--accent); }

.block { margin-top: 1.25rem; }
.block h2 {
	margin: 0 0 0.2rem;
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--soviet-gold);
}
.block .sub { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.8rem; }
.empty-block { color: var(--muted); font-size: 0.85rem; border: 1px dashed var(--line); padding: 0.75rem; }
td.ticker { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.7rem; }

@media (max-width: 720px) {
	body.combot-paper {
		padding-left: max(0.65rem, env(safe-area-inset-left));
		padding-right: max(0.65rem, env(safe-area-inset-right));
		padding-bottom: max(3.8rem, calc(3.4rem + env(safe-area-inset-bottom)));
	}
	.bar {
		align-items: stretch;
		flex-direction: column;
		gap: 0.65rem;
	}
	.bar > div:first-child {
		min-width: 0;
	}
	.title {
		display: block;
		margin: 0 0 0.2rem;
		font-size: 1.05rem;
	}
	.note {
		display: block;
		font-size: 0.72rem;
		line-height: 1.4;
		word-break: break-word;
	}
	.controls {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.55rem 0.5rem;
		align-items: end;
		overflow: visible;
		flex-wrap: unset;
	}
	.strategy-pick {
		min-width: 0;
	}
	/* Strategy + commodity flyouts span full width on the second row */
	.strategy-flyout-wrap {
		grid-column: 1 / -1;
	}
	.strategy-pick select,
	.strategy-flyout-btn,
	#combot-range,
	#combot-poll,
	#combot-stake,
	#combot-stop,
	#combot-tp,
	.commodity-flyout-wrap .strategy-flyout-btn {
		width: 100%;
		min-width: 0;
		max-width: none;
		font-size: 0.82rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.strategy-flyout,
	.commodity-flyout {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		max-height: min(65vh, 28rem);
	}
	.summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem;
	}
	.card {
		padding: 0.45rem 0.5rem;
	}
	.card strong {
		font-size: 0.95rem;
		word-break: break-word;
	}
	.explain {
		font-size: 0.78rem;
	}
	.table-wrap {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		margin-left: -0.15rem;
		margin-right: -0.15rem;
	}
	table {
		font-size: 0.72rem;
	}
	th, td {
		padding: 0.35rem 0.4rem;
	}
	.block h2 {
		font-size: 1rem;
	}
}

@media (max-width: 420px) {
	.controls {
		grid-template-columns: 1fr;
	}
	.summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}