/* ============================================================
   premium-decor.css — Decor Explorer, single-screen scene (wave 4)
   Loaded LAST — overrides strama.css / premium-pages / premium-motion
   for the decor block only. All new classes prefixed dx-.
   The whole module is ONE scene container of height --dx-h; every
   piece of UI (top bar, glass card, CTA, tile shelf, nav) is an
   absolutely-positioned overlay on the scene, so the module height
   never grows past --dx-h and the browser fits in one viewport.
   Data + JS hooks live in blocks/decor_explorer.html + js/decor.js.
   ============================================================ */

:root{
  --dx-blue:#0876bd;
  --dx-navy:#11375f;
  --dx-navy-deep:#0b2540;
  --dx-line:#dcd8cf;
  --dx-stone:#e9e4da;
  --dx-muted:#5b6b74;
  --dx-ease:cubic-bezier(.2,.7,.2,1);
  --dx-room-t:640ms;   /* scene crossfade (500-900ms contract) */
  --dx-swap-t:520ms;   /* preview + meta swap */
}

/* ---- section reset: the module owns exactly one viewport-height band ---- */
.dx-section{background:#fff;padding:0;margin:0}

/* ---- scene container = the whole module ------------------------------- */
.dx.dx-scene-root{
  --dx-h:clamp(430px,100vh,1500px);
  --dx-inset:clamp(14px,2.2vw,34px);
  --dx-card-w:clamp(230px,24vw,340px);
  --dx-swatch:clamp(72px,6vw,96px);
  --dx-tile-h:clamp(48px,4.2vw,74px);
  --dx-shelf-h:clamp(104px,12vh,148px);
  --dx-glass:rgba(255,255,255,.82);
  --dx-glass-brd:rgba(255,255,255,.55);
  --dx-blur:14px;
  position:relative;width:100%;max-width:none;margin:0;
  height:var(--dx-h);min-height:var(--dx-h);
  overflow:hidden;background:var(--dx-navy-deep);isolation:isolate}

/* ---- Z0: scene (double-buffered room render) -------------------------- */
.dx-scene{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:linear-gradient(135deg,#e9e4da 0%,#ded8cd 100%)}
/* layers slightly oversized so the motion.js parallax (±28px on
   .dx-scene > img) never bares an edge */
.dx-scene > img.dx-room-layer{position:absolute;left:0;right:0;top:-34px;
  width:100%;height:calc(100% + 68px);object-fit:cover;
  opacity:0;transition:opacity var(--dx-room-t) var(--dx-ease);will-change:opacity}
.dx-scene > img.dx-room-layer.is-front{opacity:1}

/* ---- Z1: two-sided scrim (contrast guarantee, not photo-dependent) ---- */
.dx-scene-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,27,35,.42) 0%,rgba(11,27,35,0) 22%),
    linear-gradient(0deg,rgba(11,27,35,.55) 0%,rgba(11,27,35,.12) 26%,rgba(11,27,35,0) 46%)}

