.mtm-cc {
--mtm-cc-europe: #a20021;
--mtm-cc-world: #3b6db3;
--mtm-cc-accent: #f52f57;
--mtm-cc-surface: #ffffff;
--mtm-cc-ink: #1d1d1f;
--mtm-cc-ink-2: #595959;
--mtm-cc-grid: #e4e4e4;
--mtm-cc-band: rgba(233, 113, 50, 0.16);
--mtm-cc-band-ink: #a4501f;
margin: 1.5em 0;
padding: 20px 20px 14px;
background: var(--mtm-cc-surface);
border: 1px solid #ececec;
border-radius: 8px;
color: var(--mtm-cc-ink);
font-size: 15px;
line-height: 1.4;
}
.mtm-cc-title {
margin: 0 0 2px;
color: var(--mtm-cc-europe);
font-weight: 700;
font-size: 1.15em;
}
.mtm-cc-subtitle {
margin: 0 0 12px;
color: var(--mtm-cc-ink-2);
font-size: 0.9em;
}
.mtm-cc-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin-bottom: 10px;
font-size: 0.85em;
}
.mtm-cc-controls[hidden] {
display: none;
}
.mtm-cc-seg {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.mtm-cc-label {
color: var(--mtm-cc-ink-2);
margin-right: 4px;
}
.mtm-cc .mtm-cc-seg button {
margin: 0;
padding: 4px 10px;
border: 1px solid #d4d4d4;
border-radius: 999px;
background: #fff;
color: var(--mtm-cc-ink);
font: inherit;
font-size: 1em;
line-height: 1.3;
cursor: pointer;
}
.mtm-cc .mtm-cc-seg button:hover {
border-color: var(--mtm-cc-europe);
background: #fff;
color: var(--mtm-cc-ink);
}
.mtm-cc .mtm-cc-seg button[aria-pressed="true"] {
border-color: var(--mtm-cc-europe);
background: var(--mtm-cc-europe);
color: #fff;
}
.mtm-cc .mtm-cc-seg button:focus-visible,
.mtm-cc-hit:focus-visible,
.mtm-cc-band:focus-visible {
outline: 2px solid var(--mtm-cc-accent);
outline-offset: 2px;
}
.mtm-cc-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--mtm-cc-ink);
cursor: pointer;
}
.mtm-cc-toggle input {
accent-color: var(--mtm-cc-europe);
margin: 0;
}
.mtm-cc-plot {
position: relative;
width: 100%;
}
.mtm-cc-svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
font-family: inherit;
}
.mtm-cc-grid line {
stroke: var(--mtm-cc-grid);
stroke-width: 1;
}
.mtm-cc-grid .mtm-cc-axis {
stroke: #bdbdbd;
}
.mtm-cc-tick {
fill: var(--mtm-cc-ink-2);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.mtm-cc-axis-label {
fill: var(--mtm-cc-ink-2);
font-size: 12px;
}
.mtm-cc-band {
fill: var(--mtm-cc-band);
}
.mtm-cc-mark {
stroke: var(--mtm-cc-surface);
stroke-width: 2;
}
.mtm-cc-dot.is-europe .mtm-cc-mark { fill: var(--mtm-cc-europe); }
.mtm-cc-dot.is-world .mtm-cc-mark { fill: var(--mtm-cc-world); }
.mtm-cc-dot.is-open .mtm-cc-mark {
fill: var(--mtm-cc-surface);
stroke-width: 2;
}
.mtm-cc-dot.is-open.is-europe .mtm-cc-mark { stroke: var(--mtm-cc-europe); }
.mtm-cc-dot.is-open.is-world .mtm-cc-mark { stroke: var(--mtm-cc-world); }
.mtm-cc-dot.is-history { opacity: 0.38; }
.mtm-cc-range {
stroke-width: 1.5;
stroke-linecap: round;
opacity: 0.55;
}
.mtm-cc-dot.is-europe .mtm-cc-range { stroke: var(--mtm-cc-europe); }
.mtm-cc-dot.is-world .mtm-cc-range { stroke: var(--mtm-cc-world); }
.mtm-cc-dot.is-europe .mtm-cc-arrow { fill: var(--mtm-cc-europe); }
.mtm-cc-dot.is-world .mtm-cc-arrow { fill: var(--mtm-cc-world); }
.mtm-cc-ring {
fill: none;
stroke: var(--mtm-cc-accent);
stroke-width: 2;
}
.mtm-cc-hit {
fill: transparent;
cursor: pointer;
outline: none;
}
.mtm-cc-label {
fill: var(--mtm-cc-ink);
font-size: 11.5px;
paint-order: stroke;
stroke: var(--mtm-cc-surface);
stroke-width: 3px;
stroke-linejoin: round;
pointer-events: none;
}
.mtm-cc-tip-value small {
font-weight: 400;
font-size: 0.8em;
opacity: 0.75;
}
.mtm-cc-label.is-highlight {
font-size: 13px;
font-weight: 700;
}
.mtm-cc-tip {
position: absolute;
z-index: 5;
width: max-content;
max-width: 260px;
padding: 10px 12px;
background: #fff;
border: 1px solid #dcdcdc;
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
font-size: 13px;
line-height: 1.35;
pointer-events: none;
}
.mtm-cc-tip[hidden] {
display: none;
}
.mtm-cc-tip strong {
display: block;
font-size: 14px;
}
.mtm-cc-tip-sub {
display: block;
color: var(--mtm-cc-ink-2);
font-size: 12px;
}
.mtm-cc-tip-value {
display: block;
margin: 6px 0;
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mtm-cc-tip dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 10px;
margin: 0;
}
.mtm-cc-tip dt {
color: var(--mtm-cc-ink-2);
}
.mtm-cc-tip dd {
margin: 0;
}
.mtm-cc-tip p {
margin: 6px 0 0;
font-size: 12px;
}
.mtm-cc-tip .mtm-cc-tip-src {
color: var(--mtm-cc-ink-2);
}
.mtm-cc-legend {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 8px 0 6px;
color: var(--mtm-cc-ink-2);
font-size: 0.82em;
}
.mtm-cc-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mtm-cc-key {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
.mtm-cc-key.is-europe { background: var(--mtm-cc-europe); }
.mtm-cc-key.is-world { background: var(--mtm-cc-world); }
.mtm-cc-key.is-open { border: 2px solid var(--mtm-cc-ink-2); width: 8px; height: 8px; }
.mtm-cc-key.is-history { background: var(--mtm-cc-ink-2); opacity: 0.38; }
.mtm-cc-key.is-solid { background: var(--mtm-cc-ink-2); }
.mtm-cc-key.is-square { background: var(--mtm-cc-ink-2); border-radius: 1px; width: 9px; height: 9px; }
.mtm-cc-key.is-rangekey { width: 2px; height: 14px; border-radius: 0; background: var(--mtm-cc-ink-2); opacity: 0.6; }
.mtm-cc-key.is-band { width: 18px; height: 8px; border-radius: 2px; background: var(--mtm-cc-band); border: 1px solid var(--mtm-cc-band-ink); }
.mtm-cc-caption {
margin: 4px 0 0;
color: var(--mtm-cc-ink-2);
font-size: 0.78em;
text-align: left;
}
.mtm-cc-table {
margin-top: 10px;
font-size: 0.82em;
}
.mtm-cc-table summary {
cursor: pointer;
color: var(--mtm-cc-europe);
font-weight: 600;
}
.mtm-cc-table-scroll {
overflow-x: auto;
margin-top: 8px;
}
.mtm-cc-table table {
width: 100%;
margin: 0;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.mtm-cc-table th,
.mtm-cc-table td {
padding: 5px 8px;
border: 0;
border-bottom: 1px solid #eee;
text-align: left;
vertical-align: top;
}
.mtm-cc-table tr.is-history td {
color: var(--mtm-cc-ink-2);
}
@media (max-width: 560px) {
.mtm-cc {
padding: 14px 12px 10px;
}
}