/* Editor mocks: HTML/CSS drawings of Unity editor UI (dark skin) with Jungle's default
   Pill field style. Colors come from JungleEditorStyles.uss and the Pill variant sheet so a
   mock reads like the real Inspector. Every class is prefixed um- ("unity mock").

   Anatomy, outermost first:
     figure.um-fig > .um-win (window) > .um-win-tabs + .um-win-body
     .um-go (GameObject header), .um-comp (component) > .um-comp-h + .um-comp-b
     .um-tabs > .um-tab(.on), .um-sec(.closed) > .um-sec-h + .um-sec-b
     .um-f (field row) > .um-l (label) + .um-v (value)
     .um-tsf(.open) (type selectable field) > .um-f + .um-tsf-b
     .um-list > .um-list-h + .um-list-row* | .um-list-empty
     .um-pick (type picker), .um-menu (context menu), .um-hier (Hierarchy), .um-console
     .um-n (numbered callout), .um-hl (highlight ring) */

.md-typeset .um-fig {
  width: 100%;
  margin: 1.2em 0 1.6em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
}

.md-typeset .um-fig > figcaption {
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
  max-width: 34rem;
  margin: 0;
  text-align: left;
}

.um-row2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.md-typeset .um-row2 > .um-fig {
  width: auto;
  flex: 1 1 260px;
  margin: 0.6em 0 1em;
}

/* ---------- Window ---------- */

.um-fig,
.um-win {
  --um-bg: #383838;
  --um-text: #d2d2d2;
  --um-muted: #9a9a9a;
  --um-field: #2a2a2a;
  --um-field-border: #212121;
  --um-titlebar: #3e3e3e;
  --um-line: #232323;
  --um-sel: #2c5d87;
  --um-green: #22b14c;
  --um-bar: #4d4d4d;
  --um-bar-inner: #434343;
  --um-pill: rgba(255, 255, 255, 0.06);
  --um-soft: rgba(140, 140, 140, 0.22);
}

.um-win,
.um-menus,
.um-pick {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--um-text);
  text-align: left;
  user-select: none;
}

