/*!
* Phase 213 extraction — layer: p210-cards-preview
* ------------------------------------------------
* Owner : MTLE Phase 210 (mockup-faithful illustrated cards,
* unified Water Topology grid, Design Preview stage polish,
* Linework Review canvas rule — Phase 239 rename of
* "Cut Plot")
* Scope attr : html[data-p210="v1"] (set by /web/mtle/js/p210-cards-preview.js)
* Public hook : window._p210
* Cascade : loads AFTER p208/p209, BEFORE p212-contract-hardening.css.
* Contract : Additive visual layer only. The Phase 212 mutually-
* exclusive-card rules that previously sat in-between the
* p210 rules have moved to p212-contract-hardening.css so
* their cascade order is explicit and last-wins.
*/
/* =====================================================================
* PHASE 210 — MTLE Mockup-Faithful UI Polish.
*
* Replaces the visible Step 3/4 customer controls with illustrated
* product cards (warm cream thumbnail top + dark metadata band + active
* blue border + check badge) and upgrades the Design Preview stage
* with a centered paper, label plaque, north arrow, scale bar and a
* calmer map-ink palette.
*
* Scope: all rules below target `html[data-p210="v1"]` and layer on
* top of Phase 208/209 without replacing them. The Phase 209 p209
* classes are kept on the same buttons so the existing state sync,
* MutationObservers, and Playwright test IDs still work. Export
* bytes are never touched; palette remaps stay scoped to
* `#preview-panel .mte-pv-svg-host`.
* =================================================================== */
html[data-p210="v1"] {
/* Phase 210.2 — lighter, ivory-leaning thumbnail tones so the
* cards read as warm-white paper samples, not tan wood veneer. */
--p210-card-thumb-bg: #faf3de;
--p210-card-thumb-edge: #c7b896;
--p210-card-body-bg: #13192a;
--p210-card-body-bg-hi: #1a2236;
--p210-card-border: rgba(255,255,255,0.09);
--p210-card-border-hi: #58a0e8;
--p210-card-glow: 0 0 0 3px rgba(94,160,255,0.18), 0 10px 28px -14px rgba(94,160,255,0.55);
--p210-card-shadow: 0 10px 22px -12px rgba(0,0,0,0.65), 0 1px 0 rgba(255,255,255,0.05) inset;
--p210-card-check: #58a0e8;
--p210-card-title: #eaf0fa;
--p210-card-desc: #9ba3b5;
--p210-section-heading: #8fc0ff;
--p210-stage-floor-0: #05070b;
--p210-stage-floor-1: #0c1220;
/* Phase 210.2 — the first p210 pass still read as basswood wood
* veneer, not printed paper. Shift toward warm ivory / printed-
* paper tones: much lower saturation on the body, lighter hi,
* gentler lo, muted edge. The paper should read as a premium
* warm-white product card, not a stained wood slab. */
--p210-stage-paper: #f1ead7;
--p210-stage-paper-hi: #faf5e6;
--p210-stage-paper-lo: #d9cfb2;
--p210-stage-paper-edge: #a59574;
--p210-ink-0: #1a140a;
--p210-ink-1: #34281a;
--p210-ink-2: #5a4830;
--p210-ink-soft: rgba(26,20,10,0.60);
}
/* ---------- Widen sidebar so v3 cards breathe on desktop widths ---------- */
@media (min-width: 1600px) {
html[data-p210="v1"] .wizard-panel { width: 540px; min-width: 420px; }
}
@media (min-width: 1400px) and (max-width: 1599px) {
html[data-p210="v1"] .wizard-panel { width: 480px; min-width: 400px; }
}
/* ---------- v3 section heading ---------- */
html[data-p210="v1"] .mtle-section-label-v3 {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.9px;
text-transform: uppercase;
color: var(--p210-section-heading);
margin: 14px 0 8px;
}
html[data-p210="v1"] .mtle-section-label-v3::before {
content: "";
display: inline-block;
width: 3px; height: 12px;
background: var(--p210-section-heading);
border-radius: 2px;
box-shadow: 0 0 6px rgba(143,192,255,0.45);
}
/* ---------- v3 illustrated product cards (style cards) ---------- */
html[data-p210="v1"] .mtle-card-grid-v3 {
display: grid;
gap: 10px;
margin: 10px 0 14px;
}
html[data-p210="v1"] .mtle-card-grid-v3.cols-2 { grid-template-columns: 1fr 1fr; }
html[data-p210="v1"] .mtle-card-grid-v3.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
html[data-p210="v1"] .mtle-card-grid-v3.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
html[data-p210="v1"] .mtle-card-grid-v3.cols-3,
html[data-p210="v1"] .mtle-card-grid-v3.cols-2 { grid-template-columns: 1fr; }
}
html[data-p210="v1"] .mtle-style-card-v3 {
appearance: none;
-webkit-appearance: none;
background: var(--p210-card-body-bg);
color: var(--p210-card-title);
border: 1.5px solid var(--p210-card-border);
border-radius: 12px;
padding: 0;
cursor: pointer;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--p210-card-shadow);
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
text-align: left;
font-family: inherit;
position: relative;
min-height: 120px;
}
html[data-p210="v1"] .mtle-style-card-v3:hover {
transform: translateY(-2px);
border-color: rgba(143,192,255,0.45);
background: var(--p210-card-body-bg-hi);
}
html[data-p210="v1"] .mtle-style-card-v3:focus-visible {
outline: none;
box-shadow: var(--p208-focus-ring), var(--p210-card-shadow);
border-color: var(--p210-card-border-hi);
}
html[data-p210="v1"] .mtle-style-card-v3.active,
html[data-p210="v1"] .mtle-style-card-v3[aria-pressed="true"] {
border-color: var(--p210-card-border-hi);
box-shadow: var(--p210-card-glow), var(--p210-card-shadow);
}
html[data-p210="v1"] .mtle-style-card-thumb {
position: relative;
background:
radial-gradient(120% 140% at 50% 0%, var(--p210-stage-paper-hi) 0%, var(--p210-card-thumb-bg) 45%, var(--p210-stage-paper-lo) 100%);
border-bottom: 1px solid var(--p210-card-thumb-edge);
padding: 0;
display: block;
aspect-ratio: 10 / 6;
overflow: hidden;
/* Phase 210.4 — subtle inner highlight + bottom-edge shadow so the
* illustrated mini-map feels like a printed paper sample tucked
* into the card, not a flat colored patch. */
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -4px 10px rgba(0,0,0,0.06);
}
html[data-p210="v1"] .mtle-style-card-thumb svg {
display: block;
width: 100%;
height: 100%;
color: var(--p210-ink-1);
}
/* Phase 262 — thumbnails moved to flat editable SVG asset files served
via ![]()
. Mirror the inline-SVG layout so visual parity is held. */
html[data-p210="v1"] .mtle-style-card-thumb-img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: transparent;
pointer-events: none;
}
/* Thumbnail canvas is always bright even on hover/selected states. */
html[data-p210="v1"] .mtle-style-card-v3 .mtle-style-card-thumb { color: var(--p210-ink-1); }
html[data-p210="v1"] .mtle-style-card-check {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--p210-card-check);
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(94,160,255,0.45), 0 0 0 2px rgba(255,255,255,0.75) inset;
}
html[data-p210="v1"] .mtle-style-card-v3.active .mtle-style-card-check,
html[data-p210="v1"] .mtle-style-card-v3[aria-pressed="true"] .mtle-style-card-check {
display: inline-flex;
}
html[data-p210="v1"] .mtle-style-card-body {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 2px;
background: linear-gradient(180deg, var(--p210-card-body-bg), #0e1321);
flex: 1;
}
html[data-p210="v1"] .mtle-style-card-v3.active .mtle-style-card-body,
html[data-p210="v1"] .mtle-style-card-v3[aria-pressed="true"] .mtle-style-card-body {
background: linear-gradient(180deg, #18243a, #0e1833);
}
html[data-p210="v1"] .mtle-style-card-title {
font-size: 12.5px;
font-weight: 700;
color: var(--p210-card-title);
letter-spacing: 0.2px;
}
html[data-p210="v1"] .mtle-style-card-desc {
font-size: 10.5px;
color: var(--p210-card-desc);
line-height: 1.35;
}
/* Suppress the legacy Phase 209 compact chip rendering on Step 4
* water/relief pills once p210 has promoted them to v3 illustrated
* cards. The legacy mini 24-px preview and the grid layout are
* overridden so the basswood thumbnail panel dominates. */
html[data-p210="v1"] #waterLookPills,
html[data-p210="v1"] #reliefModePills {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 10px 0 14px;
}
html[data-p210="v1"] #reliefModePills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
html[data-p210="v1"] #waterLookPills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
html[data-p210="v1"] #waterLookPills,
html[data-p210="v1"] #reliefModePills { grid-template-columns: 1fr; }
}
html[data-p210="v1"] #waterLookPills .water-look-pill.mtle-style-card-v3,
html[data-p210="v1"] #reliefModePills .water-look-pill.mtle-style-card-v3 {
/* Override Phase 209.4's compact grid rendering. */
grid-template-columns: none;
align-items: stretch;
padding: 0;
column-gap: 0;
row-gap: 0;
}
/* Hide the legacy inner label/desc spans once the v3 body renders. */
html[data-p210="v1"] #waterLookPills .water-look-pill.mtle-style-card-v3 > .pill-label,
html[data-p210="v1"] #waterLookPills .water-look-pill.mtle-style-card-v3 > .pill-desc,
html[data-p210="v1"] #reliefModePills .water-look-pill.mtle-style-card-v3 > .pill-label,
html[data-p210="v1"] #reliefModePills .water-look-pill.mtle-style-card-v3 > .pill-desc {
display: none;
}
/* Hide the old p209 compact 24-px preview if it was installed. */
html[data-p210="v1"] .mtle-style-card-v3 > .p209-style-card-preview {
display: none !important;
}
/* Railways/Parks/Water choice-card grids: widen to the v3 card layout.
* Phase 352: #p351fu11WaterStyleGroup (global single-surface water cards)
* and .p352-water-piece-card-grid (per-piece depth cards) join the same
* gold 3-up layout so the water cards match the parks/railways quality. */
html[data-p210="v1"] #railwaysStyleGroup,
html[data-p210="v1"] #parksStyleGroup,
html[data-p210="v1"] #p351fu11WaterStyleGroup,
html[data-p210="v1"] .p352-water-piece-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 10px 0 14px;
}
@media (max-width: 1100px) {
html[data-p210="v1"] #railwaysStyleGroup,
html[data-p210="v1"] #parksStyleGroup,
html[data-p210="v1"] #p351fu11WaterStyleGroup,
html[data-p210="v1"] .p352-water-piece-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
html[data-p210="v1"] #railwaysStyleGroup,
html[data-p210="v1"] #parksStyleGroup,
html[data-p210="v1"] #p351fu11WaterStyleGroup,
html[data-p210="v1"] .p352-water-piece-card-grid { grid-template-columns: 1fr; }
}
/* Strip legacy choice-card styling so v3 wins when promoted. */
html[data-p210="v1"] #railwaysStyleGroup .choice-card.mtle-style-card-v3,
html[data-p210="v1"] #parksStyleGroup .choice-card.mtle-style-card-v3,
html[data-p210="v1"] #p351fu11WaterStyleGroup .choice-card.mtle-style-card-v3,
html[data-p210="v1"] .p352-water-piece-card-grid .choice-card.mtle-style-card-v3 {
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
text-align: left;
}
/* Hide the legacy choice-card children directly inside the button —
* the original