/* ---- Z2: top bar ------------------------------------------------------ */
.dx-topbar{position:absolute;z-index:5;left:var(--dx-inset);right:var(--dx-inset);top:calc(108px + 14px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(16px,2vw,34px);
  pointer-events:none}
.dx-topbar > *{pointer-events:auto}
.dx-topbar-head{min-width:0;max-width:58%}
.dx-rule{display:block;width:34px;height:2px;background:var(--dx-blue);margin-bottom:12px}
.dx-eyebrow{margin:0 0 6px;color:#cfe4f5;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;text-shadow:0 1px 3px rgba(6,18,28,.5)}
.dx-title{margin:0;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:clamp(22px,2vw,34px);
  font-weight:300;letter-spacing:-.04em;line-height:1.05;text-shadow:0 1px 4px rgba(6,18,28,.5)}

/* filters (glass pills, one row, horizontal scroll when tight) */
.dx-filters{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
  max-width:min(58%,560px);scrollbar-width:none;scroll-snap-type:x proximity}
.dx-filters::-webkit-scrollbar{display:none}
.dx-filters button{flex:0 0 auto;min-height:36px;border:1px solid var(--dx-glass-brd);
  background:rgba(255,255,255,.85);border-radius:999px;padding:9px 15px;
  font:800 10.5px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dx-navy);cursor:pointer;white-space:nowrap;backdrop-filter:blur(8px);
  transition:background .28s var(--dx-ease),color .28s var(--dx-ease),border-color .28s var(--dx-ease)}
.dx-filters button:hover{background:#fff;border-color:var(--dx-navy);color:var(--dx-navy)}
.dx-filters button.is-active{background:var(--dx-navy);border-color:var(--dx-navy);color:#fff;
  box-shadow:0 8px 22px rgba(11,27,35,.28)}

/* ---- Z6: optional scene caption --------------------------------------- */
.dx-scene-label{display:none;position:absolute;z-index:4;right:var(--dx-inset);
  bottom:calc(var(--dx-shelf-h) + var(--dx-inset));
  background:rgba(255,255,255,.9);color:var(--dx-navy);
  font:800 9.5px/1 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 13px;backdrop-filter:blur(4px);pointer-events:none}

/* ---- Z3: glass decor card --------------------------------------------- */
.dx-card{position:absolute;z-index:6;left:var(--dx-inset);
  bottom:calc(var(--dx-shelf-h) + var(--dx-inset));
  width:var(--dx-card-w);max-width:calc(100% - var(--dx-inset)*2);
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(16px,1.4vw,22px);
  background:var(--dx-glass);backdrop-filter:blur(var(--dx-blur));
  border:1px solid var(--dx-glass-brd);
  box-shadow:0 24px 70px rgba(11,27,35,.28),inset 0 1px 0 rgba(255,255,255,.6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dx-card{background:rgba(255,255,255,.96)}
  .dx-filters button{background:rgba(255,255,255,.97)}
  .dx-scene-label{background:#fff}
}

.dx-card-top{display:flex;gap:14px;align-items:flex-start;min-width:0}
.dx-preview{position:relative;flex:0 0 var(--dx-swatch);width:var(--dx-swatch);height:var(--dx-swatch);
  overflow:hidden;background:linear-gradient(135deg,#f0ede6 0%,#e7e2d8 100%)}
.dx-preview-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--dx-swap-t) var(--dx-ease);will-change:opacity}
.dx-preview-layer.is-front{opacity:1}
.dx-preview::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(17,55,95,.12)}

.dx-meta{min-width:0;flex:1 1 auto}
.dx-category{margin:0 0 6px;color:var(--dx-blue);font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase}
.dx-name{margin:0 0 8px;color:var(--dx-navy);font-family:Roboto,Arial,sans-serif;
  font-size:clamp(19px,1.7vw,26px);font-weight:400;letter-spacing:-.03em;line-height:1.08}
.dx-code{display:inline-block;margin:0;padding:6px 10px;border-radius:999px;
  background:var(--dx-stone);color:var(--dx-muted);
  font:800 10px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.dx-code[hidden]{display:none}
.dx-disclaimer{margin:0;color:var(--dx-muted);font-size:11.5px;line-height:1.5}

/* animated meta swap on decor change */
@keyframes dx-meta-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.dx-meta.is-swapping{animation:dx-meta-in var(--dx-swap-t) var(--dx-ease)}

/* ---- CTA (text >=1180 -> short 900-1180 -> text+icons 640-900 -> icons <=640) ---- */
.dx-actions{display:grid;gap:9px}
.dx-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:11px 15px;border:1px solid transparent;cursor:pointer;
  font:800 12.5px/1.1 Arial,sans-serif;letter-spacing:.02em;text-align:center;
  transition:background .28s var(--dx-ease),color .28s var(--dx-ease),border-color .28s var(--dx-ease),transform .28s var(--dx-ease)}
.dx-cta[hidden]{display:none}
.dx-cta--primary{background:var(--dx-blue);border-color:var(--dx-blue);color:#fff}
.dx-cta--primary:hover{background:#0668a6;border-color:#0668a6}
.dx-cta--ghost{background:rgba(255,255,255,.35);border-color:var(--dx-navy);color:var(--dx-navy)}
.dx-cta--ghost:hover{background:var(--dx-navy);color:#fff}
/* "Zobacz model 3D" — a real button (navy outline, cube icon), consistent with the pair above */
.dx-cta--link{min-height:44px;padding:11px 15px;background:rgba(17,55,95,.06);
  border-color:rgba(17,55,95,.45);color:var(--dx-navy);justify-content:center;
  font-weight:800;font-size:12.5px}
.dx-cta--link:hover{background:var(--dx-navy);border-color:var(--dx-navy);color:#fff}
.dx-cta--link .dx-cta-glyph{display:inline-block;width:18px;height:18px}
.dx-cta-glyph{display:none;width:20px;height:20px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dx-cta-full{display:inline}
.dx-cta-short{display:none}

/* ---- Z4/Z5: bottom shelf --------------------------------------------- */
.dx-shelf{position:absolute;z-index:6;left:0;right:0;bottom:0;height:var(--dx-shelf-h);
  display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);
  padding:0 var(--dx-inset);
  background:linear-gradient(0deg,rgba(11,27,35,.62) 0%,rgba(11,27,35,.22) 62%,rgba(11,27,35,0) 100%)}
/* Progress line floats above the shelf, over the photo — sense of space */
.dx-progress{position:absolute;left:var(--dx-inset);right:var(--dx-inset);bottom:calc(100% + 14px);height:3px;
  background:rgba(255,255,255,.18);overflow:hidden}
.dx-progress-bar{position:absolute;left:0;top:0;height:100%;width:8%;
  background:linear-gradient(90deg,var(--dx-blue),#5cb3ea);transition:width .5s var(--dx-ease)}

/* Delicate chevron arrows flanking the rail: prev on the left, next on the right */
.dx-nav-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  background:transparent;color:rgba(255,255,255,.85);padding:0;
  cursor:pointer;transition:background .28s var(--dx-ease),border-color .28s var(--dx-ease),color .28s var(--dx-ease),transform .28s var(--dx-ease)}
.dx-nav-btn svg{width:15px;height:15px;display:block}
.dx-nav-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.7);color:#fff;transform:translateY(-1px)}
.dx-position{position:absolute;right:var(--dx-inset);bottom:calc(100% + 26px);color:#fff;
  font:800 11px/1 Arial,sans-serif;letter-spacing:.14em;text-shadow:0 1px 2px rgba(0,0,0,.4)}

/* Page scroll settles with the explorer filling the screen below the header (all widths) */
html{scroll-snap-type:y proximity}
.decor-section{scroll-snap-align:start;scroll-margin-top:0}


/* rail: ONE horizontal scroll-snap row at every width */
.dx-rail{flex:1 1 auto;min-width:0;display:flex;gap:clamp(8px,.9vw,14px);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-padding-inline:var(--dx-inset);padding:4px 2px;
  touch-action:pan-x;outline:none}
.dx-rail::-webkit-scrollbar{display:none}

.dx-tile{flex:0 0 auto;width:clamp(100px,10vw,144px);position:relative;
  display:flex;flex-direction:column;gap:5px;border:0;background:transparent;
  padding:0;text-align:left;cursor:pointer;scroll-snap-align:center;
  transition:transform .45s var(--dx-ease)}
.dx-tile[hidden]{display:none}
.dx-tile:hover{transform:translateY(-4px)}
.dx-tile-image{position:relative;display:block;overflow:hidden;height:var(--dx-tile-h);
  background:#2a3b46;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.dx-tile-image img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--dx-ease)}
.dx-tile:hover .dx-tile-image img{transform:scale(1.06)}
.dx-tile.is-active .dx-tile-image{box-shadow:0 0 0 2px var(--dx-blue),0 6px 18px rgba(8,118,189,.4)}
.dx-tile-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;
  background:var(--dx-blue);color:#fff;display:grid;place-items:center;font-size:11px;line-height:1;
  opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s var(--dx-ease);
  box-shadow:0 6px 16px rgba(8,118,189,.4)}
.dx-tile.is-active .dx-tile-check{opacity:1;transform:scale(1)}
.dx-tile-copy{display:block;min-width:0}
.dx-tile-copy strong{display:block;color:#fff;font:500 12px/1.15 Arial,sans-serif;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 2px rgba(0,0,0,.55)}
.dx-tile-copy small{display:block;margin-top:2px;color:rgba(255,255,255,.82);
  font:700 8.5px/1 Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.55)}

/* ---- focus-visible (blue ring + white sub-halo for dark scenes) ------- */
.dx-cta:focus-visible,.dx-filters button:focus-visible,.dx-nav-btn:focus-visible,
.dx-tile:focus-visible,.dx-rail:focus-visible{
  outline:2px solid var(--dx-blue);outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,255,255,.55)}

/* drag affordance */
.dx-rail.is-dragging{scroll-snap-type:none;cursor:grabbing}
.dx-rail.is-dragging .dx-tile{cursor:grabbing}
@media(pointer:fine){.dx-rail{cursor:grab}}

/* ============================================================
   RESPONSIVE — height budget honoured at every breakpoint.
   Overlays never enter the flow, so module height stays = --dx-h.
   ============================================================ */

/* 900-1180: CTA -> compact (short text), still full text at >=1180 */
@media(max-width:1180px){
  .dx-actions{grid-template-columns:repeat(3,1fr);gap:8px}
  .dx-cta{padding:11px 8px;font-size:11.5px}
  .dx-cta--link{justify-content:center;padding:11px 8px}
  .dx-cta-full{display:none}
  .dx-cta-short{display:inline}
  .dx-title{font-size:clamp(22px,2.4vw,30px)}
}

/* 640-900: card becomes a full-width bottom strip; CTA = text + icons */
@media(max-width:900px){
  .dx.dx-scene-root{--dx-h:clamp(460px,100vh,1000px)}
  @supports(height:100dvh){.dx.dx-scene-root{--dx-h:clamp(460px,100dvh,1000px)}}
  .dx-scene-label{display:none}
  .dx-topbar{flex-direction:column;gap:12px}
  .dx-topbar-head{max-width:100%}
  .dx-filters{max-width:100%}
  .dx-card{right:var(--dx-inset);width:auto;max-width:none}
  .dx-actions{grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
  .dx-cta{min-height:46px}
  .dx-cta--primary{justify-content:center}
  .dx-cta--primary .dx-cta-glyph{display:none}
  .dx-cta--primary .dx-cta-short{display:inline}
  .dx-cta--ghost,.dx-cta--link{width:46px;min-width:46px;padding:0;justify-content:center}
  .dx-cta--ghost .dx-cta-full,.dx-cta--ghost .dx-cta-short,
  .dx-cta--link .dx-cta-full,.dx-cta--link .dx-cta-short{display:none}
  .dx-cta--ghost .dx-cta-glyph,.dx-cta--link .dx-cta-glyph{display:inline-block}
  .dx-cta--link{background:rgba(255,255,255,.35);border-color:var(--dx-navy);color:var(--dx-navy)}
  .dx-cta--link:hover{background:var(--dx-navy);color:#fff}
}

/* <=640: phone — icon-only CTA (48px), compact composition */
@media(max-width:640px){
  .dx.dx-scene-root{--dx-h:clamp(460px,100vh,940px);
    --dx-tile-h:clamp(56px,15vw,72px);--dx-shelf-h:clamp(96px,20vh,124px)}
  @supports(height:100dvh){.dx.dx-scene-root{--dx-h:clamp(460px,100dvh,940px)}}
  .dx-title{font-size:clamp(18px,5vw,22px)}
  .dx-eyebrow{font-size:9px}
  /* filter tags: smaller, wrap into tidy rows instead of clipping */
  .dx-filters{max-width:100%;flex-wrap:wrap;overflow:visible;gap:6px}
  .dx-filters button{min-height:29px;padding:7px 11px;font-size:9px;letter-spacing:.05em}
  /* delicate compact card: narrower, lighter glass, tighter */
  .dx-card{left:14px;right:auto;width:min(76vw,290px);max-width:none;
    gap:9px;padding:12px;background:rgba(255,255,255,.74);
    border-color:rgba(255,255,255,.4);
    box-shadow:0 14px 40px rgba(11,27,35,.22),inset 0 1px 0 rgba(255,255,255,.5)}
  .dx.dx-scene-root{--dx-swatch:52px}
  .dx-card-top{gap:11px;align-items:center}
  .dx-category{margin-bottom:3px;font-size:9px}
  .dx-name{font-size:16px;margin-bottom:5px}
  .dx-code{padding:4px 8px;font-size:8.5px}
  .dx-disclaimer{display:none}
  .dx-actions{display:flex;gap:8px}
  .dx-cta{width:40px;min-width:40px;height:40px;padding:0;justify-content:center;font-size:0}
  .dx-cta--primary .dx-cta-short,.dx-cta--ghost .dx-cta-short,.dx-cta--link .dx-cta-short,
  .dx-cta--primary .dx-cta-full,.dx-cta--ghost .dx-cta-full,.dx-cta--link .dx-cta-full{display:none}
  .dx-cta-glyph,.dx-cta--primary .dx-cta-glyph,.dx-cta--ghost .dx-cta-glyph,.dx-cta--link .dx-cta-glyph{display:inline-block;width:18px;height:18px}
  .dx-cta--link{background:rgba(255,255,255,.35);border-color:var(--dx-navy);color:var(--dx-navy)}
  .dx-nav-btn{width:36px;height:36px}
  .dx-nav-btn svg{width:14px;height:14px}
}

/* <=430: small phones — tighter still */
@media(max-width:430px){
  .dx.dx-scene-root{--dx-swatch:48px;--dx-tile-h:clamp(52px,15vw,64px);
    --dx-shelf-h:clamp(84px,17vh,100px)}
  .dx-title{font-size:clamp(17px,5.4vw,19px)}
  .dx-cta{width:44px;min-width:44px;height:44px}
  .dx-filters button{min-height:32px;padding:7px 12px}
  .dx-tile{width:clamp(84px,26vw,110px)}
  .dx-tile-copy{display:none}
}

/* ============================================================
   REDUCED MOTION — everything instant
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .dx-scene > img.dx-room-layer,.dx-preview-layer{transition:none!important}
  .dx-meta.is-swapping{animation:none!important}
  .dx-tile,.dx-tile-image img,.dx-tile-check,.dx-nav-btn,.dx-filters button,
  .dx-cta,.dx-progress-bar,.dx-tile:hover,.dx-tile:hover .dx-tile-image img{
    transition:none!important;transform:none!important}
}

/* 641-720: utility bar is hidden, header is 66px — fill the remaining height exactly */
@media(min-width:641px) and (max-width:720px){
  .dx.dx-scene-root{--dx-h:clamp(460px,100vh,1000px)}
  @supports(height:100dvh){.dx.dx-scene-root{--dx-h:clamp(460px,100dvh,1000px)}}
}

/* ============================================================
   EDGE CASES (wave 7) — blocks with no categories / few decors
   ============================================================ */
/* .dx-filters keeps display:flex from its own class, so the plain [hidden]
   attribute can't win — hide it explicitly when JS finds <2 categories. */
.dx-filters[hidden]{display:none}

/* When every tile fits without scrolling, the rail is not a scroller:
   JS adds .dx-no-scroll on the scene root. Hide the chevrons, counter and
   progress line, and centre the short row so it reads as intentional. */
.dx-no-scroll .dx-progress,
.dx-no-scroll .dx-position,
.dx-no-scroll .dx-nav-btn{display:none}
.dx-no-scroll .dx-shelf{justify-content:center}
.dx-no-scroll .dx-rail{flex:0 1 auto;max-width:100%}

/* ============================================================
   3D MODEL VIEWER MODAL + TOAST (wave 13)
   "Zobacz model 3D" opens a full-screen overlay with <model-viewer>
   (orbit/zoom). Downloads stay in the architect zone; right-click in
   the modal raises the dx-toast. Markup: blocks/decor_explorer.html;
   behaviour: js/decor.js.
   ============================================================ */
.dx-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,44px)}
.dx-modal[hidden]{display:none}

/* navy-deep, blurred backdrop */
.dx-modal-backdrop{position:absolute;inset:0;cursor:pointer;
  background:rgba(8,22,38,.66);
  -webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%);
  opacity:0;transition:opacity .34s var(--dx-ease)}
.dx-modal.is-open .dx-modal-backdrop{opacity:1}

/* light-scene dialog */
.dx-modal-dialog{position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(1040px,100%);height:min(84vh,820px);max-height:100%;
  background:linear-gradient(180deg,#fbfaf7 0%,#f1ede5 100%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 44px 120px rgba(6,18,28,.5);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .42s var(--dx-ease),transform .42s var(--dx-ease)}
.dx-modal.is-open .dx-modal-dialog{opacity:1;transform:none}

.dx-modal-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(13px,1.6vw,20px) clamp(16px,2vw,28px);
  border-bottom:1px solid var(--dx-line);background:rgba(255,255,255,.6)}
.dx-modal-titles{min-width:0}
.dx-modal-eyebrow{margin:0 0 4px;color:var(--dx-blue);font:800 10px/1 Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase}
.dx-modal-title{margin:0;color:var(--dx-navy);font-family:Roboto,Arial,sans-serif;
  font-size:clamp(19px,2vw,28px);font-weight:300;letter-spacing:-.03em;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-modal-close{flex:0 0 auto;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--dx-line);background:#fff;color:var(--dx-navy);padding:0;cursor:pointer;
  transition:background .28s var(--dx-ease),color .28s var(--dx-ease),border-color .28s var(--dx-ease)}
.dx-modal-close svg{width:20px;height:20px;display:block}
.dx-modal-close:hover{background:var(--dx-navy);color:#fff;border-color:var(--dx-navy)}

.dx-modal-stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 16%,#ffffff 0%,#eee9df 68%,#e3ddd1 100%)}
.dx-modal-viewer{position:absolute;inset:0;width:100%;height:100%;
  background-color:transparent;--poster-color:transparent;outline:none}

.dx-modal-loader{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;pointer-events:none;
  color:var(--dx-muted);font:700 10.5px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.dx-modal-loader[hidden]{display:none}
.dx-modal-spinner{width:38px;height:38px;border-radius:999px;
  border:2px solid rgba(17,55,95,.16);border-top-color:var(--dx-blue);
  animation:dx-spin .8s linear infinite}
@keyframes dx-spin{to{transform:rotate(360deg)}}

.dx-modal-fallback{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
  background:rgba(245,243,238,.94)}
.dx-modal-fallback[hidden]{display:none}
.dx-modal-fallback p{margin:0;color:var(--dx-navy);font-size:14px;line-height:1.5;max-width:36ch}
.dx-modal-fallback-link{color:var(--dx-blue);font-weight:800;text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.dx-modal-fallback-link:hover{color:var(--dx-navy)}

.dx-modal-hint{flex:0 0 auto;margin:0;padding:12px clamp(16px,2vw,28px);
  border-top:1px solid var(--dx-line);background:rgba(255,255,255,.55);
  color:var(--dx-muted);font-size:11.5px;line-height:1.4}

/* ---- toast (right-click intercept) ---- */
.dx-toast{position:absolute;z-index:5;left:50%;bottom:clamp(18px,4vh,42px);
  transform:translate(-50%,16px);display:flex;align-items:center;gap:14px;
  max-width:min(92vw,540px);padding:14px 16px;
  background:linear-gradient(150deg,#0d3155,var(--dx-navy-deep));color:#fff;
  box-shadow:0 24px 60px rgba(6,18,28,.5);opacity:0;
  transition:opacity .3s var(--dx-ease),transform .3s var(--dx-ease)}
.dx-toast[hidden]{display:none}
.dx-toast.is-open{opacity:1;transform:translate(-50%,0)}
.dx-toast-text{margin:0;flex:1 1 auto;font-size:13px;line-height:1.4}
.dx-toast-link{flex:0 0 auto;color:#8fd0f5;font-weight:800;text-decoration:none;white-space:nowrap}
.dx-toast-link:hover{color:#fff}
.dx-toast-close{flex:0 0 auto;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;padding:0;cursor:pointer;
  transition:background .28s var(--dx-ease)}
.dx-toast-close svg{width:16px;height:16px;display:block}
.dx-toast-close:hover{background:rgba(255,255,255,.14)}

.dx-modal-close:focus-visible,.dx-modal-fallback-link:focus-visible,
.dx-toast-link:focus-visible,.dx-toast-close:focus-visible,
.dx-modal-viewer:focus-visible{outline:2px solid var(--dx-blue);outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,255,255,.55)}

@media(max-width:640px){
  .dx-modal{padding:0}
  .dx-modal-dialog{width:100%;height:100%;max-height:100%;border:0}
  .dx-toast{left:12px;right:12px;transform:translateY(16px);max-width:none;flex-wrap:wrap;bottom:12px}
  .dx-toast.is-open{transform:translateY(0)}
}

@media(prefers-reduced-motion:reduce){
  .dx-modal-backdrop,.dx-modal-dialog,.dx-toast{transition:none!important}
  .dx-modal-dialog{transform:none!important}
  .dx-modal-spinner{animation-duration:1.4s}
}

/* Viewer hint: show the mouse instructions on hover-capable devices,
   the touch instructions on touch devices — never both. */
.dx-hint-mouse,.dx-hint-touch{display:none;align-items:center;gap:8px}
.dx-hint-ico{width:16px;height:16px;flex:0 0 auto;opacity:.65}
@media(hover:hover) and (pointer:fine){.dx-hint-mouse{display:inline-flex}}
@media(hover:none),(pointer:coarse){.dx-hint-touch{display:inline-flex}}
.dx-hint-gate{opacity:.75}
.dx-modal-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}

/* Controls hint lives in the modal header (the bottom bar keeps the architect-zone note) */
.dx-modal-controls{margin:0 18px;flex:1 1 auto;display:flex;justify-content:center;
  color:var(--dx-muted);font-size:12px;line-height:1.4}
@media(max-width:720px){.dx-modal-controls{margin:0 10px;font-size:11px}}

/* ============================================================
   Immersive chrome (wave 16): while the explorer owns the viewport,
   the sticky utility bar + header turn into dark glass floating over
   the scene, so the module truly fills the whole page.
   decor.js toggles body.dx-immersive. This sheet loads last, so the
   overrides below win over premium-global's white header.
   ============================================================ */
@supports(height:100dvh){.dx.dx-scene-root{--dx-h:clamp(430px,100dvh,1500px)}}
body.dx-immersive .utility-bar{background:rgba(9,22,32,.42);backdrop-filter:blur(8px)}
body.dx-immersive .site-header{background:rgba(9,22,32,.34);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.14);box-shadow:none;
  transition:background .35s var(--dx-ease),border-color .35s var(--dx-ease)}
body.dx-immersive .site-header .brand img{filter:brightness(0) invert(1)}
body.dx-immersive .main-nav>.nav-entry>a{color:#fff}
body.dx-immersive .main-nav>.nav-entry>a:after{background:#8fc8ed}
body.dx-immersive .site-header .search-link{color:#fff}
body.dx-immersive .site-header .mega-chevron{color:#cfe4f5}
.utility-bar,.site-header{transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
@media(max-width:720px){
  .dx-topbar{top:calc(66px + 12px)}
}

/* The generic .p-stream .section breathing-room (92px) must never pad the
   explorer — the module owns the full viewport edge-to-edge. */
.p-stream .section.dx-section,.stream-content .section.dx-section{padding:0;margin:0}

/* Auto-hidden chrome slides away; any pointer movement brings it back */
body.dx-immersive .utility-bar,body.dx-immersive .site-header{
  transition:background .35s var(--dx-ease),border-color .35s var(--dx-ease),
    box-shadow .35s var(--dx-ease),transform .45s var(--dx-ease),opacity .4s var(--dx-ease)}
body.dx-immersive.dx-chrome-hidden .utility-bar,
body.dx-immersive.dx-chrome-hidden .site-header{
  transform:translateY(-110%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  body.dx-immersive.dx-chrome-hidden .utility-bar,
  body.dx-immersive.dx-chrome-hidden .site-header{transform:none;opacity:1;pointer-events:auto}
}