/* cmp.wiki prices (2026-11-04). Loaded only on the page-prices template. Palette and fonts are the variables from
   /shared/header.css: 8 GB teal, 10 GB orange, variant not stated muted grey. Phone first; the chart scales with
   its box (SVG strokes do not scale, labels are HTML), the tables scroll inside their own box. */

.cmp-prices-page .cmp-page-title { font-size: clamp(1.55rem, 5.6vw, 3rem); max-width: 24ch; }
.cmpp { min-width: 0; }
.cmpp *, .cmpp *::before, .cmpp *::after { min-width: 0; }
.cmpp p { overflow-wrap: anywhere; }

.cmp-content .cmpp-h {
	margin: 2.2rem 0 .6rem;
	font-family: var(--cmp-font-display);
	font-size: clamp(1.05rem, 3.6vw, 1.35rem);
	font-weight: 800;
	line-height: 1.2;
}
.cmp-content .cmpp-h--first { margin-top: 0; }
.cmp-content .cmpp-sub { max-width: 760px; margin: .6rem 0; color: var(--cmp-muted); font-size: 14px; line-height: 1.5; }
.cmp-content .cmpp-add { margin: 1rem 0 0; font-weight: 600; }
.cmp-content .cmpp-foot { max-width: 760px; margin-top: 1.4rem; color: var(--cmp-muted); font-size: 13px; }

/* ---------- chart ---------- */
.cmpp-figure {
	margin: 0;
	padding: 14px 12px 12px;
	overflow: hidden;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
}
@media (min-width: 720px) { .cmpp-figure { padding: 20px 20px 16px; } }
.cmpp-figure figcaption { margin: 0; }
.cmp-content .cmpp-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	color: var(--cmp-muted);
	font-size: 13px;
	line-height: 1.3;
}
.cmp-content .cmpp-legend li { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--cmp-muted); }
.cmp-content .cmpp-legend li::marker { content: none; }
.cmpp-key { flex: none; width: 18px; height: 18px; overflow: visible; }

.cmpp-plot { position: relative; height: 320px; margin-top: 4px; }
@media (min-width: 720px) { .cmpp-plot { height: 420px; } }
.cmpp-axis-title {
	position: absolute;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.cmpp-axis-title--y { top: 0; left: 0; }
.cmpp-axis-title--x { right: 4px; bottom: 0; }
.cmpp-ylabels { position: absolute; top: 22px; bottom: 44px; left: 0; width: 44px; }
.cmpp-area { position: absolute; top: 22px; right: 4px; bottom: 44px; left: 48px; }
@media (min-width: 720px) {
	.cmpp-ylabels { width: 52px; }
	.cmpp-area { left: 58px; }
}
.cmpp-yl, .cmpp-xl {
	position: absolute;
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	white-space: nowrap;
}
.cmpp-yl { right: 6px; transform: translateY(-50%); }
.cmpp-xlabels { position: absolute; top: 100%; right: 0; left: 0; height: 20px; }
.cmpp-xl { top: 7px; transform: translateX(-50%); }
.cmpp-xl--start { transform: none; }
.cmpp-xl--end { transform: translateX(-100%); }
.cmpp-xl--minor { display: none; }
@media (min-width: 560px) { .cmpp-xl--minor { display: inline; } }

.cmpp-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.cmpp-svg path, .cmpp-key path { fill: none; vector-effect: non-scaling-stroke; }
.cmpp-grid { stroke: var(--cmp-border); stroke-width: 1; }
.cmpp-grid--x { stroke-dasharray: 2 4; }
.cmpp-grid--base { stroke: #3a434d; }
.cmpp-rng { stroke-width: 2; stroke-linecap: round; opacity: .5; }

.cmpp-pt path { stroke-linecap: round; }
.cmpp-pt .cmpp-ring { stroke: var(--cmp-surface); stroke-width: 12; }
.cmpp-pt .cmpp-dot { stroke-width: 9; }
.cmpp-pt .cmpp-hole { stroke: var(--cmp-surface); stroke-width: 4.5; }
.cmpp-pt.cmpp-v10 path { stroke-linecap: square; }
.cmpp-pt.cmpp-v10 .cmpp-ring { stroke-width: 11; }
.cmpp-pt.cmpp-v10 .cmpp-dot { stroke-width: 8; }
.cmpp-pt.cmpp-v10 .cmpp-hole { stroke-width: 4; }
.cmpp-pt.cmpp-vu .cmpp-ring { stroke-width: 10; }
.cmpp-pt.cmpp-vu .cmpp-dot { stroke-width: 7; }
.cmpp-pt.cmpp-vu .cmpp-hole { stroke-width: 3.5; }
.cmpp-svg .cmpp-pt:hover .cmpp-dot { stroke: var(--cmp-text); }

.cmpp-med { stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cmpp-med-halo { stroke: var(--cmp-surface); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }

.cmpp-v8 .cmpp-dot, .cmpp-rng.cmpp-v8, .cmpp-med.cmpp-v8 { stroke: var(--cmp-teal); }
.cmpp-v10 .cmpp-dot, .cmpp-rng.cmpp-v10, .cmpp-med.cmpp-v10 { stroke: var(--cmp-orange); }
.cmpp-vu .cmpp-dot, .cmpp-rng.cmpp-vu, .cmpp-med.cmpp-vu { stroke: var(--cmp-muted); }

/* ---------- tables ---------- */
.cmpp-scroll {
	max-height: 75vh;
	overflow: auto;
	border: 1px solid var(--cmp-border);
	border-radius: 8px;
	background: var(--cmp-surface);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.cmpp-scroll--small { max-height: none; }
.cmpp-scroll:focus-visible { outline: 2px solid var(--cmp-teal); outline-offset: 2px; }
.cmp-content .cmpp-table { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 13.5px; line-height: 1.4; }
.cmp-content .cmpp-table--cur { min-width: 560px; }
.cmp-content .cmpp-table th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 10px 12px;
	border-bottom: 1px solid var(--cmp-border);
	background: var(--cmp-surface-2);
	color: var(--cmp-muted);
	font-family: var(--cmp-font-mono);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}
.cmp-content .cmpp-table td { padding: 8px 12px; border-bottom: 1px solid var(--cmp-border); color: rgba(233, 230, 223, .9); text-align: left; vertical-align: top; }
.cmp-content .cmpp-table tr:last-child td { border-bottom: 0; }
.cmpp-table .cmpp-num { font-family: var(--cmp-font-mono); font-size: .95em; font-variant-numeric: tabular-nums; }
.cmpp-table .cmpp-nowrap { white-space: nowrap; }
.cmpp-table .cmpp-note { min-width: 16em; }
.cmp-content .cmpp-table .cmpp-by { min-width: 9em; color: var(--cmp-muted); font-family: var(--cmp-font-mono); font-size: .88em; overflow-wrap: anywhere; }
.cmpp-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--cmp-muted); vertical-align: 1px; }
.cmpp-swatch.cmpp-v8 { background: var(--cmp-teal); }
.cmpp-swatch.cmpp-v10 { border-radius: 1px; background: var(--cmp-orange); }