/* JMH1040: shared website navigation around the accepted independent 3D concept. */
:root { --site-header-height: 88px; }
/* Keep the concept studio's accepted light material palette independent of menu theme. */
body.visualiser-page {
  --ink: #203d31;
  --muted: #657369;
  --line: #d3dbcf;
  --paper: #f5f5ed;
  --soft: #e9eee3;
  color-scheme: light;
  background: var(--paper);
  color: var(--ink);
}
.visualiser-page .product-header,
.visualiser-page .product-menu-dialog {
  font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
}
.visualiser-page .product-quicknav a { text-decoration: none; font-weight: 600; }
.visualiser-page .product-quicknav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.visualiser-page .visualiser-context { gap: 16px; padding-block: 20px; }
.visualiser-page .visualiser-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
  text-underline-offset: 4px;
}
.visualiser-page .visualiser-back:hover { text-decoration: underline; }
.visualiser-page .visualiser-skip {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 10px 16px;
  background: #fffef8;
  color: #203d31;
  font: 600 14px/1.5 system-ui, sans-serif;
}
.visualiser-page .visualiser-skip:focus { top: 12px; }
html[data-theme=dark] .visualiser-page .product-header,
html[data-theme=dark] .visualiser-page .product-menu-dialog { color-scheme: dark; }
/* Shared dark-menu rules must not recolour the independent model controls. */
html[data-theme] .visualiser-page main .select-field select {
  background: #f9fbf2;
  color: #203d31;
  border-color: #bfcdb8;
}
html[data-theme] .visualiser-page main input[type=range],
html[data-theme] .visualiser-page main input[type=checkbox] {
  color-scheme: light;
  background: transparent;
  color: #203d31;
}
@media (min-width: 1050px) {
  .visualiser-page .viewer-card { top: calc(var(--site-header-height) + 20px); }
}
@media (max-width: 600px) {
  :root { --site-header-height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .visualiser-page .visualiser-skip,
  .visualiser-page .visualiser-back { transition: none; }
}