/*
 * moniq widgets. Every class is namespaced `moniq-`. The root resets what it
 * would otherwise inherit from the theme (font, colour, line height), and
 * element rules use doubled class specificity so typical theme selectors
 * such as `.entry-content a` or `.entry-content img` do not leak in.
 */

.moniq-widget {
	--moniq-bg: #fff;
	--moniq-fg: #111827;
	--moniq-muted: #6b7280;
	--moniq-line: #e5e7eb;
	--moniq-accent: #1d4ed8;
	--moniq-up: #15803d;
	--moniq-down: #b91c1c;

	all: initial;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 1em 0;
	padding: 14px 16px 10px;
	border: 1px solid var(--moniq-line);
	border-radius: 12px;
	background: var(--moniq-bg);
	color: var(--moniq-fg);
	font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: left;
	overflow-wrap: anywhere;
}

.moniq-widget.moniq-theme-dark {
	--moniq-bg: #111827;
	--moniq-fg: #f3f4f6;
	--moniq-muted: #9ca3af;
	--moniq-line: #1f2937;
	--moniq-accent: #93c5fd;
	--moniq-up: #4ade80;
	--moniq-down: #f87171;
}

@media (prefers-color-scheme: dark) {

	.moniq-widget.moniq-theme-auto {
		--moniq-bg: #111827;
		--moniq-fg: #f3f4f6;
		--moniq-muted: #9ca3af;
		--moniq-line: #1f2937;
		--moniq-accent: #93c5fd;
		--moniq-up: #4ade80;
		--moniq-down: #f87171;
	}
}

.moniq-widget.moniq-widget *,
.moniq-widget.moniq-widget *::before,
.moniq-widget.moniq-widget *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
}

.moniq-widget.moniq-widget .moniq-widget__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.moniq-widget.moniq-widget .moniq-widget__logo {
	display: block;
	flex: none;
	width: 36px;
	max-width: none;
	height: 36px;
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
}

.moniq-widget.moniq-widget .moniq-widget__titles {
	min-width: 0;
}

.moniq-widget.moniq-widget .moniq-widget__title,
.moniq-widget.moniq-widget .moniq-widget__heading {
	overflow: hidden;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.moniq-widget.moniq-widget .moniq-widget__heading {
	margin-bottom: 8px;
}

.moniq-widget.moniq-widget .moniq-widget__subtitle,
.moniq-widget.moniq-widget .moniq-widget__note,
.moniq-widget.moniq-widget .moniq-row__label {
	color: var(--moniq-muted);
	font-size: 12px;
}

.moniq-widget.moniq-widget .moniq-widget__note {
	margin-top: 8px;
}

.moniq-widget.moniq-widget .moniq-widget__note:empty {
	display: none;
}

.moniq-widget.moniq-widget .moniq-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-top: 1px solid var(--moniq-line);
}

.moniq-widget.moniq-widget .moniq-row__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.moniq-widget.moniq-widget .moniq-rate {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto auto;
	align-items: baseline;
	gap: 8px;
	padding: 6px 0;
	border-top: 1px solid var(--moniq-line);
}

.moniq-widget.moniq-widget .moniq-rate__code {
	font-weight: 600;
}

.moniq-widget.moniq-widget .moniq-rate__title {
	overflow: hidden;
	color: var(--moniq-muted);
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.moniq-widget.moniq-widget .moniq-rate__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.moniq-widget.moniq-widget .moniq-rate__change {
	min-width: 56px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.moniq-widget.moniq-widget .moniq-up {
	color: var(--moniq-up);
}

.moniq-widget.moniq-widget .moniq-down {
	color: var(--moniq-down);
}

.moniq-widget.moniq-widget .moniq-accent {
	color: var(--moniq-accent);
}

.moniq-widget.moniq-widget .moniq-book {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.moniq-widget.moniq-widget .moniq-book > .moniq-widget__empty {
	grid-column: 1 / -1;
}

.moniq-widget.moniq-widget .moniq-book__title {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 12px;
}

.moniq-widget.moniq-widget .moniq-book__row {
	display: flex;
	justify-content: space-between;
	padding: 3px 0;
	color: var(--moniq-fg);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.moniq-widget.moniq-widget .moniq-book__row--head {
	color: var(--moniq-muted);
}

.moniq-widget.moniq-widget .moniq-book__side.moniq-up .moniq-book__price {
	color: var(--moniq-up);
}

.moniq-widget.moniq-widget .moniq-book__side.moniq-down .moniq-book__price {
	color: var(--moniq-down);
}

/* The chart height follows the column width: lower in a narrow sidebar. */
.moniq-widget.moniq-widget .moniq-chart {
	position: relative;
	width: 100%;
	min-height: 200px;
	max-height: 420px;
	aspect-ratio: 16 / 9;
}

.moniq-widget.moniq-widget .moniq-chart .moniq-widget__empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.moniq-widget.moniq-widget .moniq-widget__empty {
	padding: 16px 0;
	color: var(--moniq-muted);
	text-align: center;
}

.moniq-widget.moniq-widget .moniq-widget__footer {
	margin-top: 10px;
	text-align: right;
}

.moniq-widget.moniq-widget .moniq-widget__attribution {
	color: var(--moniq-muted);
	font-size: 11px;
	text-decoration: none;
}

.moniq-widget.moniq-widget .moniq-widget__attribution:hover,
.moniq-widget.moniq-widget .moniq-widget__attribution:focus {
	color: var(--moniq-accent);
	text-decoration: underline;
}

/* Lightweight Charts draws on canvases inside table cells. */
.moniq-widget.moniq-widget .moniq-chart table,
.moniq-widget.moniq-widget .moniq-chart td,
.moniq-widget.moniq-widget .moniq-chart tr {
	border: 0;
	background: none;
}

/* Shown to logged-in editors only. */
.moniq-notice {
	margin: 1em 0;
	padding: 8px 12px;
	border-left: 4px solid #d97706;
	background: #fffbeb;
	color: #78350f;
	font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

@media (max-width: 360px) {

	.moniq-widget.moniq-widget .moniq-rate {
		grid-template-columns: 40px minmax(0, 1fr) auto;
	}

	.moniq-widget.moniq-widget .moniq-rate__change {
		display: none;
	}
}