/*
 * UI Toolkit (Yoga) defaults for everything inside #panel. :where() keeps these at zero
 * specificity so every converted USS rule wins over them, exactly as in Unity (this
 * project's theme imports no Unity default theme - Theme/Theme.tss is tokens + base only).
 */
@property --spr { syntax: '*'; inherits: false; }
@property --tint { syntax: '*'; inherits: false; }
@property --slice-left { syntax: '*'; inherits: false; }
@property --slice-top { syntax: '*'; inherits: false; }
@property --slice-right { syntax: '*'; inherits: false; }
@property --slice-bottom { syntax: '*'; inherits: false; }
@property --slice-scale { syntax: '*'; inherits: false; }
@property --text-v { syntax: '*'; inherits: false; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

:where(#panel, #panel *) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: auto;
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0 solid #000;
  /* Unity draws a background-image stretched to fill, unrepeated (scale mode
     stretch-to-fill), unlike the web's natural-size tiling. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

#panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 390px;
  transform-origin: 0 0;
  overflow: hidden;
  /* inherited text defaults (Unity: 12px, black) */
  font-family: liberation, sans-serif;
  font-size: 12px;
  line-height: 1.2;
  color: #000;
}

/* picking-mode="Ignore": the element does not take pointer input; its children still do. */
:where(#panel [data-pick="ignore"]) { pointer-events: none; }

:where(#panel .unity-text-element) { overflow-wrap: anywhere; white-space: pre-line; }
:where(#panel [role="button"]) { cursor: pointer; }

/* Built-in control structures (Unity builds these in code). */
:where(#panel .unity-scroll-view) { overflow: hidden; }
:where(#panel .unity-scroll-view__content-and-vertical-scroll-container) { flex-direction: row; flex-grow: 1; flex-shrink: 1; }
:where(#panel .unity-scroll-view__content-viewport) {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
:where(#panel .unity-scroll-view__content-viewport)::-webkit-scrollbar { display: none; }
:where(#panel .unity-scroll-view__content-container) { flex-shrink: 0; }
:where(#panel .unity-scroll-view--horizontal .unity-scroll-view__content-viewport) { overflow-x: auto; overflow-y: hidden; }

/* base.uss clips every viewport (overflow: hidden) - in Unity the ScrollView then scrolls its
   content itself. The browser has to do that scrolling, so the viewport must stay scrollable:
   this out-ranks the converted USS rule (id + class beats a class). */
#panel .unity-scroll-view--vertical > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport {
  overflow-x: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
#panel .unity-scroll-view--horizontal > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
}
:where(#panel .unity-scroll-view--horizontal .unity-scroll-view__content-container) { flex-direction: row; }

:where(#panel input) {
  display: block;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  width: 100%;
  min-width: 0;
  padding: 0;
  user-select: text;
  -webkit-user-select: text;
}

:where(#panel .unity-base-text-field__input) { flex-direction: row; align-items: center; }
:where(#panel .unity-toggle__input) { flex-direction: row; align-items: center; }

/* Unity has no ::before/::after; nothing in the panel should draw them. */
#panel *::before, #panel *::after { content: none; }