/**
 * PlaidCars — UAE Tesla Market Report (MR-3). Self-contained, brand-token styled.
 * Reads the brand tokens (--pc-red / --pc-charcoal / --pc-font-*) from the theme's
 * site-wide brand-tokens.css, with safe fallbacks so it never renders unstyled.
 * Mobile-first; no fixed heights → no CLS.
 */
.pc-mr {
    font-family: var(--pc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    color: var(--pc-charcoal, #161616);
    max-width: 920px;
    margin: 0 auto;
}
.pc-mr--preview { border: 1px dashed var(--pc-red, #990000); border-radius: var(--pc-radius, 6px); padding: 12px; }
.pc-mr--preview > p:first-child { margin-top: 0; font-size: 13px; }

.pc-mr__head { margin-bottom: 14px; }
.pc-mr__title {
    font-family: var(--pc-font-display, sans-serif);
    font-weight: 800;
    font-size: clamp(22px, 4.5vw, 32px);
    line-height: 1.1;
    margin: 0 0 4px;
    color: var(--pc-charcoal, #161616);
}
.pc-mr__freshness { font-size: 13px; color: #666; margin: 0; }

.pc-mr__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
@media (min-width: 600px) { .pc-mr__cards { grid-template-columns: repeat(4, 1fr); } }
.pc-mr__card { background: #fafafa; border: 1px solid #ececec; border-radius: var(--pc-radius, 6px); padding: 12px; text-align: center; }
.pc-mr__big {
    display: block;
    font-family: var(--pc-font-num, "Saira Semi Condensed", system-ui, sans-serif);
    font-size: clamp(19px, 4vw, 26px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pc-charcoal, #161616);
}
.pc-mr__cap { display: block; font-size: 12px; color: #666; margin-top: 2px; }

.pc-mr__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pc-mr__table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 4px; }
.pc-mr__table th, .pc-mr__table td { padding: 8px 10px; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
.pc-mr__table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #888; font-weight: 600; }
.pc-mr__table th:not(:first-child), .pc-mr__table td.pc-num { text-align: right; }
.pc-mr__table .pc-num { font-family: var(--pc-font-num, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.pc-mr__model { font-weight: 600; }

.pc-mr__figure { margin: 18px 0; }
.pc-mr__figure figcaption { font-size: 12px; color: #888; margin-bottom: 6px; }
.pc-mr-chart { width: 100%; height: auto; display: block; }
.pc-mr-chart__bar { fill: var(--pc-red, #990000); }
.pc-mr-chart__lbl { font-size: 12px; fill: var(--pc-charcoal, #161616); }
.pc-mr-chart__val { font-size: 11px; fill: #666; font-family: var(--pc-font-num, system-ui, sans-serif); }

.pc-mr__mover { font-size: 13px; color: #444; margin: 8px 0 0; }
.pc-mr__method { font-size: 12px; color: #777; margin-top: 14px; padding-top: 10px; border-top: 1px solid #eee; }
.pc-mr__empty { color: #888; }

/* Market Index matrix — the per-row sample size (n=) is the transparency layer. */
.pc-matrix__n { color: var(--pc-faint, #999); font-size: 12px; }

/* Live market report sections — [pc_market_report section="…"]. Same tokens as above.
 * Charts are inline SVG scaled by viewBox; red = the point of the chart, charcoal =
 * context, grey = reference. Green is kept for deal badges only. */
.pc-ml {
    font-family: var(--pc-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    color: var(--pc-charcoal, #161616);
    max-width: 920px;
    margin: 0 auto 8px;
}
.pc-ml__lead { font-size: 17px; line-height: 1.5; margin: 0 0 12px; }
.pc-ml__stamp { font-size: 12px; color: #888; margin: 6px 0 0; }
.pc-ml__thin { font-size: 14px; color: #777; background: #fafafa; border-left: 3px solid #ddd; padding: 8px 12px; }
.pc-ml-chart { width: 100%; max-width: 760px; height: auto; display: block; overflow: visible; }
.pc-ml-chart__bar { fill: var(--pc-red, #990000); }
.pc-ml-chart__bar--dark { fill: var(--pc-charcoal, #161616); }
.pc-ml-chart__bar--grey { fill: #bdbdbd; }
.pc-ml-chart__bar--soft { fill: rgba(153, 0, 0, 0.18); }
.pc-ml-chart__dot { fill: var(--pc-red, #990000); stroke: #fff; stroke-width: 2; }
.pc-ml-chart__ref { stroke: #999; stroke-width: 1; stroke-dasharray: 3 3; }
.pc-ml-chart__grid { stroke: #eee; stroke-width: 1; }
.pc-ml-chart__axis { font-size: 11px; fill: #888; font-family: var(--pc-font-num, system-ui, sans-serif); }
.pc-ml-chart__lbl { font-size: 15px; font-weight: 600; fill: var(--pc-charcoal, #161616); }
.pc-ml-chart__val { font-size: 11px; fill: #555; font-family: var(--pc-font-num, system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.pc-ml-chart__line, .pc-ml-chart__line--dark, .pc-ml-chart__line--grey, .pc-ml-chart__line--dash { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pc-ml-chart__line { stroke: var(--pc-red, #990000); }
.pc-ml-chart__line--dark { stroke: var(--pc-charcoal, #161616); }
.pc-ml-chart__line--grey { stroke: #aaa; }
.pc-ml-chart__line--dash { stroke: #777; stroke-dasharray: 5 4; }
.pc-ml-chart__line-dot { fill: var(--pc-red, #990000); }
.pc-ml-chart__line--dark-dot { fill: var(--pc-charcoal, #161616); }
.pc-ml-chart__line--grey-dot { fill: #aaa; }
.pc-ml-chart__line--dash-dot { fill: #777; }
.pc-ml-chart__pt { fill: var(--pc-red, #990000); fill-opacity: 0.75; }
.pc-ml-chart__pt--dark { fill: var(--pc-charcoal, #161616); fill-opacity: 0.6; }
.pc-ml-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pc-ml-legend__dot.pc-ml-chart__pt { background: var(--pc-red, #990000); }
.pc-ml-legend__dot.pc-ml-chart__pt--dark { background: var(--pc-charcoal, #161616); }
.pc-ml-chart__fair { fill: none; stroke: #6b6b6b; stroke-width: 3.5; stroke-dasharray: 8 5; stroke-linejoin: round; }
.pc-ml-legend__sw.pc-ml-chart__fair-sw { background: repeating-linear-gradient(90deg, #6b6b6b 0 6px, transparent 6px 10px); height: 4px; width: 18px; }
.pc-ml__chart-title { font-family: var(--pc-font-display, sans-serif); font-weight: 800; font-size: 20px; line-height: 1.2; margin: 0 0 4px; color: var(--pc-charcoal, #161616); }
.pc-ml-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: #333; margin: 0 0 6px; }
.pc-ml-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.pc-ml-legend__sw { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.pc-ml-chart__line-sw { background: var(--pc-red, #990000); }
.pc-ml-chart__line--dark-sw { background: var(--pc-charcoal, #161616); }
.pc-ml-chart__line--grey-sw { background: #aaa; }
.pc-ml-chart__line--dash-sw { background: repeating-linear-gradient(90deg, #777 0 5px, transparent 5px 9px); }
.pc-ml .pc-mr__cards { margin-top: 4px; }
/* SVG text is sized in viewBox units (640 wide). On a phone the chart shrinks to
 * about half, so the text is set larger to stay readable. */
@media (max-width: 600px) {
    .pc-ml-chart__axis, .pc-ml-chart__val { font-size: 19px; }
    .pc-ml-chart__lbl { font-size: 22px; }
}
@media (max-width: 480px) {
    .pc-ml__lead { font-size: 16px; }
    .pc-mr__table th, .pc-mr__table td { padding: 7px 6px; }
}