/* Level design mode (leveldesign.js): the switch, and the layout it changes.
   The panels' own looks live in levelhier.css and levelpicker.css. */

/* The switch of the mode and, inside it, the pin: top left of the viewport. */
.design-tools {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 6px;
  /* Seven buttons: on a narrow viewport they wrap instead of sliding under the Face orientation toggle. */
  max-width: calc(100% - 150px);
}
.layout-toggle, .pin-toggle, .pivot-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: 12px; }
.layout-toggle.on, .pin-toggle.on { border-color: var(--ok); background: rgba(88, 192, 122, .2); }
/* Editing the pivot is a different thing from moving the model, and says so in a different colour. */
.pivot-toggle.on { border-color: #ffb000; background: rgba(255, 176, 0, .22); }

/* What the viewport has to say about the selection: a locked rig, or that the pivot is being edited. */
.design-hint {
  position: absolute; left: 10px; bottom: 10px; z-index: 4; max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 5px; font-size: 12px; color: var(--text);
  background: rgba(20, 21, 26, .86); border: 1px solid var(--line); pointer-events: none;
}
.design-hint.pivot { border-color: #ffb000; }
.design-hint.locked { border-color: var(--warn); color: var(--warn); }

/* Rows with a real preview picture need a wider panel than the model tree did. */
body.design-mode .app { grid-template-columns: 340px 1fr 440px; }

/* The hierarchy fills the right panel under its header. */
.design-host { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }

/* The picker bar takes the atlas bar's place under the viewport. */
.picker-dock {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  height: var(--picker-h, clamp(260px, 50vh, 640px)); background: var(--panel); border-top: 1px solid var(--line);
}
.picker-resize {
  height: 6px; cursor: ns-resize; background: var(--line); border-top: 1px solid var(--bg);
  touch-action: none;
}
.picker-resize:hover { background: var(--accent); }

/* While designing, the atlas, its sheets and the model tree are out of the way:
   they belong to the bake, and the bake is not what is being edited. */
body.design-mode #atlasResize,
body.design-mode #sheetDock,
body.design-mode #sheetDock.floating { display: none !important; }

/* A height remembered on a tall screen must not swallow the viewport on a short one:
   the drag clamps to three quarters of the window, but only while dragging. */
.picker-dock { max-height: 75vh; }

/* The move hint is pinned to the viewport's top-left corner, where the Design level
   button now sits (z-index above it), so the hint's first words are hidden behind
   the button while a part is armed. Starts to the right of the button instead. */
.viewport > .move-hint { left: 122px; }

/* The extra actions beside the mode switch: the CheckList editor, the level's own settings, play. */
.design-action { padding: 4px 10px; font-size: 12px; }
.play-toggle { padding: 4px 12px; font-size: 12px; border-color: var(--ok); }
.play-toggle:hover:not(:disabled) { background: rgba(88, 192, 122, .2); }
/* Làm xám: the level goes grey and the Picker's cards can be dragged onto it. */
.grey-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; border-color: #9aa0ad; }
.grey-toggle:hover:not(:disabled) { background: rgba(154, 160, 173, .2); }
.grey-toggle.on { border-color: #cfd3dc; background: rgba(154, 160, 173, .32); color: #fff; }
.pivot-toggle:disabled { opacity: .45; cursor: not-allowed; }

/* What the game needs on the selected row sits under the hierarchy, in the same panel. */
.inspector-host { flex: none; max-height: 46%; overflow: auto; min-width: 0; border-top: 1px solid var(--line); }

/* Play mode shows the level alone, in the game's own proportions: a phone held upright.
   The panels, the atlas and the design buttons are out of the way; the play UI (play.css)
   lays the picker strip and the HUD over the viewport. */
body.play-mode .app { grid-template-columns: 1fr; }
body.play-mode .app > .panel { display: none; }
body.play-mode .stage { display: flex; justify-content: center; background: #0e0f12; }
body.play-mode .stage > :not(.viewport) { display: none !important; }
body.play-mode .viewport { flex: none; height: 100%; aspect-ratio: 9 / 19.5; max-width: 100%; overflow: hidden; }
body.play-mode .design-tools,
body.play-mode .design-hint,
body.play-mode .facing-toggle,
body.play-mode .readout { display: none !important; }