/* Widget mode (?widget=1) — see docs/ui/WidgetMode.js. Every rule is scoped to
   body.widget-mode so nothing here affects the full app. Chrome hiding rides on
   top of the existing body.panel-hidden / #ui.panel-hidden fullscreen state
   (styles.css); this file removes the floating scene furniture that panel-hidden
   leaves behind and adds the widget's own logo + settings control.

   Tokens only (no colour/font literals) per the CSS invariants (STYLE.md). */

/* Scene furniture and floating chrome that survive panel-hidden. The floating
   panel windows (.cv-panel) and non-legend colour bars re-parent to <body>, so
   they need their own hide rules. The composition legend and axes gizmo are
   kept: they are the floating widgets widget mode shows (see the pinned
   positions below). */
body.widget-mode #mobileMenuToggle,
body.widget-mode #mobileOverlay,
body.widget-mode #backgroundDot,
body.widget-mode #measurementTools,
body.widget-mode #cameraTools,
body.widget-mode #structureInfoContent,
body.widget-mode #axesLegend,
body.widget-mode #aboutOverlay,
body.widget-mode #raytraceWarningModal,
body.widget-mode #splitPane,
body.widget-mode #splitPaneTabs,
body.widget-mode #splitHandle,
body.widget-mode #sideDockDropHint,
body.widget-mode .cv-panel,
body.widget-mode .cv-warning-banner,
body.widget-mode .cv-colorbar-floating:not(.comp-legend-widget) {
  display: none !important;
}

/* Logo IS the menu trigger, top-left. Its dropdown anchors to it and opens
   below-left. */
body.widget-mode #widgetSettings {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: var(--z-overlay-widget);
}

body.widget-mode #widgetLogo {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
body.widget-mode #widgetLogo img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: var(--radius-sm);
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
body.widget-mode #widgetLogo:hover img,
body.widget-mode #widgetLogo:focus-visible img {
  opacity: 1;
}

body.widget-mode .widget-settings-menu {
  position: absolute;
  top: calc(40px + var(--sp-2));
  left: 0;
  min-width: 180px;
  padding: var(--sp-2) 0;
  background: var(--menu-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--panel-blur));
  /* Never taller than the space below the anchor (logo top var(--sp-3) + the
     40px logo + the menu's own var(--sp-2) offset, plus a var(--sp-3) bottom
     gap); scroll internally past that. The widget IS the iframe viewport, so
     dvh is the canvas height. */
  /* border-box so max-height bounds the WHOLE box (padding + border), not just
     the content — otherwise those spill past the viewport. */
  box-sizing: border-box;
  max-height: calc(100dvh - var(--sp-3) - 40px - var(--sp-2) - var(--sp-3));
  overflow-y: auto;
}

body.widget-mode .widget-menu-group-label {
  padding: var(--sp-1) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}

body.widget-mode .widget-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
}
body.widget-mode .widget-menu-item:hover {
  background: var(--hover-color);
}
body.widget-mode .widget-menu-item[aria-disabled="true"] {
  color: var(--fg-3);
  cursor: default;
}
body.widget-mode .widget-menu-item[aria-disabled="true"]:hover {
  background: transparent;
}

/* Check column: reserve width so labels align whether or not the item is the
   current selection. The tick is shown only on the checked item. */
body.widget-mode .widget-menu-check {
  flex: 0 0 auto;
  width: 1em;
  color: var(--accent-fg);
  visibility: hidden;
}
body.widget-mode .widget-menu-item[aria-checked="true"] .widget-menu-check {
  visibility: visible;
}

body.widget-mode .widget-menu-sep {
  height: 1px;
  margin: var(--sp-2) 0;
  background: var(--line-1);
}

/* Boot-failure notice (host/early.js catch): the embed hides all chrome, so a
   crash would otherwise be a blank iframe. Centred plain-text message. */
body.widget-mode .widget-boot-error {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  background: var(--menu-bg);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-md);
  text-align: center;
  z-index: var(--z-overlay-widget);
}

/* Axes gizmo, widget-mode only: pinned lower-left with the widget's own
   spacing (the composition legend below takes the lower-right instead).
   WidgetMode.js forces general.gizmoLabelsOnArrows on, so the a/b/c letters
   ride on the arrows as billboarded sprites and the separate #axesLegend box
   stays hidden above. pointer-events: none — same reasoning as the legend's
   lock below: purely decorative furniture in the embed, no dragging and no
   long-press menu. The extra body.widget-mode class makes this more specific
   than the base #axesGizmo rule (styles.css), so no !important is needed. */
body.widget-mode #axesGizmo {
  left: var(--sp-3);
  bottom: var(--sp-3);
  /* 2.5x the base size for the embed. The div's box is the single source of
     scale: WidgetMode.js's resizeGizmoRenderer() sizes the renderer to it, the
     arrows render proportionally larger, and the on-arrow labels are
     viewport-relative sprites (sizeAttenuation:false), so they grow with it. */
  width: calc(var(--gizmo-size) * 2.5);
  height: calc(var(--gizmo-size) * 2.5);
  pointer-events: none;
}

/* Composition legend, widget-mode only: moderately smaller and on a fixed very
   light-gray surface (--comp-legend-widget-bg) with fixed dark text
   (--comp-legend-widget-fg), so the embed reads the same in every theme. The
   px bases below stay multiplied by --legend-scale so the box still scales as
   one; only the base sizes shrink. Pinned lower-right (the axes gizmo above
   takes the lower-left). */
body.widget-mode .comp-legend-widget {
  top: auto !important;
  bottom: var(--sp-3) !important;
  right: var(--sp-3) !important;
  left: auto !important;
}
body.widget-mode .comp-legend-body {
  padding: var(--sp-2);
  background: var(--comp-legend-widget-bg);
  /* Fully visible for any species count: cap to the canvas minus top/bottom
     gaps and scroll the rows internally past that. */
  max-height: calc(100dvh - 2 * var(--sp-3) - var(--sp-4));
  overflow-y: auto;
}
body.widget-mode .comp-legend-list {
  gap: calc(4px * var(--legend-scale));
}
body.widget-mode .comp-legend-row {
  gap: calc(7px * var(--legend-scale));
}
body.widget-mode .comp-legend-swatch {
  width: calc(22px * var(--legend-scale));
  height: calc(22px * var(--legend-scale));
}
body.widget-mode .comp-legend-label {
  font-size: calc(13px * var(--legend-scale));
  color: var(--comp-legend-widget-fg);
}
body.widget-mode .comp-legend-sub {
  font-size: calc(9px * var(--legend-scale));
  color: var(--comp-legend-widget-fg);
}