.um-win {
  background: var(--um-bg);
  border: 1px solid #191919;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.um-win.wide { max-width: 640px; }
.um-win.narrow { max-width: 300px; }

.um-win * { box-sizing: border-box; }

.um-win-tabs {
  display: flex;
  background: #282828;
  border-bottom: 1px solid #191919;
  height: 24px;
}

.um-win-tab {
  padding: 3px 12px;
  color: var(--um-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.um-win-tab.on {
  background: var(--um-bg);
  color: var(--um-text);
  border-right: 1px solid #191919;
}

.um-win-body { padding: 4px 0 6px; }

/* Free-floating title for a custom editor window (Hub, Quick Setup). */
.um-win-title {
  font-size: 15px;
  font-weight: 700;
  padding: 10px 12px 2px;
}

.um-win-sub {
  color: var(--um-muted);
  padding: 0 12px 8px;
  font-size: 11px;
}

/* ---------- GameObject and component headers ---------- */

.um-go {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--um-line);
}

.um-go-name {
  flex: 1;
  background: var(--um-field);
  border: 1px solid var(--um-field-border);
  border-radius: 3px;
  padding: 0 5px;
  height: 20px;
  line-height: 18px;
}

.um-comp { border-bottom: 1px solid var(--um-line); }

.um-comp-h {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--um-titlebar);
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  padding: 2px 6px 2px 4px;
  font-weight: 700;
  height: 23px;
}

.um-comp-h .um-ic { opacity: 0.9; }

.um-comp-h .um-tools {
  margin-left: auto;
  display: flex;
  gap: 8px;
  color: var(--um-muted);
  font-weight: 400;
  font-size: 11px;
}

.um-comp-b { padding: 4px 6px 6px 14px; }

.um-comp.closed .um-comp-b { display: none; }

/* Icons are plain glyphs; .um-ic gives them a fixed box. */
.um-ic {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
}

.um-ic.go::before { content: "\25A3"; color: #8fb3d9; }
.um-ic.cs::before { content: "#"; color: #a6d47c; font-weight: 700; }
.um-ic.jg::before { content: "\2618"; color: var(--um-green); }
.um-ic.asset::before { content: "\25C6"; color: #d9b45f; }
.um-ic.folder::before { content: "\25A0"; color: #c8a65a; }
.um-ic.cam::before { content: "\25C9"; color: #9ab; }
.um-ic.light::before { content: "\2600"; color: #e8d06a; }
.um-ic.warn::before { content: "\26A0"; color: #e6c34a; }
.um-ic.info::before { content: "i"; color: #9cc5ef; font-style: italic; font-weight: 700; }

/* ---------- Foldout arrow, checkbox ---------- */

.um-arrow {
  display: inline-block;
  width: 12px;
  flex: 0 0 12px;
  color: #bcbcbc;
  font-size: 8px;
  text-align: center;
}

.um-arrow::before { content: "\25B6"; }
.um-arrow.open::before { content: "\25BC"; }

.um-chk {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: var(--um-field);
  border: 1px solid #1c1c1c;
  border-radius: 2px;
  position: relative;
}

.um-chk.on::after {
  content: "\2713";
  position: absolute;
  inset: -2px 0 0 1px;
  font-size: 12px;
  color: #e0e0e0;
}

/* ---------- Tabs (TabSection) ---------- */

.um-tabs {
  display: flex;
  margin: 2px -6px 6px -14px;
  border-bottom: 1px solid #1a1a1a;
}

.um-tab {
  flex: 1;
  text-align: center;
  font-size: 11px;
  padding: 3px 8px;
  background: var(--um-bar);
  border-right: 1px solid #1f1f1f;
}

.um-tab:last-child { border-right: 0; }

.um-tab.on {
  background: #323232;
  font-weight: 700;
}

/* ---------- Sections (Pill variant: rounded raised bar) ---------- */

.um-sec { margin: 0 0 6px; }

.um-sec-h {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--um-bar);
  border-radius: 6px;
  padding: 2px 6px 2px 2px;
  font-weight: 700;
  margin-left: -10px;
}

.um-sec.inner > .um-sec-h { background: var(--um-bar-inner); }

.um-sec.discrete > .um-sec-h {
  background: transparent;
  font-weight: 400;
  font-size: 11px;
  opacity: 0.6;
}

.um-sec-b { padding: 4px 0 0; }

.um-sec.closed > .um-sec-b { display: none; }

.um-count {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 400;
}

/* ---------- Field rows ---------- */

.um-f {
  display: flex;
  align-items: center;
  min-height: 22px;
  gap: 4px;
  padding: 1px 0;
}

.um-l {
  flex: 0 0 40%;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2px;
}

.um-l.bold { font-weight: 700; }

.um-v {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.um-in,
.um-dd,
.um-of {
  flex: 1;
  min-width: 0;
  height: 19px;
  line-height: 17px;
  background: var(--um-field);
  border: 1px solid var(--um-field-border);
  border-radius: 3px;
  padding: 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.um-in.num { flex: 0 1 90px; }

.um-dd {
  background: #515151;
  border-color: #303030;
  display: flex;
  justify-content: space-between;
}

.um-dd::after { content: "\25BE"; color: #bbb; margin-left: 6px; }

/* Object field: icon + name + target circle. */
.um-of { display: flex; align-items: center; gap: 4px; padding-right: 0; }

.um-of::after {
  content: "\25CE";
  margin-left: auto;
  width: 18px;
  text-align: center;
  color: #aaa;
  border-left: 1px solid #1c1c1c;
}

.um-of.none { color: var(--um-muted); }

.um-vec { display: flex; gap: 4px; flex: 1; }
.um-vec span { flex: 1; display: flex; gap: 3px; align-items: center; }
.um-vec span::before { color: var(--um-muted); }
.um-vec span:nth-child(1)::before { content: "X"; }
.um-vec span:nth-child(2)::before { content: "Y"; }
.um-vec span:nth-child(3)::before { content: "Z"; }
.um-vec .um-in { flex: 1; }

.um-color {
  flex: 1;
  height: 17px;
  border: 1px solid var(--um-field-border);
  border-radius: 2px;
}

.um-slider { flex: 1; display: flex; align-items: center; gap: 6px; }
.um-slider::before {
  content: "";
  flex: 1;
  height: 3px;
  background: linear-gradient(90deg, #8a8a8a var(--p, 50%), #5e5e5e var(--p, 50%));
  border-radius: 2px;
}

/* ---------- Type selectable field (Pill style) ---------- */

.um-pill {
  display: inline-block;
  padding: 0 9px;
  min-height: 17px;
  line-height: 17px;
  background: var(--um-pill);
  border-radius: 9px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.um-pill.empty {
  color: #828282;
  background: rgba(255, 255, 255, 0.04);
}

.um-rbtn {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--um-pill);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #cfcfcf;
}

.um-v .um-push { margin-left: auto; }

.um-tsf { margin: 1px 0; }

.um-tsf > .um-f { padding: 4px 2px 4px 0; }

.um-tsf.open {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--um-soft);
  border-radius: 8px;
  margin-left: -15px;
}

.um-tsf.open > .um-f {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px 8px 0 0;
  padding-left: 1px;
}

.um-tsf.open > .um-f > .um-l { font-weight: 700; }

.um-tsf-b { padding: 4px 6px 4px 15px; }

/* Indent a row that sits inside a foldout without a box. */
.um-ind { padding-left: 15px; }

/* ---------- Jungle list ---------- */

.um-list {
  border: 1px solid var(--um-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  margin: 3px 0 5px;
  overflow: hidden;
}

.um-list-h {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.08);
  padding: 2px 4px 2px 2px;
  font-weight: 700;
  min-height: 22px;
}

.um-list-h .um-n-in {
  margin-left: auto;
  width: 40px;
  height: 18px;
  background: var(--um-field);
  border: 1px solid var(--um-field-border);
  border-radius: 3px;
  font-weight: 400;
  padding: 0 4px;
  line-height: 16px;
}

.um-add {
  width: 22px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #d0d0d0;
}

.um-list-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 2px 2px 2px 0;
  border-top: 1px solid var(--um-soft);
}

.um-list-row > .um-grip {
  flex: 0 0 12px;
  color: #777;
  text-align: center;
  font-size: 10px;
  padding-top: 3px;
}

.um-list-row > .um-grip::before { content: "\2261"; font-size: 13px; }

.um-list-row > .um-body { flex: 1; min-width: 0; }

.um-list-row > .um-rm {
  flex: 0 0 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #bdbdbd;
  padding-top: 1px;
}

.um-list-row > .um-rm::before { content: "\00D7"; }

.um-list-row.sel { background: rgba(44, 93, 135, 0.35); }

.um-list-empty {
  padding: 3px 10px 4px;
  color: var(--um-muted);
  font-style: italic;
  border-top: 1px solid var(--um-soft);
}

/* Toggle-set list row: a checkbox in front, dimmed when off. */
.um-list-row.ts > .um-chk { margin-top: 3px; }
.um-list-row.off > .um-body { opacity: 0.45; }

/* ---------- Unity event ---------- */

.um-evt {
  border: 1px solid #242424;
  border-radius: 3px;
  margin: 3px 0 5px;
  background: #3b3b3b;
}

.um-evt-h {
  background: #353535;
  padding: 1px 6px;
  border-bottom: 1px solid #242424;
}

.um-evt-b { padding: 3px 6px; color: var(--um-muted); }

.um-evt-f {
  display: flex;
  justify-content: flex-end;
  gap: 0;
}

.um-evt-f span {
  border: 1px solid #242424;
  border-top: 0;
  background: #3b3b3b;
  width: 24px;
  text-align: center;
  font-weight: 700;
}

/* ---------- Buttons, help boxes ---------- */

.um-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #585858;
  border: 1px solid #303030;
  border-radius: 3px;
  padding: 0 10px;
  height: 21px;
  white-space: nowrap;
}

.um-btn.primary {
  background: var(--um-green);
  border-color: #17803a;
  color: #fff;
  font-weight: 700;
}

.um-btn.block { display: flex; width: 100%; margin: 4px 0; }

.um-help {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #464646;
  border: 1px solid #2c2c2c;
  border-radius: 3px;
  padding: 5px 8px;
  margin: 4px 0;
  font-size: 11px;
  line-height: 15px;
}

.um-muted { color: var(--um-muted); }
.um-b { font-weight: 700; }
.um-green { color: #5fd47f; }
.um-sp { height: 6px; }

/* ---------- Card (Hub-style package card) ---------- */

.um-card {
  border: 1px solid #3f503c;
  border-radius: 6px;
  background: #2f3a2d;
  margin: 6px 10px;
  padding: 7px 10px;
}

.um-card-t { color: #e8fff3; font-weight: 700; display: flex; justify-content: space-between; gap: 8px; }
.um-card-d { color: #d3f7e6; font-size: 11px; line-height: 15px; margin: 2px 0 4px; }
.um-card-s { color: #bfebd5; font-size: 11px; display: flex; justify-content: space-between; align-items: center; }

/* ---------- Type picker (Classic: Unity AdvancedDropdown) ---------- */

.um-pick {
  background: #3c3c3c;
  border: 1px solid #191919;
  border-radius: 4px;
  width: 260px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.um-win .um-pick { margin: 4px 0 4px 10px; }

.um-pick-s {
  margin: 5px;
  height: 20px;
  border-radius: 10px;
  background: var(--um-field);
  border: 1px solid #1c1c1c;
  padding: 0 8px 0 22px;
  line-height: 18px;
  color: var(--um-muted);
  position: relative;
}

.um-pick-s::before {
  content: "\2315";
  position: absolute;
  left: 7px;
  top: 0;
  color: #999;
}

.um-pick-s.typed { color: var(--um-text); }

.um-pick-t {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: #353535;
  border-top: 1px solid #262626;
  border-bottom: 1px solid #262626;
  font-weight: 700;
  height: 22px;
}

.um-pick-t.sub::before {
  content: "\2039";
  position: absolute;
  left: 8px;
  font-size: 16px;
  color: #bbb;
}

.um-pick-i {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px 1px 10px;
  min-height: 20px;
}

.um-pick-i.dir::after { content: "\203A"; margin-left: auto; color: #aaa; font-size: 14px; }

.um-pick-i.hl { background: var(--um-sel); color: #fff; }

.um-pick-d {
  display: block;
  font-size: 10.5px;
  line-height: 13px;
  color: var(--um-muted);
  padding: 0 8px 4px 30px;
  margin-top: -2px;
}

.um-pick-i.hl + .um-pick-d { background: var(--um-sel); color: #dbe7f2; }

/* ---------- Context menu ---------- */

.um-menus { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }

.um-menu {
  background: #3c3c3c;
  border: 1px solid #191919;
  border-radius: 4px;
  padding: 3px 0;
  min-width: 170px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  margin-right: -2px;
}

.um-menus .um-menu:nth-child(n+2) { margin-top: var(--um-drop, 0); }

.um-menu-i {
  padding: 1px 22px 1px 22px;
  min-height: 20px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
}

.um-menu-i.dir::after { content: "\25B8"; position: absolute; right: 8px; color: #aaa; font-size: 10px; }
.um-menu-i.hl { background: var(--um-sel); color: #fff; }
.um-menu-i.dis { color: #777; }
.um-menu-sep { height: 1px; background: #2a2a2a; margin: 3px 0; }

/* ---------- Hierarchy / Project lists ---------- */

.um-hier { padding: 3px 0; }

.um-h-i {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding-left: 18px;
}

.um-h-i.d1 { padding-left: 32px; }
.um-h-i.d2 { padding-left: 46px; }
.um-h-i.d3 { padding-left: 60px; }
.um-h-i.scene { padding-left: 4px; background: #2d2d2d; font-weight: 700; }
.um-h-i.sel { background: var(--um-sel); color: #fff; }

/* ---------- Console ---------- */

.um-console-i {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 8px;
  border-bottom: 1px solid #2f2f2f;
  font-size: 11.5px;
}

.um-console-i:nth-child(even) { background: #3c3c3c; }

/* ---------- Timeline strip ---------- */

.um-tl { padding: 6px 8px 8px; }

.um-tl-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--um-muted);
  border-bottom: 1px solid #2a2a2a;
  margin: 0 0 4px 110px;
}

.um-tl-row { display: flex; align-items: center; height: 22px; }
.um-tl-row > .um-tl-n { flex: 0 0 110px; font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 6px; }
.um-tl-row > .um-tl-lane { flex: 1; position: relative; height: 18px; }

.um-clip {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 4px;
  background: #3f6d4a;
  border: 1px solid #5c9a68;
  font-size: 10.5px;
  padding: 0 6px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.um-clip.sel { outline: 2px solid #7fd496; }
.um-clip.alt { background: #3d5470; border-color: #5d7fa5; }

/* ---------- Callouts ---------- */

.um-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: #66cb34;
  color: #111;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  font-family: "Lato", sans-serif;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}

.um-hl {
  outline: 2px solid #66cb34;
  outline-offset: 1px;
  border-radius: 4px;
}

/* Numbered legend under a figure: <ol class="um-legend"> */
.md-typeset ol.um-legend { text-align: left; margin: 0 0 0 1.2em; font-size: 0.72rem; color: var(--md-default-fg-color--light); }
.md-typeset ol.um-legend li { margin: 0; }