/* Single shell owner for the accepted Three.js sandbox.
 * The renderer owns world coordinates, camera and projected entity placement.
 * The old raster layers/Pixi canvas are not part of this entry. */
.office-collection-page #officeSandboxPage.is-three-sandbox .office-sandbox-board-frame {
  position: relative; overflow: hidden; isolation: isolate; background: transparent;
}
/* Do not float the finished HUD and setting controls over an unpainted scene. */
.office-collection-page #officeSandboxPage.is-three-sandbox .office-sandbox-board-frame:has(.office-sandbox-board:not([data-office-renderer-state="ready"])) {
  background: #78c8d0;
}
.office-collection-page #officeSandboxPage.is-three-sandbox .office-sandbox-board-frame:has(.office-sandbox-board:not([data-office-renderer-state="ready"]))
  :is(.office-score-hud, .office-sandbox-settings-entry, .office-sandbox-editor-toolbar) {
  visibility: hidden;
}
.office-collection-page #officeSandboxPage.is-three-sandbox .office-toy-island-scene,
.office-collection-page #officeSandboxPage.is-three-sandbox .office-sandbox-board {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  min-width: 0; min-height: 0; max-width: none; max-height: none;
  aspect-ratio: auto; margin: 0; padding: 0; transform: none;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden;
}
#officeSandboxPage.is-three-sandbox .office-toy-island-scene::before,
#officeSandboxPage.is-three-sandbox .office-toy-island-scene::after,
#officeSandboxPage.is-three-sandbox .office-sandbox-board::before,
#officeSandboxPage.is-three-sandbox .office-sandbox-board::after,
#officeSandboxPage.is-three-sandbox .office-toy-island-environment { display: none; }
.office-three-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline-offset: -4px; }
.office-collection-page .office-object-card.office-catalog-drag-preview {
  position: fixed; z-index: 60; left: 0; top: 0; width: 80px; height: 80px;
  min-width: 0; min-height: 0; max-width: none; max-height: none;
  display: grid; grid-template-rows: minmax(0, 1fr); gap: 0;
  padding: 0; margin: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; pointer-events: none;
  transition: none; will-change: transform; filter: drop-shadow(0 5px 4px #244b4938);
}
.office-collection-page .office-catalog-drag-preview .office-object-card-visual {
  width: 80px; height: 80px; max-height: none; transform: none;
}
.office-collection-page .office-object-card.is-drag-preview-source { opacity: .4; }
/* Display-only range guide; all measured endpoints are projected by the renderer. */
.office-ring-range { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: hidden; }
.office-ring-range-outline { fill: none; stroke: #fffcf3; stroke-width: 5; stroke-linecap: square; }
.office-ring-range-bracket { fill: none; stroke: #165663; stroke-width: 2.5; stroke-linecap: square; }
.office-ring-range-leader { fill: none; stroke: #165663; stroke-width: 1.5; stroke-dasharray: 4 3; stroke-linecap: round; }
.office-ring-range-pill { fill: #fffcf3; stroke: #165663; stroke-width: 1; }
.office-ring-range-text { fill: #165663; text-anchor: middle; dominant-baseline: central; font: 600 14px/1 var(--office-interface-font); }
.office-ring-range .is-context .office-ring-range-bracket,
.office-ring-range .is-context .office-ring-range-leader { opacity: .7; }
.office-ring-range[data-compact="true"] .office-ring-range-text { font-size: 12px; }
/* Score HUD: the only total-score display, fixed to the shell, not the camera. */
@font-face {
  font-family: "Office Score";
  src: url('/assets/fonts/office-score-hud/nunito-variable.ttf') format('truetype');
  font-style: normal; font-weight: 200 1000; font-display: swap;
  unicode-range: U+002E, U+0030-0039, U+2014;
}
.office-score-hud {
  --score-hud-width: 176px;
  position: absolute; z-index: 21; top: 22px; left: 20px; width: var(--score-hud-width);
  color: #084e5b; font-family: var(--office-interface-font);
  line-height: 1; font-variant-numeric: tabular-nums; user-select: none;
}
.office-score-hud[hidden] { display: none; }
.office-score-hud__panel {
  box-sizing: border-box; position: relative;
  aspect-ratio: 1681 / 936; padding: 0;
  border: 0; background: transparent url('/assets/img/office/sandbox/score-hud-v1/malt-texture-score-plaque-v1.png') center / contain no-repeat;
}
.office-score-hud__score-copy {
  position: absolute; inset: 0; white-space: nowrap; letter-spacing: 0;
}
.office-score-hud__score-copy > span {
  position: absolute; inset: 5% 30% 66%;
  display: grid; place-items: center;
  color: #fff; font-size: 14px; line-height: 1; font-weight: 900;
  -webkit-text-stroke: 1px #8a601a; paint-order: stroke fill;
  text-shadow: 0 1px 1px #8a601a;
}
.office-score-hud__score-copy strong {
  position: absolute; inset: 34% 12% 22%;
  display: grid; place-items: center;
  font-family: "Office Score", var(--office-interface-font);
  font-size: 36px; line-height: 1; font-weight: 1000;
}
@media (width < 1024px) {
  .office-score-hud { --score-hud-width: 120px; top: 8px; left: 6px; }
  .office-score-hud__score-copy > span {
    font-size: 10px; -webkit-text-stroke-width: .833px; text-shadow: 0 .833px .833px #8a601a;
  }
  .office-score-hud__score-copy strong { font-size: 25px; }
}
#officeSandboxPage.is-three-sandbox .office-three-camera {
  position: static;
  display: flex; align-items: center; gap: inherit;
  width: max-content; padding: 0;
  border: 0; background: transparent; box-shadow: none;
}
#officeSandboxPage.is-three-sandbox .office-three-camera button {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-sizing: border-box; flex: 0 0 var(--office-sandbox-tool-size);
  width: var(--office-sandbox-tool-size); height: var(--office-sandbox-tool-size);
  min-height: var(--office-sandbox-tool-size); aspect-ratio: 1; padding: 5px 7px 4px; white-space: nowrap;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}
#officeSandboxPage.is-three-sandbox .office-sandbox-sound-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-sizing: border-box; flex: 0 0 var(--office-sandbox-tool-size);
  width: var(--office-sandbox-tool-size); height: var(--office-sandbox-tool-size);
  min-height: var(--office-sandbox-tool-size); aspect-ratio: 1; padding: 5px 7px 4px; white-space: nowrap;
  font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0;
}
#officeSandboxPage.is-three-sandbox .office-sandbox-sound-toggle input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#officeSandboxPage.is-three-sandbox .office-sandbox-sound-icon {
  position: relative; display: block; flex: 0 0 30px; width: 30px; height: 30px;
  background: url('/assets/img/office/sandbox/control-icons-v1/sound-v1.png') center / 125% 125% no-repeat;
  pointer-events: none;
}
#officeSandboxPage.is-three-sandbox .office-sandbox-sound-toggle:not(:has(:checked)):not(:has(input:disabled)) .office-sandbox-sound-icon {
  filter: saturate(.2);
}
#officeSandboxPage.is-three-sandbox .office-sandbox-sound-toggle:not(:has(:checked)) .office-sandbox-sound-icon::after {
  content: ''; position: absolute; width: 23px; height: 3px; top: 50%; left: 50%;
  border-radius: 2px; background: #586d69; box-shadow: 0 0 0 1px #fff9ee;
  transform: translate(-50%, -50%) rotate(-45deg);
}
#officeSandboxPage.is-three-sandbox .office-three-camera svg {
  display: block; width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
