/**
 * Display-currency control and converted figures (#582 Part 2).
 *
 * Shipped from the plugin rather than the theme's style.css for the reason the
 * price-index and guides stylesheets already are: the control and its styling
 * are one reviewable change in one repo, and a theme deploy can never leave the
 * selector unstyled. The theme owns only the call that places it in the header.
 *
 * TOKENS. The active theme is `cameraworth-theme` and uses the --cw-* palette;
 * the older `generatepress-child` uses --pedia-*. Each colour is written as
 * var(--cw-…, var(--pedia-…, <literal>)) so the control takes the redesign's
 * claret and parchment where they exist, the older palette where they do not,
 * and a legible literal under any other theme. The literals are the redesign's
 * values, because that is what is live.
 */

.cw-currency {
	display: inline-flex;
	align-items: center;
}

.cw-currency-select {
	appearance: none;
	-webkit-appearance: none;
	font-size: 0.8125rem;
	font-weight: 500;
	font-family: inherit;
	color: var(--cw-ink-3, var(--pedia-text-light, #7a7264));
	background-color: transparent;
	/* The chevron is inline SVG so the control needs no image request and no
	   second colour to keep in step with the theme. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%237a7264' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	border: 1px solid var(--cw-line-2, var(--pedia-border, #d8cfc0));
	border-radius: 6px;
	padding: 0.25rem 1.65rem 0.25rem 0.6rem;
	line-height: 1.4;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}

.cw-currency-select:hover {
	color: var(--cw-ink, var(--pedia-text, #1a1712));
	border-color: var(--cw-ink-3, var(--pedia-text-light, #7a7264));
}

.cw-currency-select:focus-visible {
	outline: 2px solid var(--cw-claret, var(--pedia-accent, #7c1626));
	outline-offset: 1px;
}

/**
 * A converted figure must not reflow the table it sits in when the reader
 * switches: "¥1,234,567" is wider than "£6,500", and a column that jumps on
 * every change reads as breakage. The figures are tabular anyway.
 */
.cw-money {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/**
 * The sales table's Value column. Right-aligned with the price beside it so the
 * two read as a pair, and tabular so switching currency does not reflow the
 * column — "¥1,234,567" is a lot wider than "£6,500".
 */
.pedia-sales-value-cell {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/**
 * A sale with no derivable sterling comparable. Muted, because the absence is
 * the information: the same rows are excluded from the figures above the table.
 */
.cw-money-none {
	color: var(--cw-ink-3, var(--pedia-text-light, #7a7264));
	cursor: help;
}

/** The currency code in the Value column header. */
[data-cw-currency-code] {
	font-variant-numeric: normal;
	opacity: 0.7;
}

/**
 * The provenance line under a converted figure block. Empty (and therefore
 * invisible) while the reader is in GBP, because there is nothing to disclose.
 */
[data-cw-currency-note]:empty {
	display: none;
}

.pedia-currency-note {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--cw-ink-3, var(--pedia-text-light, #7a7264));
}

/* The live theme collapses .pedia-header-nav into a drawer at 880px and
   stacks its children. The control gets the same rhythm as the links beside it
   rather than sitting flush against them. Scoped to the drawer's own selector
   so it cannot affect the desktop row. */
@media (max-width: 880px) {
	.pedia-nav-toggle:checked ~ .pedia-header-nav .cw-currency {
		padding: 10px 0;
		width: 100%;
	}

	.pedia-nav-toggle:checked ~ .pedia-header-nav .cw-currency-select {
		width: 100%;
	}
}