/* XPRODUCT skin for the existing engineering tool.
   Scope includes body-level popovers and the lazily injected spec drawer.
   Stage/canvas sizing, pointer controls, hidden states and semantic status
   colours remain owned by the original application. */
body.xproduct-project.xproduct-details {
  --bg: var(--xp-bg, #0a0a0a);
  --surface: var(--xp-surface, #111111);
  --raised: #181818;
  --well: #0e0e0e;
  --ink: var(--xp-ink, #f8f5f2);
  --ink-2: var(--xp-muted, #949494);
  --ink-3: #858585;
  --rule: var(--xp-rule, #303030);
  --rule-strong: #505050;
  --track: #3a3a3a;
  --accent: var(--xp-ink, #f8f5f2);
  --accent-hover: #ffffff;
  --accent-ink: var(--xp-bg, #0a0a0a);
  --accent-soft: #252525;
  --font-ui: var(--xp-font, "PPSupplyMono", "IBM Plex Mono", monospace);
  --font-num: var(--xp-font, "PPSupplyMono", "IBM Plex Mono", monospace);
  --shadow-sm: none;
  --shadow-md: 0 12px 36px rgb(0 0 0 / .45);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--xp-font, "PPSupplyMono", "IBM Plex Mono", monospace);
  font-variation-settings: normal;
}

body.xproduct-details .masthead {
  gap: 20px;
  align-items: center;
  border-color: var(--rule);
  padding-inline: 20px;
}

body.xproduct-details .masthead .xproduct-home-link {
  flex: 0 0 auto;
  min-width: 0;
}

body.xproduct-details .masthead .xproduct-back-link {
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 11px;
}

body.xproduct-details .masthead .tab {
  min-height: 40px;
  padding-inline: 12px;
  font-size: 12px;
  letter-spacing: .02em;
}

body.xproduct-details :is(.toolbar, .strip, .panel, .dock) {
  border-color: var(--rule);
}

body.xproduct-details .dock {
  border-color: var(--rule-strong);
}

body.xproduct-details :is(.btn, .icon-btn, .seg, .seg button, .readout,
  .strip-sum, .nav-controls, .dock .tab, .soon, .toast) {
  border-radius: 0;
}

body.xproduct-details :is(.btn, .seg button, .tab, .icon-btn) {
  font-family: var(--font-ui);
  font-variation-settings: normal;
}

body.xproduct-details .btn.quiet {
  border-color: var(--rule);
}

body.xproduct-details .btn.quiet:hover {
  border-color: var(--ink-2);
}

body.xproduct-details .seg {
  border: 1px solid var(--rule);
  padding: 2px;
  gap: 2px;
}

body.xproduct-details .seg button[aria-checked="true"],
body.xproduct-details .seg button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

body.xproduct-details .panel-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

body.xproduct-details .panel-head h2 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .035em;
  font-variation-settings: normal;
}

body.xproduct-details :is(.group h3, .group h4) {
  font-weight: 400;
  font-variation-settings: normal;
}

body.xproduct-details .group h3 {
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.xproduct-details :is(.hint, .panel-sub, ol.legend span) {
  color: var(--ink-2);
  line-height: 1.6;
}

body.xproduct-details .group + .group {
  border-top: 1px solid var(--rule);
}

body.xproduct-details :is(.num, .v, .range output, .spec-row dd,
  .sd-num, .sd-cnt, .sd-code, .sd-file, .sd-price) {
  font-stretch: normal;
  font-variation-settings: normal;
}

body.xproduct-details :is(ol.legend li, details.more > summary,
  details.sub > summary) {
  border-radius: 0;
}

body.xproduct-details .seo-project-link {
  color: var(--ink-2);
  font-family: var(--font-ui);
}

/* These popovers live directly under body, outside #app. */
body.xproduct-details :is(.menu, .strip-pop) {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
}

body.xproduct-details .menu button {
  font-family: var(--font-ui);
  border-radius: 0;
}

/* #specdrawer-css is inserted after this stylesheet. The body scope makes
   these visual overrides more specific than its original component rules. */
body.xproduct-details .sd-panel {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-variation-settings: normal;
  border-left: 1px solid var(--rule);
  box-shadow: none;
}

body.xproduct-details :is(.sd-title, .sd-h3, .sd-h4) {
  font-family: var(--font-ui);
  font-weight: 400;
  font-variation-settings: normal;
}

body.xproduct-details :is(.sd-title, .sd-h3) {
  font-size: 18px;
  line-height: 1.4;
}

body.xproduct-details :is(.sd-close, .sd-btn, .sd-empty, .sd-item,
  .sd-code, .sd-file, .sd-shop, .sd-chip, .sd-back, .sd-lb) {
  border-radius: 0;
}

body.xproduct-details .sd-tab[aria-current="true"]::after {
  height: 1px;
  border-radius: 0;
}

body.xproduct-details .sd-file {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.xproduct-details .sd-lb {
  font-family: var(--font-ui);
  border: 1px solid var(--rule);
}

@media (max-width: 1100px) {
  body.xproduct-details .masthead {
    gap: 12px;
    padding-inline: 12px;
  }
  body.xproduct-details .masthead .tab {
    padding-inline: 9px;
    font-size: 11px;
  }
}

/* Portrait phone: restore a compact header above the existing three areas.
   The original stage, scrolling panel and bottom dock keep their roles. */
@media (orientation: portrait) and (max-width: 767px) {
  body.xproduct-details .app,
  body.xproduct-details .app.panel-closed {
    grid-template-rows: auto minmax(240px, 46dvh) minmax(0, 1fr) auto;
    grid-template-areas: "head" "stage" "panel" "dock";
  }

  body.xproduct-details .app.free-camera,
  body.xproduct-details .app.free-camera.panel-closed {
    grid-template-rows: auto minmax(300px, 60dvh) minmax(0, 1fr) auto;
  }

  body.xproduct-details .masthead {
    display: flex;
    min-height: calc(44px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 12px 0;
    gap: 12px;
  }

  body.xproduct-details .masthead .tabs {
    display: none;
  }

  body.xproduct-details .masthead .xproduct-back-link {
    font-size: 10px;
  }

  body.xproduct-details .toolbar {
    padding-top: 8px;
  }
}

/* Low landscape: keep the left dock, scene and right sheet in their
   original columns; add one compact spanning row for the return links. */
@media (orientation: landscape) and (max-height: 560px) {
  body.xproduct-details .app,
  body.xproduct-details .app.panel-closed {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head head" "dock stage panel";
  }

  body.xproduct-details .masthead {
    display: flex;
    min-height: calc(44px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
    gap: 12px;
  }

  body.xproduct-details .masthead .tabs {
    display: none;
  }

  body.xproduct-details .masthead .xproduct-back-link {
    font-size: 10px;
  }
}