#officeSandboxPage.is-three-sandbox .office-three-camera button[data-office-camera-preset] svg { display: none; }
#officeSandboxPage.is-three-sandbox .office-three-camera button[data-office-camera-preset]::before {
  content: "";
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: center / 125% 125% no-repeat var(--office-camera-icon);
}
#officeSandboxPage.is-three-sandbox .office-three-camera button[data-office-camera-preset="default"] {
  --office-camera-icon: url("/assets/img/office/sandbox/control-icons-v1/default-view-v3.png");
}
#officeSandboxPage.is-three-sandbox .office-three-camera button[data-office-camera-preset="top"] {
  --office-camera-icon: url("/assets/img/office/sandbox/control-icons-v1/top-view-v1.png");
}
#officeSandboxPage.is-three-sandbox .office-three-status {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  margin: 0;
  pointer-events: none;
}
#officeSandboxPage.is-three-sandbox .office-three-accessibility {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
#officeSandboxPage.is-three-sandbox .office-three-accessibility:focus-within {
  z-index: 30; top: 130px; left: 16px; width: 230px; max-height: 50%; height: auto;
  overflow: auto; clip-path: none; background: #fff7e8; border-radius: 12px; padding: 10px;
}
#officeSandboxPage.is-three-sandbox .office-three-accessibility button { display: block; padding: 7px; color: #344b45; font-size: 12px; }
.office-three-entities { position: absolute; z-index: 3; inset: 0; pointer-events: none; overflow: hidden; }
.office-cell-impacts { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; }
.office-cell-impact { position: absolute; width: 24px; height: 24px; transform: translate(-50%, -50%); color: #247e70; }
.office-cell-impact[hidden] { display: none; }
.office-cell-impact[data-sign="neutral"] { color: #8b867a; }
.office-cell-impact[data-sign="negative"] { color: #cb6c59; }
.office-cell-impact svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.office-cell-impact__outline { stroke: #fff9ec; stroke-width: 6.5; }
.office-cell-impact__ink { stroke: currentColor; stroke-width: 3.8; }
.office-three-entity {
  position: absolute; display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -72%); padding: 3px; border: 1px solid #8d8265;
  border-radius: 7px; background: #fff7e8f0; color: #344b45;
  box-shadow: 0 3px 5px #345a6740; pointer-events: auto; touch-action: none;
  cursor: grab; user-select: none; font: 500 10px/1.1 var(--office-interface-font);
}
.office-three-entity[hidden] { display: none; }
.office-three-entity svg, .office-three-entity img { width: 100%; height: 100%; pointer-events: none; }
.office-three-entity img { object-fit: contain; }
.office-three-entity > span { white-space: nowrap; font-size: 9px; }
.office-three-entity small {
  position: absolute; right: -8px; top: -8px; border-radius: 8px;
  padding: 2px 4px; background: #344b45; color: white; font-size: 10px; line-height: 1.2;
}
.office-three-entity small:empty { display: none; }
.office-three-entity.is-selected:not([data-office-three-photo]) { outline: 2px solid #fff; box-shadow: 0 0 0 4px #2c6c6b; }
.office-three-entity[data-office-three-photo] {
  padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none;
  transform: translate(-50%, calc(-100% - var(--office-marker-stem, 6px)));
}
.office-three-entity[data-office-three-photo]::before {
  content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: calc(100% + var(--office-marker-stem, 6px));
  border-radius: 50%; background: radial-gradient(circle, #80603566 0%, #88673540 38%, #88673500 70%);
  transform: translateY(-50%) var(--office-marker-shadow-transform, scale(.5)); pointer-events: none;
}
.office-three-entity[data-office-three-photo]::after {
  content: ''; position: absolute; top: calc(100% - 1px); left: 42%;
  width: 16%; height: calc(var(--office-marker-stem, 6px) + 1px); background: linear-gradient(135deg, #ffe89c, #e4bc57);
  clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none;
}
.office-flora-photo {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  box-sizing: border-box; overflow: hidden; border-radius: 50%; background: #fff;
}
.office-flora-photo img {
  display: block; position: absolute; max-width: none; object-fit: contain;
  width: var(--office-flora-photo-size, 100%); height: var(--office-flora-photo-size, 100%);
  left: var(--office-flora-photo-x, 50%); top: var(--office-flora-photo-y, 50%); transform: translate(-50%, -50%);
}
.office-flora-photo-missing { position: absolute; font-size: 10px; color: #39707a; }
.office-flora-photo-missing[hidden] { display: none; }
.office-three-entity[data-office-three-photo] .office-flora-photo {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from 150deg, #f5d979, #ffe893 25%, #7ad6cb 48%, #f0c7df 70%, #bceee8 84%, #f5d979) border-box;
  box-shadow: 0 1px 2px #6a795230;
}
.office-three-entity .office-flora-marker-label {
  display: none; position: absolute; top: calc(100% + var(--office-marker-stem, 6px) + 6px); left: 50%; transform: translateX(-50%);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; padding: 3px 6px;
  border-radius: 5px; background: #fff; color: #285763; pointer-events: none;
  font-size: 10px; line-height: 1.2; box-shadow: 0 1px 2px #52675b24;
}
.office-three-entity[data-office-three-photo].is-selected .office-flora-marker-label { display: block; }
.office-three-entity.is-pending { opacity: .5; }
.office-three-entity.is-readonly { pointer-events: none; cursor: default; }
.is-entity-dragging, .is-entity-dragging .office-three-entity { cursor: grabbing; }
#officeSandboxPage.is-three-sandbox .office-three-error {
  position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(85%, 360px); padding: 24px; border-radius: 16px;
  background: #fff6e5; color: #344b45; font: 500 15px/1.6 var(--office-interface-font); text-align: center;
}
.office-three-retry {
  display: block; margin: 12px auto 4px; white-space: nowrap;
}
.office-mobile-more-trigger, .office-mobile-more, .office-mobile-undo-trigger { display: none; }
@media (width < 1024px) {
  .office-collection-page #officeSandboxPage.is-three-sandbox .office-sandbox-board-frame {
    height: calc(100dvh - 56px - var(--office-mobile-library-space)); min-height: 0;
  }
  .office-collection-page #officeSandboxPage .office-sandbox-editor-toolbar { display: none; }
  #officeSandboxPage.is-three-sandbox .office-profile-entry,
  #officeSandboxPage.is-three-sandbox .office-ring-guide-trigger,
  #officeSandboxPage.is-three-sandbox .office-sandbox-settings-entry { display: none; }
  .office-mobile-more-trigger, .office-mobile-undo-trigger {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
    color: #215b55; cursor: pointer; touch-action: manipulation;
  }
  .office-mobile-more-trigger .collection-icon, .office-mobile-undo-trigger .collection-icon {
    display: block; width: var(--icon-size, 24px); height: var(--icon-size, 24px);
  }
  .office-mobile-undo-trigger { position: relative; --icon-size: 22px; color: var(--app-primary); }
  .office-mobile-undo-trigger:disabled { opacity: 1; color: var(--app-text-muted); cursor: default; }
  .office-mobile-undo-trigger:not(:disabled):is(:hover, :focus-visible)::after {
    content: attr(aria-label); position: absolute; top: 100%; right: 0; z-index: 60;
    padding: 5px 8px; border-radius: 4px; background: var(--app-text); color: var(--app-surface);
    font: 500 12px/20px var(--office-interface-font); white-space: nowrap; pointer-events: none;
  }
  .office-mobile-undo-trigger[hidden] { display: none; }
  .office-mobile-more-trigger:focus-visible,
  .office-mobile-undo-trigger:focus-visible,
  .office-mobile-menu-item:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 4px; }
  .office-mobile-more {
    display: flex; flex-direction: column; position: fixed; z-index: 51;
    top: 64px; right: 12px; width: 184px; max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 88px); padding: 6px 0; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid #e0e9e6; border-radius: 8px; background: #fff;
    box-shadow: 0 6px 20px #244d481c;
  }
  .office-mobile-menu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px;
    flex-shrink: 0; padding: 6px 12px; border: 0; border-radius: 0;
    background: transparent; color: #263a36; box-shadow: none;
    font: 500 14px/20px var(--office-interface-font); text-align: left; cursor: pointer;
    touch-action: manipulation;
  }
  .office-mobile-menu-item:disabled { color: #717b77; background: #e6eae8; cursor: not-allowed; }
  .office-mobile-menu-item:active:not(:disabled) { background: var(--office-control-pressed-face); }
  /* Display the approved artwork as a sprite; keep labels outside the image. */
  .office-mobile-menu-icon-slot {
    flex: 0 0 24px; width: 24px; height: 24px;
    background-image: url('/assets/icons/office-mobile-menu-approved-v1.png');
    background-repeat: no-repeat; background-size: 153.6px 102.4px;
  }
  .office-mobile-menu-icon-direction { background-position: -4px -28px; }
  .office-mobile-menu-icon-desk { background-position: -34.6px -28px; }
  .office-mobile-menu-icon-sound { background-position: -65.1px -28px; }
  .office-mobile-menu-icon-clear { background-position: -94.5px -28px; }
  .office-mobile-menu-icon-help { background-position: -125px -28px; }
  .office-mobile-menu-icon-profile { display: grid; place-items: center; background: none; color: #215b55; }
  .office-mobile-menu-icon-profile .collection-icon { display: block; width: 22px; height: 22px; stroke-width: 1.25; }
  .office-mobile-menu-profile { flex-wrap: wrap; column-gap: 8px; row-gap: 0; }
  .office-mobile-menu-profile .office-mobile-menu-label { flex: 1; }
  .office-mobile-menu-state { margin-left: auto; color: #62736f; font-size: 12px; white-space: nowrap; }
  .office-mobile-menu-switch {
    flex: 0 0 32px; height: 20px; margin-left: auto; position: relative;
    border-radius: 10px; background: #84958f;
  }
  .office-mobile-menu-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff;
  }
  .office-mobile-menu-sound[aria-checked="true"] .office-mobile-menu-switch { background: #30996f; }
  .office-mobile-menu-sound[aria-checked="true"] .office-mobile-menu-switch::after { transform: translateX(12px); }
  .office-mobile-menu-clear { margin-top: 4px; border-top: 1px solid #e8eeeb; color: #b44e4e; }
  .office-mobile-menu-help { justify-content: flex-start; border-top: 1px solid #e8eeeb; color: #62736f; font-size: 12px; }
  .office-mobile-more[hidden] { display: none; }
  [data-mobile-control-dragging="true"] .office-mobile-more-trigger,
  [data-mobile-control-dragging="true"] .office-mobile-undo-trigger { visibility: hidden; }
  #officeSandboxPage.is-three-sandbox .office-three-camera button { padding: 4px; font-size: 9px; }
  #officeSandboxPage.is-three-sandbox .office-sandbox-sound-toggle { padding: 4px; font-size: 9px; }
  #officeSandboxPage.is-three-sandbox .office-three-camera svg { width: 15px; height: 15px; }
  #officeSandboxPage.is-three-sandbox .office-three-camera button[data-office-camera-preset]::before { flex-basis: 22px; width: 22px; height: 22px; }
  #officeSandboxPage.is-three-sandbox .office-sandbox-sound-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }
}