/* YACHTWAVE® Delivery Platform — the WEB demo's own layer (2026-09-26).
   =====================================================================================
   /mdp/ is the web version of the IBEX booth demo (change order, John, 2026-09-26). The shared web look
   (../../css/demo.css, app.css) sizes the header, the dialogue, the cards and the stage exactly as on /fleet/;
   this file adds ONLY what the booth's content needs to render on the web at all, in PIXELS (John, 2026-09-26:
   "the fleet edition demo is the agreed to look/feel for the web. it just needs to use that CSS"). It is the web twin of
   ../../ibex/css/ibex.css (kiosk units, --in), which stays the booth's and is not linked here.
   ⛔ Nothing here is scoped to html.kiosk, and nothing here uses --in: kiosk mode never runs on this page.
   ===================================================================================== */

/* ---------------- the gate (index.html window.DEMO.gate): the booth's attract copy ---------------- */
.gate-head h1 .hi { color: #FA884C; }   /* the "1" in the booth orange, as on www /ibex */
.gate-card p .gate-sub { display: block; margin-bottom: 4px; }   /* the sub-heading on its own line; Fleet's gate type otherwise */

/* a step heading may carry a \n for a set line break (B-2) */
#tt-title { white-space: pre-line; }
/* the header's stage names jump to each section's start (js/mdp.js STAGE BAR JUMPS) */
#stepper .stage { cursor: pointer; }
/* S-1 carries no "Step 1 of 1" (John, 2026-09-24: "not needed"; cardClass no-count) */
#tooltip.card.no-count .tt-count { display: none; }

/* ---------------- plates on the web: no bigger than Fleet's browser frame ----------------
   Fleet's frame is min(1140px, 100vw - 80px) wide and its screen min(660px, 100vh - 224px) tall; a plate gets the same
   box less the dialogue's column beside it (the plate rule the shared app.css already keeps), times the plate's own
   `scale:` (screens.js, --plate-scale). */
.plate { --pl-h: min(660px, calc(100vh - 224px)); --pl-w: min(1140px, calc(100vw - var(--tooltip-w) - 150px)); }
.plate img { max-height: calc(var(--pl-h) * var(--plate-scale, 1)); max-width: calc(var(--pl-w) * var(--plate-scale, 1)); }
/* HTML plates (screens.js `html:`): --u is one design px of the plate, sized exactly as a plate <img> is, so the spots
   line up; capped at 1px so an HTML plate never grows past its natural size, as an <img> plate doesn't */
.plate-html { --u: min(calc(var(--pl-h) * var(--plate-scale, 1) / var(--ph)), calc(var(--pl-w) * var(--plate-scale, 1) / var(--pw)), 1px);
  width: calc(var(--pw) * var(--u)); height: calc(var(--ph) * var(--u)); line-height: 1.2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1A202C; -webkit-font-smoothing: antialiased; }

/* ---------------- a plate's page title (screens.js `title:`) ----------------
   Centred under the blue header on a white card. The in-stage h2 is only the SOURCE (#stage is its own stacking
   context, so it would sit under #dim); js/mdp.js mirrors it into one body-level #page-title. The empty .plate-title
   keeps the same height in the flow so the picture starts below it. */
:root { --pt-size: 24px; --pt-top: 18px; --pt-card-pad-y: 10px; }
.plate-title { height: calc(var(--pt-size) * 1.15 + 2 * var(--pt-card-pad-y) + var(--pt-top) + 14px); flex: none; }
#stage .plate-title-fixed, #lens .plate-title-fixed { display: none; }
#page-title.hidden { display: none; }
#page-title { position: fixed; z-index: 132; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 80px);
  top: calc(62px + var(--pt-top)); margin: 0; padding: var(--pt-card-pad-y) 26px; text-align: center;
  font-size: var(--pt-size); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--navy, #0B2239); pointer-events: none;
  background: #fff; border-radius: var(--r-card); box-shadow: 0 6px 20px -6px rgba(11, 34, 57, .25); }
#page-title .hi { color: #FA884C; }

/* ---------------- photos, not devices (D-0b's bin, D-4's owner): rounded, soft shadow ---------------- */
.plate img[src$="deliver_bin_v1.webp"], .plate img[src$="deliver_owner_generator_v1.webp"] { border-radius: var(--r-card); box-shadow: 0 16px 38px -10px rgba(11, 34, 57, .35); }
/* C-6's YachtLINK™ device is a cut-out product shot: a drop shadow, and no dim or ring on that step */
.plate img[src$="yachtlink_device_v2.webp"] { filter: drop-shadow(0 20px 26px rgba(11, 34, 57, .4)); }
body:has(#browser-screen img[src$="yachtlink_device_v2.webp"]) #dim,
body:has(#browser-screen img[src$="yachtlink_device_v2.webp"]) #spotlight { visibility: hidden; }

/* BIN → APP crossfade (js/mdp.js): the new plate fades in while a fixed copy of the bin fades out over it */
@keyframes plateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plateFadeOut { from { opacity: 1; } to { opacity: 0; } }
.plate.plate-fade-in { animation: plateFadeIn .7s ease both; }
.plate-ghost { position: fixed; z-index: 128; pointer-events: none; object-fit: contain; animation: plateFadeOut .7s ease both; }   /* under #dim (129) and the lens */

/* ---------------- LENS PLACE sheet (js/mdp.js): D-2's manual / C-2's photo above the lens, framed like the lens ---------------- */
#lens-sheet { position: fixed; z-index: 130; pointer-events: none; object-fit: contain; box-sizing: border-box;
  background: #fff; border: 3px solid #fff; padding: var(--lens-pad, 10px);
  box-shadow: 0 30px 60px -16px rgba(11, 34, 57, .6), 0 0 0 1px rgba(11, 34, 57, .16), 0 6px 18px -6px rgba(11, 34, 57, .35); }
#lens-sheet.hidden { display: none; }
#lens-sheet.in { animation: sheetIn .45s .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
#lens-sheet.cut { background: none; border: 0; padding: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 16px 20px rgba(11, 34, 57, .45)); }

/* ---------------- the HTML plates' own look — VERBATIM from ../../ibex/css/ibex.css (plate px x --u, no kiosk units) ----------------
   Production Build Order (bo-*), Documents tablet (dc-*), D-3 video (vp-*), Builds laptop (bd-*), laptop captures (ls-*),
   DealerLINK™ placeholder (dl-*). Change them in BOTH files if a plate's look changes. */
.plate-html .bo-page { position: absolute; left: calc(161 * var(--u)); top: 0; width: calc(665 * var(--u)); height: calc(955 * var(--u));
  background: #fff; overflow: hidden; box-shadow: 0 calc(28 * var(--u)) calc(36 * var(--u)) calc(-12 * var(--u)) rgba(0, 0, 0, .45); }
.plate-html .bo-top { height: calc(51 * var(--u)); background: #2580C9; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(13 * var(--u)) 0 calc(12 * var(--u)); }
.plate-html .bo-brand { font-size: calc(12.6 * var(--u)); font-weight: 700; letter-spacing: calc(1.35 * var(--u)); }
.plate-html .bo-doc { text-align: right; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.plate-html .bo-doc b { font-size: calc(12.4 * var(--u)); font-weight: 700; }
.plate-html .bo-doc span { font-size: calc(7.8 * var(--u)); opacity: .92; }
.plate-html .bo-info { position: relative; margin: calc(11 * var(--u)) calc(9 * var(--u)) 0; height: calc(60 * var(--u)); background: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(11, 34, 57, .10); border-radius: calc(3 * var(--u)); }
.plate-html .bo-f { position: absolute; top: calc(17 * var(--u)); display: flex; flex-direction: column; }
.plate-html .bo-f span, .plate-html .bo-lang span, .plate-html .bo-status span, .plate-html .bo-lbl { font-size: calc(6.3 * var(--u)); text-transform: uppercase; letter-spacing: calc(0.5 * var(--u)); color: #8A93A3; }
.plate-html .bo-f b { font-size: calc(9.4 * var(--u)); font-weight: 400; color: #6E7583; margin-top: calc(2 * var(--u)); }
.plate-html .bo-f:not(.big) { top: calc(28 * var(--u)); }
.plate-html .bo-f.big b { font-size: calc(17.5 * var(--u)); font-weight: 700; color: #2B6399; margin-top: calc(1 * var(--u)); }
.plate-html .bo-lang { position: absolute; right: calc(15 * var(--u)); top: calc(11 * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(3 * var(--u)); }
.plate-html .bo-sel { width: calc(113 * var(--u)); height: calc(22 * var(--u)); box-sizing: border-box; border: calc(1 * var(--u)) solid #E6EAF0; border-radius: calc(3 * var(--u));
  display: flex; align-items: center; padding: 0 calc(7 * var(--u)); font-size: calc(8.8 * var(--u)); color: #677890; position: relative; box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.05); }
.plate-html .bo-sel i { position: absolute; right: calc(8 * var(--u)); top: calc(9 * var(--u)); border: calc(3.2 * var(--u)) solid transparent; border-top-color: #8A93A3; }
.plate-html .bo-status { display: flex; gap: calc(3 * var(--u)); margin: calc(7 * var(--u)) calc(9 * var(--u)) 0; height: calc(42 * var(--u)); }
.plate-html .bo-status > div { position: relative; background: #F8AA23; border-radius: calc(3 * var(--u)); color: #fff; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(13 * var(--u)); gap: calc(3 * var(--u)); }
.plate-html .bo-status > div:first-child { width: calc(265 * var(--u)); }
.plate-html .bo-status > div:last-child { flex: 1; }
.plate-html .bo-status span { color: rgba(255, 255, 255, .8); letter-spacing: calc(0.8 * var(--u)); font-weight: 700; }
.plate-html .bo-status b { font-size: calc(10.4 * var(--u)); font-weight: 800; letter-spacing: calc(1.1 * var(--u)); }
.plate-html .bo-status em { position: absolute; right: calc(13 * var(--u)); top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: calc(3 * var(--u)); font-style: normal; }
.plate-html .bo-sec { margin: calc(17 * var(--u)) calc(9 * var(--u)) 0; height: calc(22 * var(--u)); background: #2E4156; border-radius: calc(2 * var(--u)); color: #fff;
  display: flex; align-items: center; padding: 0 calc(13 * var(--u)); font-size: calc(7.4 * var(--u)); font-weight: 700; letter-spacing: calc(1.6 * var(--u)); }
.plate-html .bo-sec + .bo-item { margin-top: calc(8 * var(--u)); }
.plate-html .bo-item { margin: calc(7 * var(--u)) calc(9 * var(--u)) 0; box-shadow: 0 calc(1 * var(--u)) calc(5 * var(--u)) rgba(11, 34, 57, .07); }
.plate-html .bo-item + .bo-sec { margin-top: calc(17 * var(--u)); }
.plate-html .bo-ih { height: calc(40 * var(--u)); background: #F6F8FA; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(13 * var(--u)); box-sizing: border-box; }
.plate-html .bo-t { font-size: calc(9.9 * var(--u)); font-weight: 700; color: #1A202C; }
.plate-html .bo-d { font-size: calc(6.5 * var(--u)); color: #7A8190; margin-top: calc(2.5 * var(--u)); }
.plate-html .bo-badge { font-size: calc(6.3 * var(--u)); font-weight: 700; letter-spacing: calc(1 * var(--u)); padding: calc(2.5 * var(--u)) calc(6.5 * var(--u)); border-radius: calc(2 * var(--u)); }
.plate-html .bo-badge.ok { background: #E3F6EE; color: #2F9A72; }
.plate-html .bo-badge.pend { background: #E9EDF1; color: #7A8190; }
.plate-html .bo-badge.rev { background: #FFF3D6; color: #D5A24A; }
.plate-html .bo-res, .plate-html .bo-int, .plate-html .bo-note { box-sizing: border-box; padding: calc(11 * var(--u)) calc(13 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(4.5 * var(--u)); }
.plate-html .bo-res { height: calc(42 * var(--u)); background: #fff; }
.plate-html .bo-int, .plate-html .bo-note { height: calc(39 * var(--u)); }
.plate-html .bo-v { font-size: calc(8.9 * var(--u)); color: #30333F; }
.plate-html .bo-int { background: #FFF6F5; border-top: calc(1 * var(--u)) dashed #F09A93; }
.plate-html .bo-int .bo-lbl { color: #D0463A; font-weight: 700; }
.plate-html .bo-int .bo-v { font-style: italic; color: #6B7A99; }
.plate-html .bo-note { background: #FFFCEC; border-top: calc(1 * var(--u)) dashed #F1D48A; }
.plate-html .bo-note .bo-lbl { color: #E3A23B; font-weight: 700; }
.plate-html .bo-note .bo-v { color: #5F6670; }
.plate-html .dc { position: absolute; inset: 0; font-family: 'Inter', sans-serif; }
.plate-html .dc > * { position: absolute; }
.plate-html .dc-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .dc-glass { background: #FAFBFD; }
.plate-html .dc-side { background: #212A44; width: calc(300 * var(--u)) !important; }   /* runs under the panel so its rounded corner shows navy */
.plate-html .dc-rule { background: #39415A; }
.plate-html .dc-on { background: #373F57; }
.plate-html .dc-sico { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-snav, .plate-html .dc-mi, .plate-html .dc-ver, .plate-html .dc-title, .plate-html .dc-th, .plate-html .dc-t { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .dc-snav { color: #fff; font-size: calc(14.4 * var(--u)); font-weight: 700; }
.plate-html .dc-mi { color: #fff; font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: calc(1.75 * var(--u)); }
.plate-html .dc-out { font-size: calc(13.2 * var(--u)); font-weight: 700; letter-spacing: calc(2.2 * var(--u)); color: #E8EAF0; }
.plate-html .dc-ver { color: #8C93A6; font-size: calc(11.5 * var(--u)); }
.plate-html .dc-es, .plate-html .dc-av { border-radius: 50%; background: #4CCC8D; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-es { font-size: calc(10.5 * var(--u)); }
.plate-html .dc-av { font-size: calc(19 * var(--u)); }
.plate-html .dc-badge { border-radius: calc(9 * var(--u)); background: #454D64; color: #D5D8DF; font-size: calc(10.5 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-bell { border-radius: 50%; background: #fff; color: #212A44; font-size: calc(9 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-panel { background: #FAFBFD; border-radius: calc(30 * var(--u)) 0 0 calc(30 * var(--u)); }
.plate-html .dc-title { color: #1E2638; font-size: calc(23.8 * var(--u)); font-weight: 800; letter-spacing: calc(-0.2 * var(--u)); }
.plate-html .dc-box, .plate-html .dc-seg { background: #fff; border: calc(1 * var(--u)) solid #E3E7EE; border-radius: calc(6 * var(--u)); box-sizing: border-box; }
.plate-html .dc-box > *, .plate-html .dc-seg > * { position: absolute; }
.plate-html .dc-box span { transform: translateY(-50%); font-size: calc(14 * var(--u)); color: #7B8494; white-space: nowrap; line-height: 1; }
.plate-html .dc-box span.dk { color: #2B3345; }
.plate-html .dc-seg i { background: #E3E7EE; }
.plate-html .dc-seg b { left: 0; top: 0; width: calc(35 * var(--u)); height: 100%; background: #F1F3F7; border-radius: calc(5 * var(--u)) 0 0 calc(5 * var(--u)); }
.plate-html .dc-gl { fill: none; stroke: #8792A4; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-gl.dk { stroke: #3F475C; color: #3F475C; stroke-width: 0; }
.plate-html .dc-seg .dc-gl.dk:last-child { stroke-width: 2.2; }
.plate-html .dc-help { border-radius: 50%; background: #8E99AB; color: #fff; font-size: calc(17 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.plate-html .dc-thead { background: #E4E8F0; border-radius: calc(6 * var(--u)); }
.plate-html .dc-th { color: #5B6478; font-size: calc(11.3 * var(--u)); font-weight: 700; letter-spacing: calc(0.6 * var(--u)); }
.plate-html .dc-row { background: #fff; border-radius: calc(4 * var(--u)); box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(30, 38, 56, .09); }
.plate-html .dc-tile { background: #29314A; border-radius: calc(4 * var(--u)); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-tile svg { width: 72%; height: 72%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .dc-t { color: #7A8394; font-size: calc(13.9 * var(--u)); }
.plate-html .dc-t.b { color: #1E2638; font-weight: 500; font-size: calc(13.6 * var(--u)); }
.plate-html .dc-date { font-size: calc(12.6 * var(--u)); }
.plate-html .dc-pill { border-radius: calc(3 * var(--u)); color: #fff; font-size: calc(10.5 * var(--u)); font-weight: 800; letter-spacing: calc(0.5 * var(--u)); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-pill.ok { background: #4CCC8D; }
.plate-html .dc-pill.bad { background: #EE5A5F; }
.plate-html .dc-kebab { border: calc(1.1 * var(--u)) solid #C9CED8; border-radius: calc(3 * var(--u)); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--u)); padding: 0 calc(3 * var(--u)); }
.plate-html .dc-kebab i { display: block; height: calc(1.8 * var(--u)); background: #2E3549; border-radius: calc(1 * var(--u)); }
.plate-html .dc-fab { border-radius: 50%; background: #29314A; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(30, 38, 56, .3); display: flex; align-items: center; justify-content: center; }
.plate-html .dc-fab svg { width: 50%; height: 50%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .vp { position: absolute; inset: 0; }
.plate-html .vp-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .vp-screen { position: absolute; overflow: hidden; border-radius: calc(20 * var(--u)); background: #0B2239; }
.plate-html .vp-screen video { position: absolute; left: 0; top: 0; width: 100%; height: calc(549 * var(--u)); object-fit: cover; display: block; }
.plate-html .vp-track { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(8 * var(--u)); background: #878E8E; }
.plate-html .vp-fill { position: absolute; inset: 0; background: #0478CC; transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s linear; }
.plate-html .bd { position: absolute; inset: 0; font-family: 'Inter', sans-serif; }
.plate-html .bd > *, .plate-html .bd-card > *, .plate-html .bd-stat > *, .plate-html .bd-box > *, .plate-html .bd-fab > *, .plate-html .bd-notch > * { position: absolute; }
.plate-html .bd-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .bd-glass { background: #F4F6F9; }
.plate-html .bd-side { background: #2579CD; }
.plate-html .bd-foot { background: #1F6DBB; }
.plate-html .bd-hr { background: rgba(255, 255, 255, .16); }
.plate-html .bd-brand, .plate-html .bd-lab, .plate-html .bd-item, .plate-html .bd-ver, .plate-html .bd-crumb, .plate-html .bd-org,
.plate-html .bd-slab, .plate-html .bd-sval, .plate-html .bd-ssub, .plate-html .bd-box span, .plate-html .bd-name, .plate-html .bd-hull,
.plate-html .bd-st, .plate-html .bd-sub, .plate-html .bd-cap { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .bd-brand { color: #fff; font-size: calc(8.6 * var(--u)); font-weight: 800; letter-spacing: calc(0.1 * var(--u)); }
.plate-html .bd-lab { color: rgba(255, 255, 255, .62); font-size: calc(5.4 * var(--u)); font-weight: 700; letter-spacing: calc(0.55 * var(--u)); }
.plate-html .bd-item { color: #fff; font-size: calc(7.4 * var(--u)); font-weight: 600; }
.plate-html .bd-item.b { font-weight: 700; }
.plate-html .bd-on { background: rgba(255, 255, 255, .17); border-radius: calc(3 * var(--u)); }
.plate-html .bd-sico { fill: none; stroke: #fff; color: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.plate-html .bd-sico.f { stroke: none; }
.plate-html .bd-count { border-radius: 50%; background: #fff; color: #2579CD; font-size: calc(5.6 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .bd-av { border-radius: 50%; background: #fff; color: #2579CD; font-size: calc(5 * var(--u)); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.plate-html .bd-ver { color: rgba(255, 255, 255, .7); font-size: calc(5.6 * var(--u)); }
.plate-html .bd-top { background: #fff; border-bottom: calc(0.6 * var(--u)) solid #E7EBF1; box-sizing: border-box; }
.plate-html .bd-crumb { color: #5F6B7A; font-size: calc(7.3 * var(--u)); }
.plate-html .bd-crumb span { color: #A3ACB9; margin: 0 calc(1.5 * var(--u)); }
.plate-html .bd-crumb b { color: #1E2638; font-weight: 700; }
.plate-html .bd-org { color: #1E2638; font-size: calc(6.8 * var(--u)); font-weight: 700; }
.plate-html .bd-notch { background: #000; border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); }
.plate-html .bd-notch i { border-radius: 50%; background: #1B2230; }
.plate-html .bd-stat { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(3.5 * var(--u)); box-sizing: border-box; }
.plate-html .bd-slab { color: #56617A; font-size: calc(5.6 * var(--u)); font-weight: 700; letter-spacing: calc(0.3 * var(--u)); }
.plate-html .bd-sval { color: #1E2638; font-size: calc(10.5 * var(--u)); font-weight: 800; }
.plate-html .bd-sval.ok { color: #2E7D5B; }
.plate-html .bd-sval.warn { color: #C2410C; }
.plate-html .bd-ssub { color: #5F6B7A; font-size: calc(5.8 * var(--u)); }
.plate-html .bd-box { background: #fff; border: calc(0.6 * var(--u)) solid #DCE2EA; border-radius: calc(3 * var(--u)); box-sizing: border-box; overflow: hidden; }
.plate-html .bd-box span { font-size: calc(6.6 * var(--u)); color: #7B8494; }
.plate-html .bd-box span.dk { color: #1E2638; }
.plate-html .bd-box span.b { font-weight: 700; }
.plate-html .bd-act { background: #E6F0FB; }
.plate-html .bd-vr { background: #DCE2EA; }
.plate-html .bd-gl { fill: none; stroke: #7B8494; color: #7B8494; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .bd-gl.dk { stroke: #3B4456; color: #3B4456; }
.plate-html .bd-gl.bl { stroke: #2579CD; color: #2579CD; }
.plate-html .bd-gl.f { stroke: none; }
.plate-html .bd-card { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)); box-sizing: border-box; overflow: hidden; box-shadow: 0 calc(0.6 * var(--u)) calc(1.5 * var(--u)) rgba(30, 38, 56, .05); }
.plate-html .bd-pic { object-fit: cover; object-position: 50% 50%; }
.plate-html .bd-pill { background: #fff; border-radius: calc(2.5 * var(--u)); color: #1E2638; font-size: calc(5.6 * var(--u)); font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .15); }
.plate-html .bd-name { color: #1E2638; font-size: calc(8.3 * var(--u)); font-weight: 700; }
.plate-html .bd-hull { color: #1F78D1; font-size: calc(7 * var(--u)); font-weight: 700; letter-spacing: calc(0.35 * var(--u)); }
.plate-html .bd-dot { border-radius: 50%; background: #EF5A5A; }
.plate-html .bd-st { color: #1E2638; font-size: calc(6.8 * var(--u)); font-weight: 600; }
.plate-html .bd-mico { fill: none; stroke: none; color: #7B8494; }
.plate-html .bd-sub { color: #6B7688; font-size: calc(6.6 * var(--u)); }
.plate-html .bd-sub.dk { color: #1E2638; }
.plate-html .bd-cap { color: #56617A; font-size: calc(4.9 * var(--u)); font-weight: 700; letter-spacing: calc(0.25 * var(--u)); }
.plate-html .bd-rule { background: #E7EBF0; }
.plate-html .bd-fab { border-radius: 50%; background: #1F78D1; box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(30, 38, 56, .25); }
.plate-html .bd-fab.g { background: #C9D0DA; }
.plate-html .bd-fab svg { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plate-html .bd-fab.g svg { stroke: #2B3345; stroke-width: 2.8; }
.plate-html .ls { position: absolute; inset: 0; }
.plate-html .ls > *, .plate-html .ls-notch > * { position: absolute; }
.plate-html .ls-bezel { left: 0; top: 0; width: 100%; height: 100%; }
.plate-html .ls-glass { overflow: hidden; background: #F4F6F9; }
.plate-html .ls-glass img { display: block; width: 100%; height: 100%; }
.plate-html .ls-txt { transform: translateY(-50%); white-space: nowrap; line-height: 1; font-family: 'Inter', sans-serif; color: #1E2638; }
.plate-html .ls-notch { background: #000; border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u)); }
.plate-html .ls-notch i { border-radius: 50%; background: #1B2230; }
.plate-html .dl-bullet { border-radius: 50%; background: rgba(255, 255, 255, .8); }
.plate-html .dl-h, .plate-html .dl-sub, .plate-html .dl-th, .plate-html .dl-td, .plate-html .dl-ph { transform: translateY(-50%); white-space: nowrap; line-height: 1; }
.plate-html .dl-h { color: #1E2638; font-size: calc(11 * var(--u)); font-weight: 800; }
.plate-html .dl-sub { color: #5F6B7A; font-size: calc(6.4 * var(--u)); }
.plate-html .dl-table { background: #fff; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)); box-sizing: border-box; }
.plate-html .dl-thead { background: #F8FAFC; border: calc(0.6 * var(--u)) solid #E3E8EE; border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0; box-sizing: border-box; }
.plate-html .dl-th { color: #56617A; font-size: calc(5.3 * var(--u)); font-weight: 700; letter-spacing: calc(0.3 * var(--u)); }
.plate-html .dl-td { color: #1E2638; font-size: calc(6.8 * var(--u)); display: flex; align-items: center; gap: calc(2.5 * var(--u)); }
.plate-html .dl-td.b { font-weight: 700; }
.plate-html .dl-td.dl-num { color: #3B4456; }   /* not ".n" — app.css owns that (a blue badge) */
.plate-html .dl-rule { background: #EEF1F5; }
.plate-html .dl-pill { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); padding: calc(1.6 * var(--u)) calc(3.5 * var(--u)); border-radius: calc(2.5 * var(--u)); font-size: calc(5.6 * var(--u)); font-weight: 700; border: calc(0.6 * var(--u)) solid; }
.plate-html .dl-pill i { width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: currentColor; }
.plate-html .dl-pill.bl { color: #1F6FC5; background: #E8F1FC; border-color: #BFD8F5; }
.plate-html .dl-pill.gr { color: #56617A; background: #F1F3F6; border-color: #D7DCE3; }
.plate-html .dl-pill.am { color: #B45309; background: #FEF3E2; border-color: #F7D6A8; }
.plate-html .dl-pill.ok { color: #1F7A52; background: #E4F6EE; border-color: #B7E4CF; }
.plate-html .dl-ph { color: #FA884C; border: calc(0.6 * var(--u)) solid #FA884C; border-radius: calc(2.5 * var(--u)); padding: calc(1.6 * var(--u)) calc(3.5 * var(--u)); font-size: calc(5 * var(--u)); font-weight: 700; letter-spacing: calc(0.5 * var(--u)); opacity: .8; }
.plate-html .ls-txt.side { color: #fff; font-weight: 700; }
.plate-html .ls-txt.av { color: #2476C8; font-weight: 800; transform: translate(-50%, -50%); }

/* W-2's tile sentences: plain centred text, not full-justified (John, 2026-09-26: "make normal"). Overrides the shared
   demo.css justify trial for /mdp/ only; /ibex/ keeps its own. */
.cd-stat span { text-align: center; text-align-last: auto; hyphens: manual; text-wrap: balance; }