/**
 * Crypto Replay & Practice Simulator — layout.
 *
 * Three breakpoints, same pattern as the rest of the site:
 *   phone    (<768px)   chart on top, controls stacked beneath
 *   tablet   (768px+)   controls in a narrow column beside the stats
 *   desktop  (1024px+)  chart and a fixed side panel
 *
 * The chart is sized by CSS and redrawn to the canvas box, so it never
 * overflows its column or letterboxes.
 */

.sk-sim {
	--sk-up: #16a34a;
	--sk-down: #dc2626;
	--sk-grid: rgba(128, 128, 128, 0.22);
	--sk-axis: rgba(128, 128, 128, 0.95);
	display: grid;
	gap: 14px;
	margin: 24px 0 32px;
}

/* Labels for the selects are kept for screen readers but must not take up a
   row of their own in the flex header. */
.sk-sim-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sk-sim-header {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.sk-sim-select {
	/* The theme's reset makes every element display:block, which would stretch
	   a select across the whole row. Keep it intrinsic-width in the header and
	   let the replay bar size its own. */
	display: inline-block;
	width: auto;
	max-width: 100%;
	appearance: none;
	min-height: 40px;
	padding: 8px 32px 8px 12px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 10px;
	background-color: transparent;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	color: inherit;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.sk-sim-header .sk-sim-select {
	flex: 0 0 auto;
}

.sk-sim-modes {
	display: inline-flex;
	padding: 3px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 10px;
	gap: 3px;
}

.sk-sim-mode {
	min-height: 34px;
	padding: 6px 14px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.sk-sim-mode[aria-pressed="true"] {
	background: rgba(128, 128, 128, 0.18);
}

.sk-sim-priceblock {
	margin-left: auto;
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-variant-numeric: tabular-nums;
}

.sk-sim-price {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.sk-sim-change {
	font-size: 13px;
	font-weight: 600;
}

.sk-sim-change.is-up { color: var(--sk-up); }
.sk-sim-change.is-down { color: var(--sk-down); }

.sk-sim-status {
	order: -1;
	flex: 1 1 100%;
	font-size: 12px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: rgba(128, 128, 128, 0.95);
}

.sk-sim-status.is-live { color: var(--sk-up); }
.sk-sim-status.is-warn { color: #b45309; }
.sk-sim-status.is-replay { color: #2563eb; }

/* Chart ----------------------------------------------------------------- */

.sk-sim-chartwrap {
	position: relative;
	border: 1px solid rgba(128, 128, 128, 0.28);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(128, 128, 128, 0.04);
}

.sk-sim-chart {
	display: block;
	width: 100%;
	height: 300px;
}

/* Panel ---------------------------------------------------------------- */

.sk-sim-panel {
	display: grid;
	gap: 14px;
}

.sk-sim-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* Five cells in two columns would leave one empty slot; let the last stat
   span the row instead, at every width. */
.sk-sim-stat:last-child {
	grid-column: 1 / -1;
}

.sk-sim-stat {
	padding: 8px 10px;
	border: 1px solid rgba(128, 128, 128, 0.24);
	border-radius: 10px;
	min-width: 0;
}

.sk-sim-stat-label {
	display: block;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sk-sim-stat-value {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sk-sim-stat-value.is-up { color: var(--sk-up); }
.sk-sim-stat-value.is-down { color: var(--sk-down); }

.sk-sim-order {
	display: grid;
	gap: 8px;
}

.sk-sim-field {
	display: grid;
	gap: 4px;
}

.sk-sim-field label {
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* Full-width select used inside the stacked control column. */
.sk-sim-select-wide {
	display: block;
	width: 100%;
}

/* Live readout under the target field: says where the typed price sits relative
   to the market and how much of the balance it commits. */
.sk-sim-preview {
	margin: 0;
	min-height: 1.2em;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.85;
	overflow-wrap: anywhere;
}

.sk-sim-preview.is-up { color: var(--sk-up); }
.sk-sim-preview.is-down { color: var(--sk-down); }

.sk-sim-input {
	min-height: 40px;
	padding: 8px 10px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 10px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
}

.sk-sim-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.sk-sim-input[readonly] {
	opacity: 0.75;
	border-style: dashed;
	cursor: default;
}

.sk-sim-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	background: rgba(128, 128, 128, 0.16);
	color: inherit;
}

.sk-sim-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.sk-sim-btn.is-buy {
	background: var(--sk-up);
	color: #fff;
}

.sk-sim-btn.is-sell {
	background: var(--sk-down);
	color: #fff;
}

.sk-sim-btn.is-wide {
	grid-column: 1 / -1;
}

.sk-sim-replay {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 10px;
	border: 1px dashed rgba(128, 128, 128, 0.4);
	border-radius: 10px;
}

.sk-sim-replay[hidden] {
	display: none;
}

.sk-sim-log {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
	max-height: 160px;
	overflow-y: auto;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.sk-sim-log-row {
	padding: 5px 8px;
	border-radius: 7px;
	background: rgba(128, 128, 128, 0.1);
	overflow-wrap: anywhere;
}

.sk-sim-log-row.is-trade { background: rgba(37, 99, 235, 0.14); }
.sk-sim-log-row.is-good { background: rgba(22, 163, 74, 0.16); }
.sk-sim-log-row.is-bad { background: rgba(220, 38, 38, 0.16); }
.sk-sim-log-row.is-warn { background: rgba(180, 83, 9, 0.16); }

.sk-sim-note {
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.8;
}

/* Tablet --------------------------------------------------------------- */

@media (min-width: 768px) {
	.sk-sim {
		grid-template-columns: minmax(0, 1fr) 260px;
		align-items: start;
	}

	.sk-sim-header {
		grid-column: 1 / -1;
	}

	.sk-sim-chart {
		height: 400px;
	}

	.sk-sim-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop -------------------------------------------------------------- */

@media (min-width: 1024px) {
	.sk-sim {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.sk-sim-chart {
		height: 460px;
	}

	.sk-sim-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Dark scheme and reduced motion --------------------------------------- */

@media (prefers-color-scheme: dark) {
	.sk-sim {
		--sk-grid: rgba(200, 200, 200, 0.16);
		--sk-axis: rgba(220, 220, 220, 0.9);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sk-sim-mode,
	.sk-sim-btn {
		transition: none;
	}
}