/* UI Toolkit's defaults, as CSS. Every element is a positioned flex column with
   border-box sizing (Yoga), so DOM order is paint order. */
@font-face { font-family: 'OpenSans-Regular'; src: url('../../assets/fonts/OpenSans-Regular.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'OpenSans-Bold'; src: url('../../assets/fonts/OpenSans-Bold.ttf') format('truetype'); font-display: block; }

.ve {
  display: flex; flex-direction: column; position: relative; box-sizing: border-box;
  flex: 0 1 auto; align-items: stretch; justify-content: flex-start; align-content: flex-start;
  min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0 solid transparent;
  font-family: 'OpenSans-Regular', 'Open Sans', sans-serif; font-size: 12px; line-height: normal;
  text-rendering: geometricPrecision; font-kerning: none;
  color: rgb(196, 196, 196);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
  pointer-events: auto;
}
.ve > ._bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; background-repeat: no-repeat; background-position: 50% 50%; }
.ve > ._gfx { position: absolute; pointer-events: none; }
.tx > ._tx { position: relative; display: block; max-width: 100%; pointer-events: none; overflow-wrap: break-word; }
.root { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; touch-action: none; }

/* ScrollView: [viewport > content] + the 7px scroller of Resources/Scroll.uss */
.sv { overflow: hidden; }
.sv > .sv-row { position: relative; display: flex; flex-direction: row; flex: 1 1 auto; min-height: 0; min-width: 0; align-items: stretch; }
.sv-row > .sv-vp { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column;
  overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
.sv-vp::-webkit-scrollbar { display: none; width: 0; height: 0; }
.sv.sv-h .sv-vp { flex-direction: row; touch-action: pan-x; }
.sv-vp > .sv-content { flex-shrink: 0; }
/* svFlex (uie.js): a growing ScrollView starts at 0, as in Unity */
.sv._svflex, .sv._svflex > .sv-row, .sv._svflex > .sv-row > .sv-vp { flex-basis: 0; }
.sv-vbar { display: none; position: relative; flex: 0 0 7px; width: 7px; background: rgb(13, 10, 32); touch-action: none; }
.sv-vbar.on { display: block; }
.sv-thumb { position: absolute; left: 0; top: 0; width: 7px; height: 12px; box-sizing: border-box; background: rgb(58, 47, 116); border: 1px solid rgb(8, 7, 26); }
.sv-thumb.hover { background: rgb(75, 63, 143); }

/* TextField */
.tf { flex-direction: row; align-items: center; }
.tf > .tf-label { margin-right: 6px; }
.tf-input { flex: 1 1 auto; }
/* flex: a field taller than its line (min-height) centres the text: height:100% of an auto-height box was the line alone, at the top */
.tf-input > input { all: unset; box-sizing: border-box; width: 100%; height: 100%; min-height: 1.6em; padding: 0 6px; flex: 1 1 auto;
  font: inherit; color: inherit; background: transparent;
  -webkit-user-select: text; user-select: text; touch-action: manipulation; }

/* Foldout */
.fo > .fo-head { cursor: pointer; }

.disabled { pointer-events: none; }

/* GL mode (glr.js): the canvas under the board draws everything; the DOM keeps
   laying out and taking taps but paints nothing — except a text field's own
   text and caret, which the browser keeps drawing over the canvas. */
.glr-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.glr-dom, .glr-dom * { background-color: transparent !important; background-image: none !important; border-color: transparent !important;
  color: transparent !important; text-shadow: none !important; box-shadow: none !important; outline-color: transparent !important;
  -webkit-text-stroke-color: transparent !important; caret-color: transparent; }
.glr-dom ._bg, .glr-dom ._gfx { display: none !important; }
.glr-dom .tf-input > input { color: var(--tf-ink, #111) !important; caret-color: var(--tf-ink, #111) !important; -webkit-text-fill-color: var(--tf-ink, #111) !important; }
.glr-dom .tf-input > input::placeholder { color: var(--tf-hint, rgba(0,0,0,0.4)) !important; -webkit-text-fill-color: var(--tf-hint, rgba(0,0,0,0.4)) !important; }
.glr-dom .tf-input > input::selection { background: rgba(120, 100, 220, 0.45) !important; }
/* absFit (uie.js): a free absolute element is as wide as its content, as in Yoga */
._absfree { width: max-content; }
/* Unity's Label does not shrink (flex-shrink 0), but Yoga measures its text with at most the
   parent's inner width, so a long title wraps (or is cut) inside its box instead of running past it */
.lbl { flex-shrink: 0; max-width: 100%; line-height: calc(var(--lh, 1.36181640625) * 1em); }
/* TextCore's height: the lines at the font's own spacing, the whole block rounded up to a device pixel
   (--upx, uie.js). The remainder of one line is added under the text: exact for a single line, within a
   pixel for several. */
.lbl > ._tx { padding-bottom: calc(round(up, 1lh, var(--upx, 0.01px)) - 1lh); }