/* =========================================================
   ESOS Admin — Token-driven primitives
   Rules:
   - Login styles unchanged
   - Home styles scoped under .esos-home
   - NO borders anywhere on home EXCEPT the "Hi" pill
     (Exception: Create Run “Question Variables” mini dropdown uses a 1px border per spec)
   - Avoid :has() (cables CSS parser may not support it)
   - Use SCALE reveal system everywhere (no clip-path)
   - No hover expansion (no height/padding/font-size changes)
   ========================================================= */

/* =========================================================
   Base reset
   ========================================================= */
* {
  box-sizing: border-box;
}

html,
body {
  overscroll-behavior: none;
}

/* =========================================================
   Fonts (cables assets)
   ========================================================= */

/* =========================================================
   Global tokens
   ========================================================= */
:root {
  --font-base: Helvetica, Arial, sans-serif;
  --font-strong: Helvetica, Arial, sans-serif;
  --font-cond: Helvetica, Arial, sans-serif;
  --font-black: Helvetica, Arial, sans-serif;
  --font-fallback: Helvetica, Arial, sans-serif;


  --u: 30px;
  --g: 4px;
  --r: 14px;
  --pad: 30px;
  --chromeInset: 30px;

  --bg: #f4f2ef;
  --pill: #ecebea;

  --text: #242424;
  --muted40: rgba(0, 0, 0, 0.4);

  --ok: rgba(82, 255, 0, 0.18);
  --danger: #d23b3b;

  /* Motion */
  --openDur: 150ms;
  --closeDur: 80ms;
  --easeOut: cubic-bezier(0.2, 0.9, 0.2, 1);
  --easeIn: cubic-bezier(0.4, 0, 0.8, 0.2);

  --staggerStep: 22ms;
  --textFadeDur: 80ms;
  --textDelay: 20ms;

  /* Home pill sizing */
  --pillH: var(--u);
  --pillPadX: 15px;
  --pillFont: 13px;

  /* Interaction */
  --pillBrowseBase: rgba(0, 0, 0, 0.03);
  --pillBrowseHover: rgba(0, 0, 0, 0.12);
  --browseRunDraftText: #6D8CFB;
  --browseRunDraftBg: rgba(130, 152, 230, 0.10);
  --browseRunDraftHoverBg: rgba(130, 152, 230, 0.20);
  --browseRunPublishedText: #00B30F;
  --browseRunPublishedBg: rgba(3, 204, 19, 0.10);
  --browseRunPublishedHoverBg: rgba(3, 204, 19, 0.30);
  --browseLinkText: rgba(0,0,0,.6);
  --browseLinkBg: rgba(0, 0, 0, 0.05);
  --browseLinkHoverBg: rgba(0, 0, 0, 0.15);
  --instructionText: #E49C44;
  --instructionBg: rgba(228, 156, 68, 0.17);
  --publishedRunScreenBg: #DAF2DB;
  --surveyQuestionBg: #FFF1E7;
  --surveyEndScreenBg: #FFE1CC;
  --pasteBoxCodeText: #D947E1;
  --pasteBoxCodeBg: rgba(217, 71, 225, 0.10);
  --pasteBoxCodeHoverBg: rgba(217, 71, 225, 0.20);

  --fieldBg: rgba(0, 0, 0, 0.03);
  --fieldHoverBg: rgba(0, 0, 0, 0.12);
  --fieldDropdownOpenBg: #F2F2F2;
  --fieldDropdownOpenHoverBg: #E0E0E0;

  --dimOpacity: 0.12;
  --dimFadeDur: 40ms;

  /* Browse layout */
  --browseColGap: 4px;
  --browseListPadY: 0px;
  --browseMaxH: calc(100vh - 60px);
  --browseFadeH: 18px;

  /* Create forms */
  --formW: 771px;
  --formGutterX: 160px;
  --formInputFont: 20px;
  --formButtonFont: 15px;

  /* Secondary gap */  
  --g15: 16px;
  --gSectionBreak: 128px;
  
  /* Signals */  
  --sigPillH: 30px;
  --sigInputW: 73px;
  --sigVarFont: 13px;

  /* Dropdown */
  --dropdownRowH: 60px;
  --dropdownMaxH: 250px;
  --dropdownPadX: 30px;

  --dropdownInsetL: 10px;
  --dropdownItemPadY: 10px;

  /* Derived pill height */
  --dropdownItemH: calc(var(--formInputFont) + (var(--dropdownItemPadY) * 2));

  --dropdownItemBg: rgba(0, 0, 0, 0.03);
  --dropdownItemHover: rgba(0, 0, 0, 0.09);
  --dropdownMask: #f2f2f2;

  /* Create Run (question block sizing) */
  --runRowH: 60px;
  --runQVarH: 40px; /* 39–40px per spec */
  --runQVarFont: 10px;
  --runIconBtn: 40px; /* +/- box */
}

/* =========================================================
   App root
   ========================================================= */
.esos {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-base), var(--font-fallback);
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.center {
  position: absolute;
  inset: 0;
  overflow: auto;
  overscroll-behavior: none;
}

.esos-home[data-home-view="create-run"] .center {
  overflow: hidden;
}

.esos-home[data-home-view="create-run"] .center--flow {
  padding: 0;
}

/* default home state / first load of create screens */
.center--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.center--flow {
  display: block;
  padding: 0;
}

.center--flow > .create-wrap,
.center--flow > .form-screen {
  margin-bottom: calc(120px + var(--chromeInset) + var(--u));
}

.center > * {
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: flex;
  gap: var(--g);
  align-items: center;
  justify-content: center;
}

/* =========================================================
   Base pill (login defaults)
   ========================================================= */
.pill {
  height: var(--u);
  border-radius: var(--r);
  background: var(--pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  text-align: center;
  text-transform: none;
}
.pill--ok {
  background: var(--ok);
}
.pill--danger {
  background: var(--danger);
  color: #fff;
}

/* =========================================================
   LOGIN: inputs + submit button
   ========================================================= */
.pill-input {
  width: auto;           /* JS will set an explicit pixel width */
  min-width: 135px;      /* your current minimum */
  max-width: 60vw;
  height: var(--u);
  border-radius: var(--r);
  border: 0;
  outline: none;
  background: var(--pill);
  padding: 0 15px;
  box-sizing: border-box;
  font-family: var(--font-base);
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
  text-transform: none;
}
.pill-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}
.pill-input:not(:placeholder-shown) {
  color: rgba(0, 0, 0, 1);
}
.pill-input:focus::placeholder {
  color: transparent;
}

.pill-btn {
  height: var(--u);
  border-radius: var(--r);
  border: 0;
  background: var(--pill);
  cursor: pointer;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: 13px;
  color: rgba(0, 0, 0, 1);
  text-transform: none;
  width: 69px;
}
.pill-btn:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.pill--greeting {
  width: 90px;
}

/* Flash error palette (C90404) */
.esos.flash-error .pill-input {
  background: rgba(201, 4, 4, 0.05);
  color: rgba(201, 4, 4, 1);
}
.esos.flash-error .pill-input:not(:placeholder-shown) {
  color: rgba(201, 4, 4, 1);
}
.esos.flash-error .pill-btn {
  background: rgba(201, 4, 4, 0.8);
  color: #fff;
}
.esos.flash-error .pill--ok {
  background: rgba(201, 4, 4, 0.18);
}
.esos.flash-error .pill--greeting {
  color: rgba(201, 4, 4, 1);
}

/* =========================================================
   HOME SCOPE
   ========================================================= */
.esos-home {
  position: absolute;
  inset: 0;
}

/* =========================================================
   Home layout: left icon stack
   ========================================================= */
.esos-home .leftmenu {
  position: absolute;
  left: var(--chromeInset);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--g);
  z-index: 10;
}
.esos-home[data-home-view="create-run"] .leftmenu {
  position: fixed;
  left: var(--chromeInset);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.esos-home .skull-wrap {
  position: relative;
}

/* Icon buttons */
.esos-home .iconbtn {
  width: var(--u);
  height: var(--u);
  border-radius: 10px;
  border: 0;
  background: var(--pill);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}
.esos-home .iconbtn:hover {
  background: var(--pill);
}
.esos-home .leftmenu > .iconbtn {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.esos-home .leftmenu > .iconbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--pillBrowseBase);
  pointer-events: none;
  transition: background-color 0ms linear;
}
.esos-home .leftmenu > .iconbtn:hover::before {
  background-color: var(--pillBrowseHover);
}
.esos-home .leftmenu > .iconbtn:disabled::before,
.esos-home .leftmenu > .iconbtn[aria-disabled="true"]::before,
.esos-home .leftmenu > .iconbtn[data-disabled="1"]::before,
.esos-home .leftmenu > .iconbtn:disabled:hover::before,
.esos-home .leftmenu > .iconbtn[aria-disabled="true"]:hover::before,
.esos-home .leftmenu > .iconbtn[data-disabled="1"]:hover::before {
  background: var(--pillBrowseBase);
}
.esos-home .iconbtn svg {
  display: block;
}
.esos-home .leftmenu > .iconbtn svg {
  position: relative;
  z-index: 1;
}

.esos-home .screen-close-btn {
  position: fixed;
  left: auto;
  right: var(--chromeInset);
  top: var(--chromeInset);
  z-index: 60;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dimFadeDur) var(--easeOut);
}

.esos-home[data-run-split="1"] {
  --run-action-layer: 10;
  --run-pane-edge-gap: var(--chromeInset);
  --run-pane-mask-threshold: 400px;
  --run-nav-safe-w: calc(var(--run-pane-edge-gap) + var(--u) + var(--run-pane-edge-gap));
  --run-builder-safe-inline: var(--run-nav-safe-w);
  --run-builder-content-min: calc(var(--run-pane-mask-threshold) + (var(--run-builder-safe-inline) * 2));
  --run-builder-float-right: clamp(
    var(--run-pane-edge-gap),
    calc(var(--run-preview-width, 0px) + var(--run-pane-edge-gap)),
    max(var(--run-pane-edge-gap), calc(100vw - var(--run-builder-content-min) + var(--run-pane-edge-gap)))
  );
}

.esos-home[data-run-split="1"] .screen-close-btn {
  right: var(--run-builder-float-right);
  z-index: var(--run-action-layer);
}

.esos-home[data-dimmode="panel"] .screen-close-btn {
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   HOME primitive: h-pill (base)
   ========================================================= */
.esos-home .h-pill {
  height: var(--pillH);
  border-radius: 10px;
  border: 0;
  background: var(--pill);

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  padding: 0 var(--pillPadX);
  gap: 10px;

  font-family: var(--font-base);
  font-size: var(--pillFont);
  line-height: 1;

  white-space: nowrap;
  user-select: none;
  text-align: left;
  text-transform: none;

  width: auto;
  flex: 0 0 auto;
  align-self: flex-start;
}
.esos-home button.h-pill {
  cursor: pointer;
  appearance: none;
}

/* =========================================================
   HOME — Flyouts (shared shell)
   ========================================================= */
.esos-home .flyout,
.esos-home .hflyout {
  position: absolute;
  left: calc(var(--u) + var(--g));
  top: 0;

  z-index: 20;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openDur) var(--easeOut);
}
.esos-home .flyout {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  align-items: flex-start;
}
.esos-home .hflyout {
  display: flex;
  flex-direction: row;
  gap: var(--g);
  align-items: center;
}

.esos-home .flyout[data-open="1"],
.esos-home .hflyout[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
}
.esos-home .flyout[data-open="0"],
.esos-home .hflyout[data-open="0"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--closeDur) var(--easeIn);
}

/* =========================================================
   HOME — Create forms (shared)
   ========================================================= */

.esos-home .create-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;

  width: min(var(--formW), calc(100% - (var(--formGutterX) * 2)));
  max-width: 100%;

  position: relative;
}

/* Form + Run should stretch internal rows to full width */
.esos-home .create-wrap--form {
  align-items: center;
}

.esos-home .create-wrap--run {
  align-items: stretch;
}

.esos-home .create-wrap--form .create-warn,
.esos-home .create-wrap--form .create-textarea {
  width: 100%;
}

.esos-home .run-split-shell {
  --run-preview-width: 0px;
  --run-divider-hit: 60px;
  --run-divider-line: 0.5px;
  --run-divider-line-color: rgba(36, 36, 36, 0.20);
  --run-handle-size: 48px;
  --run-pane-edge-gap: var(--chromeInset);
  --run-pane-mask-threshold: 400px;
  --run-pane-pad-x: 30px;
  --run-nav-safe-w: calc(var(--run-pane-edge-gap) + var(--u) + var(--run-pane-edge-gap));
  --run-builder-safe-inline: var(--run-nav-safe-w);
  --run-pane-content-min: calc(var(--run-pane-mask-threshold) + (var(--run-pane-pad-x) * 2));
  --run-builder-content-min: calc(var(--run-pane-mask-threshold) + (var(--run-builder-safe-inline) * 2));
  --run-builder-float-right: clamp(
    var(--run-pane-edge-gap),
    calc(var(--run-preview-width) + var(--run-pane-edge-gap)),
    max(var(--run-pane-edge-gap), calc(100vw - var(--run-builder-content-min) + var(--run-pane-edge-gap)))
  );
  --run-preview-mobile-inset: clamp(0px, calc((480px - var(--run-preview-width)) * 999), 16px);
  width: 100vw;
  height: 100%;
  min-height: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  overflow: visible;
}

.esos-home .run-split {
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
  position: relative;
  overflow: visible;
}

.esos-home .run-split-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.esos-home .run-split-pane::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.esos-home .run-split-pane--builder {
  left: 0;
  right: var(--run-preview-width);
  min-width: 0;
  position: absolute;
  z-index: 1;
}

.esos-home .run-split-pane--preview {
  right: 0;
  width: var(--run-preview-width);
  min-width: 0;
  background: var(--surveyQuestionBg);
  z-index: 60;
}

.esos-home .run-split[data-preview-open="0"] .run-split-pane--preview {
  width: 0;
  background: transparent;
  pointer-events: none;
}

.esos-home .run-split-shell[data-run-preview-enabled="0"],
.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-split,
.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-split-pane,
.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-builder-shell,
.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-builder-content,
.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-split-divider {
  cursor: default;
}

.esos-home .run-split-shell[data-run-preview-enabled="0"] .run-split-divider {
  display: none;
  pointer-events: none;
}

.esos-home .run-split-pane__inner {
  min-height: 100%;
  padding: 0 var(--run-pane-pad-x);
}

.esos-home .run-split-pane--builder > .run-split-pane__inner {
  position: relative;
  min-width: var(--run-builder-content-min);
  padding-left: var(--run-builder-safe-inline);
  padding-right: var(--run-builder-safe-inline);
}

.esos-home .run-builder-shell {
  width: 100%;
  min-height: 100%;
  display: grid;
  position: relative;
}

.esos-home .run-builder-content {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: var(--run-pane-mask-threshold);
  display: flex;
  justify-content: center;
}

.esos-home .run-builder-content .create-wrap {
  flex: 0 0 auto;
  width: min(var(--formW), calc(100vw - (var(--formGutterX) * 2)), 100%);
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: calc(120px + var(--chromeInset) + var(--u));
}

.esos-home .run-split-shell .run-builder-content .create-wrap--run {
  box-sizing: border-box;
  padding-top: var(--gSectionBreak);
}

.esos-home .run-builder-actions {
  position: fixed;
  right: var(--run-builder-float-right);
  top: calc(var(--run-pane-edge-gap) + var(--u) + var(--g));
  transform: none;
  z-index: var(--run-action-layer, 10);
}

.esos-home .run-split-shell[data-run-published="1"] .run-split-pane--builder {
  background: var(--publishedRunScreenBg);
}

.esos-home .run-split-divider {
  display: block;
  width: var(--run-divider-hit);
  min-width: var(--run-divider-hit);
  top: 0;
  bottom: 0;
  left: calc(100% - var(--run-preview-width));
  border: 0;
  padding: 0;
  background: transparent;
  cursor: col-resize;
  position: absolute;
  transform: translateX(-50%);
  z-index: 70;
  pointer-events: auto;
  touch-action: none;
  overflow: visible;
}

.esos-home .run-split-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--run-divider-line);
  border-radius: 0;
  background: var(--run-divider-line-color);
  transform: translateX(-50%);
  transition: none;
}

.esos-home .run-split-divider::after {
  content: none;
}

.esos-home .run-split-divider__tab {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  width: 60px;
  height: 30px;
  padding: 8px 13px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 10px;
  background: #242424;
  backdrop-filter: blur(27px);
  pointer-events: none;
  transition: none;
}

.esos-home .run-split-helper {
  position: absolute;
  right: calc((var(--run-divider-hit) / 2) + 4px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  height: 30px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 15px;
  border-radius: 10px;
  border: 0;
  background: var(--instructionBg);
  color: var(--instructionText);
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
}

.esos-home .run-split-helper[hidden] {
  display: none !important;
}

.esos-home .run-split-divider__chevron,
.esos-home .run-split-divider__line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.esos-home .run-split-divider__chevron svg,
.esos-home .run-split-divider__line svg {
  display: block;
}

.esos-home .run-split-divider__chevron--left {
  transform: scaleX(-1);
}

.esos-home .run-split-pane--preview > .run-split-pane__inner {
  min-width: var(--run-pane-content-min);
  display: flex;
  justify-content: center;
}

.esos-home .run-preview-shell {
  --run-preview-page-bg: var(--surveyQuestionBg);
  width: min(var(--formW), 100%);
  max-width: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 92px var(--run-preview-mobile-inset) 120px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  outline: none;
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.esos-home .run-preview-shell--completed {
  --run-preview-page-bg: var(--surveyEndScreenBg);
}

.esos-home .run-preview-shell--signals-blocks {
  justify-content: flex-start;
}

.esos-home .run-preview-screen-fill {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--run-preview-width);
  background: var(--run-preview-page-bg);
  pointer-events: none;
  z-index: -1;
}

.esos-home .run-preview-progress-pill {
  position: fixed;
  top: 32px;
  left: calc(100% - var(--run-preview-width) + (max(var(--run-preview-width), var(--run-pane-content-min)) / 2));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 15px;
  gap: 15px;
  border-radius: 10px;
  border: 0.5px solid rgba(36, 36, 36, 0.20);
  background: var(--run-preview-page-bg);
  font-family: var(--font-base);
  font-size: 8px;
  line-height: 1;
  color: #242424;
  z-index: 35;
  pointer-events: none;
}

.esos-home .run-preview-progress-pill--completed {
  gap: 0;
}

.esos-home .run-preview-progress-pill__line {
  width: 90px;
  height: 2px;
  border-radius: 999px;
  background: rgba(36, 36, 36, 0.20);
  overflow: hidden;
  flex: 0 0 auto;
}

.esos-home .run-preview-progress-pill__line-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #242424;
}

.esos-home .run-preview-progress-pill__text {
  font-family: med, var(--font-fallback);
  font-size: 8px;
  line-height: 1;
  color: #242424;
  letter-spacing: 0.02em;
}

.esos-home .run-preview-progress-pill--completed .run-preview-progress-pill__text {
  font-family: var(--font-base);
}

.esos-home .run-preview-nav-arrow {
  position: fixed;
  top: 50%;
  width: var(--u);
  height: var(--u);
  min-width: var(--u);
  min-height: var(--u);
  border: 0;
  border-radius: 10px;
  background: var(--pill);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #242424;
  cursor: pointer;
  z-index: 36;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms var(--easeOut);
}

.esos-home .run-preview-nav-arrow svg {
  display: block;
  width: 9px;
  height: 10px;
  flex: 0 0 auto;
}

.esos-home .run-split[data-preview-open="0"] .run-preview-nav-arrow,
.esos-home .run-split[data-preview-nav-layout="hidden"] .run-preview-nav-arrow {
  display: none;
}

.esos-home .run-preview-nav-arrow--previous {
  left: calc(100% - var(--run-preview-width) + var(--chromeInset));
  transform: translateY(-50%);
}

.esos-home .run-preview-nav-arrow--next {
  right: var(--chromeInset);
  transform: translateY(-50%);
}

.esos-home .run-split[data-preview-nav-layout="side"] .run-preview-nav-arrow {
  top: 50%;
  transform: translateY(-50%);
}

.esos-home .run-split[data-preview-nav-layout="side"] .run-preview-nav-arrow--previous {
  left: var(
    --run-preview-nav-prev-left,
    calc(100% - var(--run-preview-width) + var(--chromeInset))
  );
  right: auto;
}

.esos-home .run-split[data-preview-nav-layout="side"] .run-preview-nav-arrow--next {
  left: auto;
  right: var(--chromeInset);
}

.esos-home .run-split[data-preview-nav-layout="top"] .run-preview-nav-arrow {
  top: var(--chromeInset);
  transform: none;
}

.esos-home .run-split[data-preview-nav-layout="top"] .run-preview-nav-arrow--previous {
  left: var(
    --run-preview-nav-prev-left,
    calc(100% - var(--run-preview-width) + var(--run-preview-mobile-inset))
  );
  right: auto;
}

.esos-home .run-split[data-preview-nav-layout="top"] .run-preview-nav-arrow--next {
  left: var(
    --run-preview-nav-next-left,
    calc(100% - var(--run-preview-mobile-inset) - var(--u))
  );
  right: auto;
}

.esos-home .run-preview-stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esos-home .run-preview-stage--signals-blocks {
  align-items: stretch;
  justify-content: flex-start;
}

.esos-home .run-preview-questionnaire {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.esos-home .run-preview-signals-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.esos-home .run-preview-threed2-image-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.esos-home .run-preview-threed2-variable {
  width: 100%;
}

.esos-home .run-preview-threed2-image-frame {
  display: inline-flex;
  flex: 0 0 auto;
  height: 278px;
  border-radius: 10px;
  overflow: hidden;
}

.esos-home .run-preview-threed2-image {
  display: block;
  width: auto;
  height: 278px;
  max-width: none;
}

.esos-home .run-preview-question {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 90px;
  padding: 30px 30px;
}

.esos-home .run-preview-question--stack {
  gap: 4px;
}

.esos-home .run-preview-question__label {
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  color: rgba(0, 0, 0, 0.45);
}

.esos-home .run-preview-question__prompt {
  font-family: med, var(--font-fallback);
  font-size: 30px;
  line-height: 1;
  color: #242424;
  white-space: pre-line;
}

.esos-home .run-preview-question__prompt--centered {
  text-align: center;
}

.esos-home .run-preview-answer-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.esos-home .run-preview-sliders {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.esos-home .run-preview-slider {
  --slider-center: 50%;
  position: relative;
  width: 100%;
  height: 136px;
  border-radius: 10px;
  background: rgba(36, 36, 36, 0.03);
  overflow: hidden;
}

.esos-home .run-preview-slider__label {
  position: absolute;
  top: 32px;
  left: 4px;
  right: 4px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: 20px;
  line-height: 1;
  color: #242424;
}

.esos-home .run-preview-slider__meta {
  position: absolute;
  top: 56px;
  left: 18px;
  right: 18px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-base);
  font-size: 12px;
  line-height: 1;
  color: #242424;
}

.esos-home .run-preview-slider__value {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: med, var(--font-fallback);
  font-size: 12px;
  line-height: 1;
  color: #242424;
  white-space: nowrap;
}

.esos-home .run-preview-slider__control {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 72px;
  height: 60px;
  border-radius: 10px;
  background: rgba(36, 36, 36, 0.03);
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__meta--dissonance {
  top: 32px;
  bottom: 72px;
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: end;
  column-gap: 0;
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__axis {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 20px;
  line-height: 1.2;
  align-self: end;
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__axis--start {
  padding-right: 12px;
  text-align: left;
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__axis--end {
  padding-left: 12px;
  text-align: right;
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__value {
  position: relative;
  left: auto;
  transform: none;
  width: 64px;
  justify-self: center;
  align-self: end;
  text-align: center;
}

.esos-home .run-preview-sliders,
.esos-home .run-preview-input {
  margin: 0;
}

.esos-home .run-preview-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
}

.esos-home .run-preview-slider__track-range {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  bottom: 0;
}

.esos-home .run-preview-slider__track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(36, 36, 36, 0.09) 0,
    rgba(36, 36, 36, 0.09) calc(var(--slider-center) - 30px),
    transparent calc(var(--slider-center) - 30px),
    transparent calc(var(--slider-center) + 30px),
    rgba(36, 36, 36, 0.09) calc(var(--slider-center) + 30px),
    rgba(36, 36, 36, 0.09) 100%
  );
  transform: translateY(-50%);
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__track-marker {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 14px;
  background: rgba(36, 36, 36, 0.09);
  transform: translateY(-50%);
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__track-marker--start {
  left: 0;
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__track-marker--center {
  left: 50%;
  transform: translate(-50%, -50%);
}

.esos-home .run-preview-slider--dissonance .run-preview-slider__track-marker--end {
  right: 0;
}

.esos-home .run-preview-slider__handle {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 30px;
  border-radius: 10px;
  background: rgba(36, 36, 36, 0.12);
  color: #242424;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: background-color 120ms var(--easeOut), color 120ms var(--easeOut);
}

.esos-home .run-preview-slider--dissonance[data-preview-slider-engaged="1"] .run-preview-slider__handle,
.esos-home .run-preview-slider--dissonance[data-preview-slider-answered="1"] .run-preview-slider__handle {
  background: #242424;
  color: #fff;
}

.esos-home .run-preview-slider__handle-icon {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.esos-home .run-preview-slider__handle-chevron,
.esos-home .run-preview-slider__handle-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.esos-home .run-preview-slider__handle-chevron svg,
.esos-home .run-preview-slider__handle-line svg {
  display: block;
}

.esos-home .run-preview-slider__handle-chevron--left {
  transform: scaleX(-1);
}

.esos-home .run-preview-dissonance-slider {
  --slider-center: 50%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 10px;
  background: rgba(36, 36, 36, 0.03);
}

.esos-home .run-preview-dissonance-slider__pole {
  font-family: var(--font-base);
  font-size: 20px;
  line-height: 1.2;
  color: #242424;
  text-align: center;
}

.esos-home .run-preview-dissonance-slider__value {
  align-self: center;
  font-family: med, var(--font-fallback);
  font-size: 12px;
  line-height: 1;
  color: #242424;
  white-space: nowrap;
}

.esos-home .run-preview-dissonance-slider__control {
  position: relative;
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: rgba(36, 36, 36, 0.03);
}

.esos-home .run-preview-answers {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.esos-home .run-preview-answer {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 10px;
  background: var(--pill);
  padding: 18px 30px;
  text-align: left;
  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1.2;
  color: #242424;
  cursor: pointer;
  transition: background-color 120ms var(--easeOut), color 120ms var(--easeOut);
}

.esos-home .run-preview-answer.is-selected,
.esos-home .run-preview-answer.is-selected:hover {
  background: #242424;
  color: #fff;
}

.esos-home .run-preview-input {
  width: 100%;
  height: 60px;
  min-height: 60px;
  border: 0;
  outline: none;
  resize: none;
  border-radius: 10px;
  background: var(--fieldBg);
  padding: 18px 30px;
  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1.2;
  color: #242424;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: background-color 120ms var(--easeOut);
}

.esos-home .run-preview-input:hover {
  background: var(--fieldHoverBg);
}

.esos-home .run-preview-input:focus,
.esos-home .run-preview-input:focus:hover {
  background: var(--fieldBg);
}

.esos-home .run-preview-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.esos-home .run-preview-submit {
  width: auto;
  max-width: 100%;
  margin-top: 0;
  min-height: 60px;
  border: 0;
  border-radius: 10px;
  background: var(--pill);
  padding: 18px 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1;
  color: #242424;
  cursor: pointer;
  transition: background-color 120ms var(--easeOut);
}

.esos-home .run-preview-submit.is-disabled,
.esos-home .run-preview-submit[data-disabled="1"],
.esos-home .run-preview-submit[aria-disabled="true"],
.esos-home .run-preview-submit:disabled {
  opacity: var(--dimOpacity);
  cursor: default;
  pointer-events: none;
}

.esos-home .run-preview-submit.is-disabled:hover,
.esos-home .run-preview-submit[data-disabled="1"]:hover,
.esos-home .run-preview-submit[aria-disabled="true"]:hover,
.esos-home .run-preview-submit:disabled:hover {
  background: var(--pill);
}

@media (hover: hover) and (pointer: fine) {
  .esos-home .run-preview-nav-arrow:hover,
  .esos-home .run-preview-nav-arrow:active {
    background: var(--fieldHoverBg);
  }

  .esos-home .run-preview-answer:hover {
    background: var(--fieldHoverBg);
  }

  .esos-home .run-preview-submit:hover {
    background: var(--fieldHoverBg);
  }
}

@media (hover: none), (pointer: coarse) {
  .esos-home .run-preview-nav-arrow:hover {
    background: var(--pill);
  }

  .esos-home .run-preview-answer:hover:not(.is-selected):not(:disabled):not([data-disabled="1"]):not([aria-disabled="true"]) {
    background: var(--pill);
    color: #242424;
  }

  .esos-home .run-preview-submit:hover:not(.is-disabled):not(:disabled):not([data-disabled="1"]):not([aria-disabled="true"]) {
    background: var(--pill);
  }
}

.esos-home .run-preview-banner {
  display: flex;
  height: 30px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 10px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.esos-home .run-preview-banner--warning {
  background: var(--instructionBg);
  color: var(--instructionText);
}


.esos-home .create-section-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 30px;
  padding: 0 16px;

  border-radius: 10px;
  border: 0.5px solid #242424;
  background: transparent;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  color: var(--text);

  white-space: nowrap;
}
.esos-home .create-section-pill.is-disabled {
  opacity: var(--dimOpacity);
}

/* Main input: 60px tall, 20px text */
.esos-home .create-input {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  border: 0;
  outline: none;
  background: var(--fieldBg);
  padding: 0 30px;

  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);

  transition: background-color 120ms var(--easeOut);
}

.esos-home .create-input:hover {
  background: var(--fieldHoverBg);
}

.esos-home .create-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.esos-home .create-input:not(:placeholder-shown) {
  color: rgba(0, 0, 0, 1);
}
.esos-home .create-input:focus::placeholder {
  color: transparent;
}

/* Add button: 60px tall */
.esos-home .create-add {
  height: 30px;
  border-radius: 10px;
  border: 0;

  background: var(--fieldBg);

  cursor: pointer;
  user-select: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 16px;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;

  color: var(--text);

  white-space: nowrap;
  align-self: center;
}

.esos-home .create-input[disabled],
.esos-home .create-textarea--description[disabled] {
  opacity: var(--dimOpacity);
  cursor: default;
  pointer-events: none;
}

.esos-home .create-add:hover {
  background: var(--fieldHoverBg);
  color: var(--text);
}

.esos-home .create-add.is-disabled,
.esos-home .create-add[data-disabled="1"],
.esos-home .create-add[aria-disabled="true"],
.esos-home .create-add:disabled {
  opacity: var(--dimOpacity);
  cursor: default;
  pointer-events: none;
}

.esos-home .create-add.is-disabled:hover,
.esos-home .create-add[data-disabled="1"]:hover,
.esos-home .create-add[aria-disabled="true"]:hover,
.esos-home .create-add:disabled:hover {
  background: var(--fieldBg);
  color: var(--text);
}

.esos-home .client-password-reset-btn {
  width: auto;
  max-width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 10px;
  background: var(--pill);
  padding: 16px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms var(--easeOut), opacity 120ms var(--easeOut);
}

.esos-home .client-password-reset-btn:hover {
  background: var(--fieldHoverBg);
}

.esos-home .client-password-reset-btn.is-disabled,
.esos-home .client-password-reset-btn[data-disabled="1"],
.esos-home .client-password-reset-btn[aria-disabled="true"],
.esos-home .client-password-reset-btn:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.esos-home .client-password-reset-btn.is-disabled:hover,
.esos-home .client-password-reset-btn[data-disabled="1"]:hover,
.esos-home .client-password-reset-btn[aria-disabled="true"]:hover,
.esos-home .client-password-reset-btn:disabled:hover {
  background: var(--pill);
}

.esos-home .create-gap {
  width: 100%;
  flex: 0 0 auto;
}

/* Save button */
.esos-home .create-save {
  position: fixed;
  right: var(--chromeInset);
  top: calc(var(--chromeInset) + var(--u) + var(--g));
  transform: none;

  height: var(--u);
  border-radius: 10px;
  border: 0;
  background: var(--pill);
  padding: 0 15px;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;

  cursor: pointer;
  user-select: none;
  z-index: 50;
}
.esos-home .create-save:hover {
  background: var(--pillBrowseHover);
}

/* Save button disabled (matches create-add behavior) */
.esos-home .create-save.is-disabled,
.esos-home .create-save[data-disabled="1"],
.esos-home .create-save[aria-disabled="true"] {
  opacity: var(--dimOpacity);
  cursor: default;
  pointer-events: none;
}

.esos-home .create-save.is-disabled:hover,
.esos-home .create-save[data-disabled="1"]:hover,
.esos-home .create-save[aria-disabled="true"]:hover {
  background: var(--pill);
}

.esos-home .create-save--inline {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
}

.esos-home .edit-instruction-pill {
  position: fixed;
  left: 50%;
  top: var(--chromeInset);
  transform: translateX(-50%);
  justify-content: center;
  text-align: center;
  background: var(--instructionBg);
  color: var(--instructionText);
  pointer-events: none;
  z-index: 49;
}

.esos-home .run-published-status-pill,
.esos-home .published-poll-pill,
.esos-home .run-draft-status-pill {
  position: fixed;
  left: var(--published-pill-x, 50%);
  top: var(--chromeInset);
  transform: translateX(-50%);
  justify-content: center;
  text-align: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  pointer-events: none;
  z-index: 49;
}

.esos-home .run-published-status-pill,
.esos-home .published-poll-pill {
  border: 1px solid #00AC14;
  background: rgba(3, 204, 19, 0.0);
  color: #00AC14;
}

.esos-home .run-draft-status-pill {
  border: 1px solid #6D8CFB;
  background: rgba(109, 140, 251, 0.0);
  color: #6D8CFB;
}

.esos-home .edit-link-open-link {
  background: var(--browseLinkBg);
  color: var(--browseLinkText);
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
}

.esos-home .edit-link-open-link:hover {
  background: var(--browseLinkHoverBg);
}

.esos-home .edit-link-open-link .pill-ne {
  display: inline-flex;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
}

.esos-home .edit-link-open-link .pill-ne svg {
  display: block;
  width: 7px;
  height: 7px;
}

.esos-home .edit-link-open-link .pill-ne svg path {
  stroke: currentColor;
}

.esos-home .create-textarea--description {
  position: static;
  inset: auto;
  width: 100%;
  height: 120px;
  min-height: 120px;

  border-radius: 10px;
  border: 0;
  outline: none;
  resize: none;

  background: var(--fieldBg);
  padding: 18px 30px;

  font-family: var(--font-base);
  font-size: var(--formInputFont) !important;
  line-height: 1.2;
  color: var(--text) !important;

  overflow-x: hidden;
  overflow-y: hidden;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;

  transition: background-color 120ms var(--easeOut);
}

.esos-home .create-textarea--description:hover {
  background: var(--fieldHoverBg);
}

.esos-home .create-textarea--description::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.esos-home .create-textarea--description.create-textarea--small {
  height: 60px;
  min-height: 60px;
}


/* Warning bar (30px tall) */
.esos-home .create-warn {
  width: 100%;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #F00;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: #E80000;
  padding: 0 15px;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}


/* Green hint banner */
.esos-home .create-warn--ok {
  background: rgba(111, 255, 0, 0.08);
  border-color: transparent;
  color: #5aad1a;
}

.esos-home .edit-delete-actions {
  position: fixed;
  right: var(--chromeInset);
  bottom: var(--chromeInset);
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 50;
}

.esos-home .edit-delete-actions .create-save {
  position: static;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
}

.esos-home .client-password-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--chromeInset);
}

.esos-home .client-password-modal__backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.esos-home .client-password-modal__card {
  position: relative;
  width: min(520px, calc(100vw - (var(--chromeInset) * 2)));
  border-radius: 10px;
  background: #fff;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--text);
  text-align: center;
  box-shadow: none;
}

.esos-home .client-password-modal__note {
  width: 100%;
  min-height: 30px;
  border-radius: 10px;
  background: var(--instructionBg);
  color: var(--instructionText);
  padding: 8px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

.esos-home .client-password-modal__field {
  width: 100%;
  min-height: 60px;
  border-radius: 10px;
  background: var(--fieldBg);
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1.2;
  color: var(--text);
  text-align: left;
  user-select: text;
  overflow-wrap: anywhere;
}

.esos-home .client-password-modal__error {
  width: 100%;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.35;
  color: #dd0303;
  text-align: center;
}

.esos-home .client-password-modal__copy {
  margin-top: 0;
}

.esos-home .edit-delete-confirm {
  display: inline-flex;
  height: 30px;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.10);
  color: #E80000;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.esos-home .filter-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.esos-home .filter-entrypoint {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.esos-home .filter-qstack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--g15);
}

.esos-home .filter-question {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.esos-home .filter-add-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g);
}

.esos-home .filter-answer-row {
  cursor: default;
}

.esos-home .filter-answer {
  cursor: text;
  padding-right: 106px;
}

.esos-home .filter-answer-toggle {
  position: absolute;
  top: 15px;
  right: 61px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: var(--fieldBg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  cursor: pointer;
  z-index: 1;
  transition: background-color 120ms var(--easeOut);
}

.esos-home .filter-answer-toggle:hover {
  background: var(--fieldHoverBg);
}

.esos-home .filter-answer-toggle[data-qualified="1"] {
  background: #242424;
}

.esos-home .filter-answer-toggle[data-qualified="1"]:hover {
  background: #242424;
}

.esos-home .filter-answer-qualifier-dot {
  position: absolute;
  top: 15px;
  right: 61px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #242424;
  display: none;
  pointer-events: none;
  z-index: 1;
}

.esos-home .sig-answer--delete-slot {
  padding-right: 60px;
}

.esos-home .create-code-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: var(--gSectionBreak) 0;
}

.esos-home .create-code-wrap--with-submission-codes {
  margin: var(--gSectionBreak) 0 calc(var(--g15) * 3);
}

.esos-home .create-code-btn {
  width: 120px;
  height: 120px;
  border: 0;
  border-radius: 12px;
  background: var(--pasteBoxCodeBg);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-base);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--pasteBoxCodeText);

  transition: background-color 0ms linear;
}

.esos-home .create-code-btn:hover {
  background: var(--pasteBoxCodeHoverBg);
}

.esos-home .create-code-btn.is-disabled,
.esos-home .create-code-btn[data-disabled="1"],
.esos-home .create-code-btn[aria-disabled="true"],
.esos-home .create-code-btn:disabled {
  cursor: default;
  pointer-events: none;
}

.esos-home .create-code-btn--copy-link {
  width: auto;
  padding: 0 30px;
  background: var(--browseRunPublishedBg);
  color: var(--browseRunPublishedText);
  white-space: nowrap;
}

.esos-home .create-code-btn--copy-link:hover {
  background: var(--browseRunPublishedHoverBg);
}

.esos-home .create-code-btn--copy-link .create-code-btn__label {
  position: static;
  inset: auto;
}

.esos-home .create-code-btn--close-survey {
  width: auto;
  padding: 0 30px;
  background: rgba(255, 0, 0, 0.10);
  color: #E80000;
  white-space: nowrap;
}

.esos-home .create-code-btn--close-survey:hover {
  background: rgba(255, 0, 0, 0.18);
}

.esos-home .create-code-btn--survey-closed {
  width: auto;
  padding: 0 30px;
  background: var(--browseRunPublishedBg);
  color: var(--browseRunPublishedText);
  white-space: nowrap;
  cursor: default;
  pointer-events: none;
}

.esos-home .create-code-btn--survey-closed:hover {
  background: var(--browseRunPublishedBg);
}

.esos-home .create-code-btn--close-survey .create-code-btn__label,
.esos-home .create-code-btn--survey-closed .create-code-btn__label {
  position: static;
  inset: auto;
}

.esos-home .published-survey-actions {
  width: min(var(--formW), 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
}

.esos-home .published-survey-actions .create-code-btn {
  width: auto;
  max-width: none;
  justify-self: center;
}

.esos-home .published-submission-codes {
  width: min(var(--formW), 100%);
  margin: 0 auto var(--gSectionBreak);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.esos-home .published-submission-codes .create-section-pill {
  align-self: center;
}

.esos-home .published-submission-codes__fields {
  margin-top: var(--g15);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--browseColGap, var(--g));
}

.esos-home .published-submission-codes__fields--single,
.esos-home .published-submission-codes__fields[data-field-count="1"] {
  grid-template-columns: 1fr;
}

.esos-home .published-submission-codes__input {
  min-width: 0;
}

.esos-home .published-submission-codes[data-submission-settings-locked="1"] .published-submission-codes__input {
  opacity: 1;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  background: var(--fieldBg);
  cursor: default;
  caret-color: transparent;
  pointer-events: none;
  transition: none;
}

.esos-home .published-submission-codes[data-submission-settings-locked="1"] .published-submission-codes__input:hover,
.esos-home .published-submission-codes[data-submission-settings-locked="1"] .published-submission-codes__input:focus,
.esos-home .published-submission-codes[data-submission-settings-locked="1"] .published-submission-codes__input:focus:hover,
.esos-home .published-submission-codes[data-submission-settings-locked="1"] .published-submission-codes__input:active {
  background: var(--fieldBg);
  outline: none;
  box-shadow: none;
}

.esos-home .published-submission-codes__target {
  margin-top: var(--g15);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.esos-home .published-submission-codes__target-fields {
  margin-top: var(--g15);
}

.esos-home .published-submission-codes__input--full {
  width: 100%;
}

.esos-home .published-submission-codes__actions {
  margin-top: var(--g15);
  display: flex;
  justify-content: center;
}

.esos-home .published-submission-codes__submit {
  min-width: 110px;
}


/* =========================================================
   Run actions: stack + content-width buttons
   ========================================================= */

.esos-home .run-actions {
  position: fixed;
  right: var(--chromeInset);
  top: calc(var(--chromeInset) + var(--u) + var(--g));
  transform: none;
  display: flex;
  flex-direction: column;
  gap: var(--g);          /* 4px */
  align-items: flex-end;  /* IMPORTANT: prevents stretch */
  z-index: 50;
}

/* Undo the global fixed positioning on create-save inside the stack */
.esos-home .run-actions .create-save {
  position: static;
  right: auto;
  top: auto;
  transform: none;

  width: auto;            /* content-driven */
  padding: 0 15px;        /* 15px L/R */
  margin: 0;
}

.esos-home .run-actions .run-tool-action-spacer {
  display: none;
  height: var(--u);
  width: 1px;
  flex: 0 0 var(--u);
  pointer-events: none;
}

.esos-home .run-actions .run-tool-action {
  position: static;
  right: auto;
  top: auto;
  transform: none;

  height: var(--u);
  border-radius: 10px;
  border: 0;
  background: #242424;
  color: #fff;
  -webkit-text-fill-color: currentColor;
  padding: 0 15px;
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-align: left;
  text-transform: none;
  user-select: none;
  appearance: none;
  cursor: pointer;
}

.esos-home .run-actions .run-tool-action:hover {
  background: #242424;
  color: #fff;
}

.esos-home .run-actions .run-tool-action > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.esos-home .run-actions .run-tool-action .pill-ne {
  display: inline-flex;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
}

.esos-home .run-actions .run-tool-action .pill-ne svg {
  display: block;
  width: 7px;
  height: 7px;
}

.esos-home .run-actions .run-tool-action .pill-ne svg path {
  stroke: currentColor;
}

.esos-home .run-actions .run-publish-stack {
  display: flex;
  flex-direction: column;
  gap: var(--g);
  align-items: flex-end;
}

.esos-home .run-actions .run-publish-stack .create-save.is-disabled,
.esos-home .run-actions .run-publish-stack .create-save[data-disabled="1"],
.esos-home .run-actions .run-publish-stack .create-save[aria-disabled="true"] {
  opacity: 0.72;
  background: var(--pill);
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

.esos-home .run-actions .run-publish-stack[data-run-readonly="1"] .create-save.is-disabled,
.esos-home .run-actions .run-publish-stack[data-run-readonly="1"] .create-save[data-disabled="1"],
.esos-home .run-actions .run-publish-stack[data-run-readonly="1"] .create-save[aria-disabled="true"] {
  opacity: var(--dimOpacity);
}

.esos-home .run-actions .run-publish-link {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  color: inherit;
  opacity: 0.72;
  text-align: right;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Preview: 15px | PREVIEW | 15px | icon | 15px */
.esos-home .run-actions .create-save--preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;              /* the 15px between text and icon */
}

.esos-home .run-actions .run-preview-icon {
  display: inline-flex;
  width: 8px;
  height: 8px;
}

.esos-home .run-actions .run-preview-icon svg {
  display: block;
  width: 8px;
  height: 8px;
}

.esos-home .run-actions--pane {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  z-index: auto;
}

/* =========================================================
   Dimming modes (CREATE screens)
   ========================================================= */
.esos-home[data-dimmode="none"] .center {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--dimFadeDur) var(--easeOut);
}
.esos-home[data-dimmode="panel"] .center {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dimFadeDur) var(--easeOut);
}
.esos-home[data-dimmode="dropdown"] .center {
  opacity: 1;
}

/* disable everything in the form… */
.esos-home[data-dimmode="dropdown"] .create-wrap * {
  pointer-events: none;
}

/* …except dropdown controls themselves (and nav) */
.esos-home[data-dimmode="dropdown"] .create-select-wrap,
.esos-home[data-dimmode="dropdown"] #project-client-select,
.esos-home[data-dimmode="dropdown"] #link-client-select,
.esos-home[data-dimmode="dropdown"] #link-project-select,
.esos-home[data-dimmode="dropdown"] #poll-client-select,
.esos-home[data-dimmode="dropdown"] #poll-project-select,
.esos-home[data-dimmode="dropdown"] #poll-type-select,
.esos-home[data-dimmode="dropdown"] #product-type-select,
.esos-home[data-dimmode="dropdown"] #run-client-select,
.esos-home[data-dimmode="dropdown"] #run-project-select,
.esos-home[data-dimmode="dropdown"] #run-poll-select,
.esos-home[data-dimmode="dropdown"] #run-polltype-select,
.esos-home[data-dimmode="dropdown"] #run-producttype-select,
.esos-home[data-dimmode="dropdown"] .create-select-list,
.esos-home[data-dimmode="dropdown"] .create-select-item {
  pointer-events: auto;
}
.esos-home[data-dimmode="dropdown"] .leftmenu {
  pointer-events: auto;
}

/* =========================================================
   Create dropdown — animated open (scale + stagger)
   (used by Project / Poll / Link / Run)
   ========================================================= */

:root {
  --ddOpenDur: 150ms;
  --ddCloseDur: 90ms;
  --ddEaseOut: cubic-bezier(0.2, 0.9, 0.2, 1);
  --ddEaseIn: cubic-bezier(0.4, 0, 0.8, 0.2);

  --ddItemDur: 90ms;
  --ddItemStagger: 22ms;
  --ddItemDelayBase: 25ms;
  --ddItemLift: 6px;
}

/* Wrapper never changes height (prevents layout shift) */
.esos-home .create-select-wrap {
  width: 100%;
  position: relative;
  height: var(--dropdownRowH);
  isolation: isolate;
  z-index: 1000;
}

/* Closed trigger row */
.esos-home .create-select {
  width: 100%;
  height: var(--dropdownRowH);
  border-radius: 10px;
  border: 0;
  background: var(--fieldBg);
  padding: 0 15px 0 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  cursor: pointer;
  user-select: none;

  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: rgba(0, 0, 0, 0.4);

  position: relative;
  z-index: 2;

  transition: background-color 0ms linear;
}

.esos-home .create-select:hover {
  background: var(--fieldHoverBg);
  color: rgba(0, 0, 0, 1);
}

.esos-home .create-select[data-hasvalue="1"] {
  color: rgba(0, 0, 0, 1);
}

.esos-home .create-select-arrow {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--fieldBg);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  flex: 0 0 auto;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
  color: var(--text);

  transition: background-color 0ms linear;
}

.esos-home .create-select-arrow svg {
  display: block;
  flex-shrink: 0;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.esos-home .create-select:hover .create-select-arrow {
  background: var(--fieldHoverBg);
}

/* Disabled dropdown row
   - If disabled AND empty: dim (can’t interact yet)
   - If disabled BUT has value (auto-selected): full opacity + black text (still non-interactive)
*/
.esos-home .create-select[data-disabled="1"],
.esos-home .create-select[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* default disabled (no value yet) */
.esos-home .create-select[data-disabled="1"][data-hasvalue="0"],
.esos-home .create-select[aria-disabled="true"][data-hasvalue="0"] {
  opacity: var(--dimOpacity);
  color: rgba(0, 0, 0, 0.4);
}

/* auto-selected disabled (has value) */
.esos-home .create-select[data-disabled="1"][data-hasvalue="1"],
.esos-home .create-select[aria-disabled="true"][data-hasvalue="1"] {
  opacity: 1;
  color: rgba(0, 0, 0, 1);
}

/* hover should do nothing (since pointer-events none, this is just safety) */
.esos-home .create-select[data-disabled="1"]:hover,
.esos-home .create-select[aria-disabled="true"]:hover {
  background: var(--createSurface, var(--pill));
}

/* Open panel overlay */
.esos-home .create-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5001;
  transform-origin: top center;

  background: var(--dropdownMask, var(--createSurface, var(--pill)));
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g);

  padding-top: calc((var(--dropdownRowH) - var(--dropdownItemH)) / 2);
  padding-bottom: calc((var(--dropdownRowH) - var(--dropdownItemH)) / 2);

  height: auto;
  max-height: var(--dropdownMaxH);

  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.esos-home .create-select-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Closed state */
.esos-home .create-select-wrap[data-open="0"] .create-select-list {
  pointer-events: none;

  transform-origin: top center;
  transform: scaleY(0.98);
  opacity: 0;

  transition: transform var(--ddCloseDur) var(--ddEaseIn),
    opacity 0ms linear var(--ddCloseDur);
}

/* Open state */
.esos-home .create-select-wrap[data-open="1"] .create-select-list {
  pointer-events: auto;
  background: var(--fieldDropdownOpenBg);

  transform-origin: top center;
  transform: scaleY(1);
  opacity: 1;

  transition: transform var(--ddOpenDur) var(--ddEaseOut), opacity 0ms linear 0ms;
}

.esos-home .create-select-wrap[data-open="1"]:hover .create-select-list {
  background: var(--fieldDropdownOpenHoverBg);
}

/* When open: keep the chevron as an arrow-only close target above the panel */
.esos-home .create-select-wrap[data-open="1"] .create-select {
  position: absolute;
  top: calc((var(--dropdownRowH) - 30px) / 2);
  right: 15px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  z-index: 5002;
  justify-content: center;
}

.esos-home .create-select-wrap[data-open="1"] .create-select:hover {
  background: transparent;
}

.esos-home .create-select-wrap[data-open="1"] .create-select-label {
  display: none;
}

.esos-home .create-select-wrap[data-open="1"] .create-select-arrow {
  display: inline-flex;
  margin-left: 0;
  pointer-events: auto;
  z-index: 5003;
}

.esos-home .create-select-wrap[data-open="1"] .create-select-arrow svg {
  transform: rotate(180deg);
}

/* When open, bring THIS wrap above all other rows */
.esos-home .create-select-wrap[data-open="1"] {
  z-index: 5000;
}

/* Items */
.esos-home .create-select-item {
  border: 0;
  border-radius: 10px;
  background: var(--dropdownItemBg);

  margin-left: var(--dropdownInsetL);

  padding: var(--dropdownItemPadY) var(--dropdownPadX) var(--dropdownItemPadY)
    calc(var(--dropdownPadX) - var(--dropdownInsetL));

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;

  cursor: pointer;
  user-select: none;

  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: var(--text);

  white-space: nowrap;

  opacity: 0;
  transform: translateY(var(--ddItemLift));
}
.esos-home .create-select-item:hover {
  background: var(--dropdownItemHover);
}

.esos-home .create-select-item--new-client {
  margin-top: var(--g15);
}

.esos-home .create-select-wrap[data-open="1"] .create-select-item {
  transition: opacity var(--ddItemDur) var(--ddEaseOut),
    transform var(--ddItemDur) var(--ddEaseOut);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item {
  opacity: 1;
  transform: translateY(0);
}
.esos-home .create-select-wrap[data-open="0"] .create-select-item {
  transition: opacity 60ms var(--ddEaseIn), transform 60ms var(--ddEaseIn);
  opacity: 0;
  transform: translateY(var(--ddItemLift));
}

/* Stagger delays (first 12) */
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(1) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 0);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(2) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 1);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(3) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 2);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(4) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 3);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(5) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 4);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(6) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 5);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(7) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 6);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(8) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 7);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(9) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 8);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(10) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 9);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(11) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 10);
}
.esos-home .create-select-wrap[data-open="1"] .create-select-item:nth-child(12) {
  transition-delay: calc(var(--ddItemDelayBase) + var(--ddItemStagger) * 11);
}

.esos-home button.create-select,
.esos-home button.create-select-item {
  appearance: none;
}

/* Never allow centered text in form rows (buttons default to center) */
.esos-home .create-select,
.esos-home .create-input,
.esos-home .sig-field {
  text-align: left;
}

/* Ensure wrapped dropdown labels stay left-aligned */
.esos-home .create-select-label {
  flex: 1 1 auto;
  text-align: left;
}

/* Keep arrow pinned to the right even when label wraps */
.esos-home .create-select-arrow {
  margin-left: auto;
  flex: 0 0 auto;
}


/* =========================================================
   code button
   ========================================================= */


.esos-home .create-code-btn {
  position: relative;
}

.esos-home .create-code-btn__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.esos-home .create-code-btn__label--hover {
  opacity: 0;
}

.esos-home .create-code-btn:hover .create-code-btn__label--default {
  opacity: 0;
}

.esos-home .create-code-btn:hover .create-code-btn__label--hover {
  opacity: 1;
}

.form-screen {
  position: relative;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-screen-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-screen-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 520px; /* adjust to taste */
  transform: translate(-50%, calc(-50% - 170px));
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.form-screen-warn {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}


/* =========================================================
   Form (textarea)
   ========================================================= */
.esos-home .create-textarea {
  width: 100%;
  height: 260px;
  border-radius: 10px;
  border: 0;
  outline: none;
  background: var(--pill);
  padding: 20px 30px;

  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);

  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre;
}
.esos-home .create-textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.esos-home .create-textarea--form {
  position: static;
  inset: auto;
  width: 100%;
  height: 260px;
  border-radius: 10px;
  border: 0;
  outline: none;
  background: var(--pill);
  padding: 20px 30px;

  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.3;
  color: rgba(0, 0, 0, 0.6);

  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: pre;
}

.esos-home textarea.create-textarea--description {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-x: hidden;
}



/* =========================================================
   SCALE reveal system (flyouts)
   ========================================================= */
.esos-home .flyout .h-pill,
.esos-home .hflyout .h-pill {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.esos-home .flyout .h-pill::before,
.esos-home .hflyout .h-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pillBrowseBase);
  border-radius: inherit;

  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--openDur) var(--easeOut),
    background-color 0ms linear;
  pointer-events: none;
  z-index: 0;
}
.esos-home .flyout[data-open="1"] .h-pill::before,
.esos-home .hflyout[data-open="1"] .h-pill::before {
  transform: scaleX(1);
}
.esos-home .flyout[data-open="0"] .h-pill::before,
.esos-home .hflyout[data-open="0"] .h-pill::before {
  transition: transform 0ms linear var(--closeDur),
    background-color 0ms linear var(--closeDur);
  transform: scaleX(0);
}
.esos-home .flyout button.h-pill.h-pill--selectable:hover::before,
.esos-home .flyout button.h-pill.h-pill--selectable.is-hover::before,
.esos-home .hflyout button.h-pill.h-pill--selectable:hover::before,
.esos-home .hflyout button.h-pill.h-pill--selectable.is-hover::before {
  background-color: var(--pillBrowseHover);
}
.esos-home .flyout .h-pill > span,
.esos-home .hflyout .h-pill > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
  transition: opacity var(--textFadeDur) var(--easeOut) var(--textDelay);
}
.esos-home .flyout[data-open="1"] .h-pill > span,
.esos-home .hflyout[data-open="1"] .h-pill > span {
  opacity: 1;
}
.esos-home .flyout[data-open="0"] .h-pill > span,
.esos-home .hflyout[data-open="0"] .h-pill > span {
  opacity: 0;
  transition: opacity var(--closeDur) var(--easeIn);
}

/* Stagger (vertical) */
.esos-home .flyout[data-open="1"] .h-pill:nth-child(1)::before {
  transition-delay: 0ms, 0ms;
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(2)::before {
  transition-delay: calc(var(--staggerStep) * 1), 0ms;
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(3)::before {
  transition-delay: calc(var(--staggerStep) * 2), 0ms;
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(4)::before {
  transition-delay: calc(var(--staggerStep) * 3), 0ms;
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(5)::before {
  transition-delay: calc(var(--staggerStep) * 4), 0ms;
}

.esos-home .flyout[data-open="1"] .h-pill:nth-child(1) > span {
  transition-delay: calc(var(--textDelay) + 0ms);
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(2) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 1));
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(3) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 2));
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(4) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 3));
}
.esos-home .flyout[data-open="1"] .h-pill:nth-child(5) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 4));
}

/* Stagger (horizontal) */
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(1)::before {
  transition-delay: 0ms, 0ms;
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(2)::before {
  transition-delay: calc(var(--staggerStep) * 1), 0ms;
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(3)::before {
  transition-delay: calc(var(--staggerStep) * 2), 0ms;
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(4)::before {
  transition-delay: calc(var(--staggerStep) * 3), 0ms;
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(5)::before {
  transition-delay: calc(var(--staggerStep) * 4), 0ms;
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(6)::before {
  transition-delay: calc(var(--staggerStep) * 5), 0ms;
}

.esos-home .hflyout[data-open="1"] .h-pill:nth-child(1) > span {
  transition-delay: calc(var(--textDelay) + 0ms);
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(2) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 1));
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(3) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 2));
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(4) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 3));
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(5) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 4));
}
.esos-home .hflyout[data-open="1"] .h-pill:nth-child(6) > span {
  transition-delay: calc(var(--textDelay) + (var(--staggerStep) * 5));
}

/* =========================================================
   HOME — Browse (multi-column)
   ========================================================= */
.esos-home .browse-wrap {
  position: absolute;
  left: calc(30px + var(--u) + var(--g));
  top: var(--browseWrapTop, 50%);
  transform: translateY(var(--browseWrapTranslateY, calc(-50% - 9px)));
  overflow: visible;

  display: flex;
  flex-direction: row;
  gap: var(--browseColGap);
  align-items: flex-start;

  z-index: 20;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--openDur) var(--easeOut);
}
.esos-home .browse-wrap[data-open="1"] {
  opacity: 1;
  pointer-events: auto;
}
.esos-home .browse-wrap[data-open="0"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--closeDur) var(--easeIn);
}

.esos-home .browse-wrap .bcol {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--g);
  justify-content: flex-start;
  height: auto;
  max-height: var(--browseMaxH);
  width: max-content;
  transform: translateY(var(--browseColOffsetY, 0px));
}
.esos-home .browse-wrap .bcol::before,
.esos-home .browse-wrap .bcol::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--browseFadeH);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--easeOut);
  z-index: 2;
}
.esos-home .browse-wrap .bcol::before {
  top: calc(15px + var(--g));
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(244, 242, 239, 0) 100%);
}
.esos-home .browse-wrap .bcol::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(244, 242, 239, 0) 100%);
}
.esos-home .browse-wrap .bcol[data-fade-top="1"]::before {
  opacity: 1;
}
.esos-home .browse-wrap .bcol[data-fade-bottom="1"]::after {
  opacity: 1;
}
.esos-home .browse-wrap .bcol[data-has="0"] {
  display: none;
}

/* Column header (ONLY border allowed besides Hi pill? This already existed in your file)
   If you must keep “no borders except Hi pill”, remove the border below. */
.esos-home .browse-wrap .bcol-head {
  position: relative;
  overflow: hidden;
  z-index: 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 15px;
  padding: 0 15px;

  border-radius: 5px;
  border: 0.5px solid rgba(0,0,0,.2);
  background: transparent;

  align-self: flex-start;
  user-select: none;
  white-space: nowrap;
}
.esos-home .browse-wrap .bcol-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;

  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--openDur) var(--easeOut);
  pointer-events: none;
  z-index: 0;
}
.esos-home .browse-wrap[data-open="1"] .bcol-head::before {
  transform: scaleX(1);
  transition-delay: calc(var(--c, 0) * var(--staggerStep));
}
.esos-home .browse-wrap[data-open="0"] .bcol-head::before {
  transition: transform 0ms linear var(--closeDur);
  transform: scaleX(0);
}

.esos-home .browse-wrap .bcol-head > span {
  position: relative;
  z-index: 1;
  font-family: var(--font-base);
  color: rgba(0, 0, 0, 0.2);
  font-size: 8px;
  line-height: 1;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  white-space: nowrap;

  opacity: 0;
  transition: opacity var(--textFadeDur) var(--easeOut) var(--textDelay);
}
.esos-home .browse-wrap[data-open="1"] .bcol-head > span {
  opacity: 1;
  transition-delay: calc(var(--textDelay) + (var(--c, 0) * var(--staggerStep)));
}
.esos-home .browse-wrap[data-open="0"] .bcol-head > span {
  opacity: 0;
  transition: opacity var(--closeDur) var(--easeIn);
}

.esos-home .browse-wrap .bcol-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--g);
  max-height: calc(var(--browseMaxH) - 15px - var(--g));
  overflow: auto;
  margin: 0;
  padding: var(--browseListPadY) 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.esos-home .browse-wrap .bcol-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Browse pills reveal */
.esos-home .browse-wrap button.h-pill.h-pill--selectable,
.esos-home .browse-wrap a.h-pill.h-pill--selectable {
  position: relative;
  overflow: hidden;
  background: transparent;
  opacity: 1;
  transition: opacity var(--dimFadeDur) var(--easeOut);
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pillBrowseBase);
  border-radius: inherit;

  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--openDur) var(--easeOut),
    background-color 0ms linear;
  pointer-events: none;
  z-index: 0;
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable:hover::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable:hover::before {
  background-color: var(--pillBrowseHover);
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-active:not(.is-link):not(.is-tool):not(.is-draft):not(.is-published):hover::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-active:not(.is-link):not(.is-tool):not(.is-draft):not(.is-published):hover::before {
  background-color: var(--pillBrowseBase);
}

.esos-home .browse-wrap[data-open="0"] button.h-pill.h-pill--selectable::before,
.esos-home .browse-wrap[data-open="0"] a.h-pill.h-pill--selectable::before {
  transform: scaleX(0);
}
.esos-home .browse-wrap[data-open="0"] button.h-pill.h-pill--selectable > span,
.esos-home .browse-wrap[data-open="0"] a.h-pill.h-pill--selectable > span {
  opacity: 0;
}

.esos-home
  .browse-wrap[data-open="1"]
  button.h-pill.h-pill--selectable[data-reveal="1"]::before,
.esos-home
  .browse-wrap[data-open="1"]
  a.h-pill.h-pill--selectable[data-reveal="1"]::before {
  transform: scaleX(1);
  transition-delay: calc(var(--i, 0) * var(--staggerStep)), 0ms;
}

.esos-home
  .browse-wrap[data-open="1"]
  button.h-pill.h-pill--selectable[data-reveal="0"]::before,
.esos-home
  .browse-wrap[data-open="1"]
  a.h-pill.h-pill--selectable[data-reveal="0"]::before {
  transition: transform 0ms linear var(--closeDur);
  transform: scaleX(0);
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable > span,
.esos-home .browse-wrap a.h-pill.h-pill--selectable > span {
  position: relative;
  z-index: 1;
  display: inline-block;
  opacity: 0;
  transition: opacity var(--textFadeDur) var(--easeOut) var(--textDelay);
}

.esos-home
  .browse-wrap[data-open="1"]
  button.h-pill.h-pill--selectable[data-reveal="1"]
  > span,
.esos-home
  .browse-wrap[data-open="1"]
  a.h-pill.h-pill--selectable[data-reveal="1"]
  > span {
  opacity: 1;
  transition-delay: calc(var(--textDelay) + (var(--i, 0) * var(--staggerStep)));
}

.esos-home
  .browse-wrap[data-open="1"]
  button.h-pill.h-pill--selectable[data-reveal="0"]
  > span,
.esos-home
  .browse-wrap[data-open="1"]
  a.h-pill.h-pill--selectable[data-reveal="0"]
  > span {
  opacity: 0;
  transition: opacity var(--closeDur) var(--easeIn);
}

/* Breadcrumb dimming */
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-dim,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-dim {
  opacity: var(--dimOpacity);
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-active,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-active {
  opacity: 1;
}

/* =========================================================
   POLLS & LINKS — pill variants
   ========================================================= */

/* Shared layout for pills that include a right-side arrow */
.esos-home .browse-wrap .h-pill.h-pill--with-arrow {
  justify-content: space-between;
  gap: 12px;
}

.esos-home .browse-wrap .h-pill.h-pill--with-arrow > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Right-side 6x6 arrow container */
.esos-home .browse-wrap .pill-ne {
  display: inline-flex;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
}
.esos-home .browse-wrap .pill-ne svg {
  display: block;
  width: 7px;
  height: 7px;
}

/* LINK pills */
.esos-home .browse-wrap .h-pill.is-link::before {
  background: var(--browseLinkBg) !important;
}
.esos-home .browse-wrap .h-pill.is-link > span {
  color: var(--browseLinkText);
}
.esos-home .browse-wrap .h-pill.is-link > span:first-child {
  font-size: 10px;
}
.esos-home .browse-wrap .h-pill.is-link .pill-ne svg path {
  stroke: currentColor;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-link.is-active::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-link.is-active::before {
  background: var(--browseLinkBg) !important;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-link:hover::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-link:hover::before {
  background-color: var(--browseLinkHoverBg) !important;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-link.is-active:hover::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable.is-link.is-active:hover::before {
  background-color: var(--browseLinkBg) !important;
}

/* TOOL pills */
.esos-home .browse-wrap .h-pill.is-tool::before,
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-tool:hover::before,
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-tool.is-active::before,
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-tool.is-active:hover::before {
  background: #242424 !important;
}
.esos-home .browse-wrap .h-pill.is-tool > span {
  color: #fff;
}
.esos-home .browse-wrap .h-pill.is-tool .pill-ne svg path {
  stroke: currentColor;
}

/* DRAFT run pills */
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-draft::before {
  background: var(--browseRunDraftBg);
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-draft.is-active::before {
  background: var(--browseRunDraftBg) !important;
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-draft:hover::before {
  background-color: var(--browseRunDraftHoverBg) !important;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-draft.is-active:hover::before {
  background-color: var(--browseRunDraftBg) !important;
}
.esos-home .browse-wrap .h-pill.is-draft > span,
.esos-home .browse-wrap .h-pill.is-draft .pill-draft {
  color: var(--browseRunDraftText);
}

/* PUBLISHED run pills */
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-published::before {
  background: var(--browseRunPublishedBg);
}

.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-published.is-active::before {
  background: var(--browseRunPublishedBg) !important;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-published:hover::before {
  background-color: var(--browseRunPublishedHoverBg) !important;
}
.esos-home .browse-wrap button.h-pill.h-pill--selectable.is-published.is-active:hover::before {
  background-color: var(--browseRunPublishedBg) !important;
}

.esos-home .browse-wrap .h-pill.is-published > span {
  color: var(--browseRunPublishedText);
}

/* "DRAFT" tag */
.esos-home .browse-wrap .pill-draft {
  font-family: var(--font-base);
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 1;
}

/* Links should never be underlined */
.esos-home .browse-wrap a.h-pill,
.esos-home .browse-wrap a.h-pill:hover,
.esos-home .browse-wrap a.h-pill:focus,
.esos-home .browse-wrap a.h-pill:active {
  text-decoration: none;
}

/* Arrow container */
.esos-home .browse-wrap .pill-ne {
  display: inline-flex;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
}
.esos-home .browse-wrap .pill-ne svg {
  display: block;
  width: 7px;
  height: 7px;
}
/* =========================================================
   Pastebox (run/progressive run only)
   ========================================================= */

.esos-home .pastebox {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background: var(--pasteBoxCodeBg);
  overflow: hidden;

  transition:
    background-color 120ms var(--easeOut),
    height var(--openDur) var(--easeOut),
    opacity var(--closeDur) var(--easeIn);
}

.esos-home .pastebox:hover {
  background: var(--pasteBoxCodeHoverBg);
}

.esos-home .pastebox.is-expanded {
  height: 260px;
}

.esos-home .pastebox.is-collapsing {
  pointer-events: none;
}

.esos-home .pastebox-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 30px;
  z-index: 2;
  pointer-events: none;

  opacity: 1;
  transition: opacity 90ms var(--easeOut);

  font-family: var(--font-base);
  font-size: var(--formInputFont);   /* 20px */
  line-height: 1;
  color: var(--pasteBoxCodeText);
}

.esos-home .pastebox.is-expanded .pastebox-placeholder,
.esos-home .pastebox.is-collapsing .pastebox-placeholder,
.esos-home .pastebox[data-hascontent="1"] .pastebox-placeholder {
  opacity: 0;
}

.esos-home .create-textarea--paste {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  resize: none;
  border-radius: 10px;
  background: transparent;

  padding: 20px 30px;
  padding-bottom: 75px;

  font-family: var(--font-base);
  font-size: 15px;
  line-height: 1.3;
  color: var(--pasteBoxCodeText);
  white-space: pre;

  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  scrollbar-width: none;
  -ms-overflow-style: none;

  opacity: 1;
  transition: opacity 90ms var(--easeOut);
}

.esos-home .create-textarea--paste::placeholder {
  color: var(--pasteBoxCodeText);
}

.esos-home .create-textarea--paste::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* collapsed state: textarea should not block the click target */
.esos-home .pastebox.is-collapsed .create-textarea--paste {
  opacity: 1;
  pointer-events: auto;
  padding-top: 24px;
  padding-bottom: 24px;
  overflow-y: hidden;
}

/* expanded state: textarea is interactive */
.esos-home .pastebox.is-expanded .create-textarea--paste {
  opacity: 1;
  pointer-events: auto;
}

.esos-home .pastebox-apply {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);

  width: auto;
  min-width: 0;
  margin: 0;
  top: auto;
  right: auto;

  height: var(--u);
  padding: 0 15px;
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  z-index: 3;
}



/* =========================================================
   PRUNS
   ========================================================= */

/* RUNS column pills: fixed width + centered number */
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill {
  justify-content: space-between;
  padding: 0 15px;
  text-align: left;
  gap: 10px;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable[data-run-id] {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--dimFadeDur) var(--easeOut),
    -webkit-clip-path var(--openDur) var(--easeOut),
    clip-path var(--openDur) var(--easeOut);
}

.esos-home .browse-wrap[data-open="0"] .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable[data-run-id],
.esos-home .browse-wrap[data-open="1"] .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable[data-run-id][data-reveal="0"] {
  -webkit-clip-path: inset(0 100% 0 0);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--dimFadeDur) var(--easeOut),
    -webkit-clip-path 0ms linear var(--closeDur),
    clip-path 0ms linear var(--closeDur);
}

.esos-home .browse-wrap[data-open="1"] .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable[data-run-id][data-reveal="1"] {
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  transition-delay:
    0ms,
    calc(var(--i, 0) * var(--staggerStep)),
    calc(var(--i, 0) * var(--staggerStep));
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill > span {
  width: auto;
  text-align: left;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft {
  gap: 15px;
  padding-right: 12px;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-slot {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 100%;
  width: var(--run-meta-rest-w);
  overflow: hidden;
  white-space: nowrap;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-slot.has-updated-at {
  transition: width 220ms var(--easeOut);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-label,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 1;
  transition: opacity 340ms var(--easeOut);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  line-height: 1;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 40ms var(--easeOut),
    clip-path 380ms var(--easeOut);
  text-align: left;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-date,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft .pill-draft-time {
  display: block;
  font-family: var(--font-base);
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft:hover .pill-draft-slot.has-updated-at .pill-draft-label {
  opacity: 0;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft:hover .pill-draft-slot.has-updated-at {
  width: var(--run-meta-hover-w);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-draft:hover .pill-draft-slot.has-updated-at .pill-draft-hover {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 40ms;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published {
  gap: 15px;
  padding-right: 12px;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-slot {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 100%;
  width: var(--run-meta-rest-w);
  overflow: hidden;
  white-space: nowrap;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-slot.has-published-at {
  transition: width 220ms var(--easeOut);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-label,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-hover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-base);
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 340ms var(--easeOut);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  line-height: 1;
  text-align: left;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 40ms var(--easeOut),
    clip-path 380ms var(--easeOut);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-date,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-time {
  display: block;
  font-family: var(--font-base);
  font-size: 6px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: none;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-label--live,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-hover--live,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-label--published,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-hover--published,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-label--completed,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published .pill-published-hover--completed {
  color: var(--browseRunPublishedText);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-published::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-published.is-active::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-live::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-live.is-active::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-completed::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-completed.is-active::before {
  background: var(--browseRunPublishedBg) !important;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-published:hover::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-live:hover::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-completed:hover::before {
  background-color: var(--browseRunPublishedHoverBg) !important;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-published.is-active:hover::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-live.is-active:hover::before,
.esos-home .browse-wrap .bcol[data-col="poll-runs"] button.h-pill.h-pill--selectable.is-published.is-run-completed.is-active:hover::before {
  background-color: var(--browseRunPublishedBg) !important;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published:hover .pill-published-slot.has-published-at .pill-published-label {
  opacity: 0;
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published:hover .pill-published-slot.has-published-at {
  width: var(--run-meta-hover-w);
}

.esos-home .browse-wrap .bcol[data-col="poll-runs"] .h-pill.is-published:hover .pill-published-slot.has-published-at .pill-published-hover {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 40ms;
}

/* =========================================================
   BROWSE HEADERS — always show on visible columns
   ========================================================= */

.esos-home .browse-wrap .bcol[data-has="1"] .bcol-head {
  opacity: 1;
  pointer-events: none;
}

.esos-home .browse-wrap .bcol[data-has="1"] .bcol-head > span {
  opacity: 1 !important;
}

/* =========================================================
   SIGNALS — Run builder (UI)
   ========================================================= */

.esos-home .sig-gap15 { height: var(--g15); }
.esos-home .sig-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.esos-home .sig-head,
.esos-home .edit-link-head {
  width: 100%;
  height: var(--dropdownRowH);
  border-radius: 10px;
  border: 0.5px solid #242424;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0 30px;
  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: var(--text);
}

.esos-home .sig-vars {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.esos-home .sig-years-row,
.esos-home .sig-minmax-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.esos-home .sig-input {
  border: 0;
  outline: none;
  box-shadow: none;
  background: var(--fieldBg);
  text-align: center;
  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: var(--muted40);
  transition: background-color 120ms var(--easeOut);
}

.esos-home .sig-input[data-dirty="1"] {
  color: var(--text);
}

.esos-home .sig-input:hover {
  background: var(--fieldHoverBg);
}

.esos-home .sig-input--year {
  width: 111px;
  height: 60px;
  border-radius: 10px;
}

.esos-home .sig-input--minmax {
  width: 93px;
  height: 60px;
  border-radius: 10px;
}

.esos-home .sig-qstack {
  display: flex;
  flex-direction: column;
  gap: var(--g15);
  margin-top: 0;
}

.esos-home .sig-qa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.esos-home .sig-instructions {
  width: 100%;
  min-height: 30px;
  height: 30px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  border-radius: 10px;
  background: var(--fieldBg);
  padding: 8px 30px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 13px;
  color: rgba(0, 0, 0, 0.35);
  transition: background-color 120ms var(--easeOut);
  text-align: center;
}

.esos-home .sig-instructions:hover {
  background: var(--fieldHoverBg);
}

.esos-home .sig-instructions::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.esos-home .sig-instructions[data-dirty="1"] {
  color: var(--text);
}

.esos-home .sig-card {
  width: 100%;
  border-radius: 12px;
  background: var(--fieldBg);
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.esos-home .sig-question,
.esos-home .sig-answer {
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  border-radius: 10px;
  font-family: var(--font-base);
  line-height: 1.2;
  padding: 18px 30px;
  display: block;
}

.esos-home .sig-question {
  font-family: med, var(--font-fallback);
  min-height: 90px;
  padding: 30px 30px;

  font-size: 30px;
  line-height: 1;

  background: #242424;
  color: #fff;
  transition: background-color 120ms var(--easeOut);
}

.esos-home .sig-answer {
  font-size: var(--formInputFont);
}

.esos-home .sig-question:hover {
  background: rgba(0, 0, 0, 1);
}

.esos-home .sig-question::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.esos-home .run-split-pane--builder .edit-delete-actions {
  position: sticky;
  right: auto;
  bottom: var(--chromeInset);
  margin-left: auto;
  margin-right: var(--chromeInset);
  width: fit-content;
}

.esos-home .run-split-pane--builder .edit-delete-actions.run-builder-delete-actions {
  position: fixed;
  right: var(--run-builder-float-right);
  bottom: var(--chromeInset);
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.esos-home .sig-answer {
  min-height: 60px;
  background: var(--pill);
  color: rgba(0, 0, 0, 0.4);
  transition: background-color 120ms var(--easeOut);
}

.esos-home .sig-answer:hover {
  background: var(--fieldHoverBg);
}


.esos-home .sig-answer[data-dirty="1"] {
  color: var(--text);
}

.esos-home .sig-answer::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.esos-home .sig-answers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.esos-home .sig-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--g15);
  margin-bottom: 12px;
}

.esos-home .sig-row,
.esos-home .dis-row,
.esos-home .td-row {
  position: relative;
}

.esos-home .sig-delete,
.esos-home .dis-delete,
.esos-home .td-delete {
  position: absolute;
  top: 15px;
  right: 15px;

  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: var(--fieldBg);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  cursor: pointer;

  transition:
    opacity 120ms var(--easeOut),
    background-color 120ms var(--easeOut);
}

.esos-home .sig-row:hover .sig-delete,
.esos-home .dis-row:hover .dis-delete,
.esos-home .td-row:hover .td-delete {
  opacity: 1;
  pointer-events: auto;
}

.esos-home .sig-delete:hover,
.esos-home .dis-delete:hover,
.esos-home .td-delete:hover {
  background: var(--fieldHoverBg);
}

.esos-home .sig-delete svg,
.esos-home .dis-delete svg,
.esos-home .td-delete svg {
  display: block;
  width: 10.5px;
  height: 10.5px;
}

.esos-home .sig-row--question .sig-delete {
  background: rgba(255, 255, 255, 0.12);
}

.esos-home .sig-row--question .sig-delete:hover {
  background: rgba(255, 255, 255, 0.24);
}

.esos-home .sig-row--question .sig-delete svg path {
  stroke: #fff;
}

.esos-home .sig-row--question .sig-delete,
.esos-home .td-wrap .sig-row--question .sig-delete {
  top: 50%;
  transform: translateY(-50%);
}

.esos-home .create-wrap > .create-add,
.esos-home .create-wrap--run > button.create-add,
.esos-home [data-sig-run] > .create-add,
.esos-home .sig-wrap > .create-add,
.esos-home .dis-actions > .create-add,
.esos-home .td-center > .create-add {
  margin-top: var(--g15);
}

.esos-home .create-input:focus,
.esos-home .create-input:focus:hover,
.esos-home .create-textarea--description:focus,
.esos-home .create-textarea--description:focus:hover,
.esos-home .sig-input:focus,
.esos-home .sig-input:focus:hover,
.esos-home .sig-instructions:focus,
.esos-home .sig-instructions:focus:hover,
.esos-home .sig-answer:focus,
.esos-home .sig-answer:focus:hover,
.esos-home .dis-field:focus,
.esos-home .dis-field:focus:hover,
.esos-home input.dis-axis-input:focus,
.esos-home input.dis-axis-input:focus:hover,
.esos-home .td-field:focus,
.esos-home .td-field:focus:hover {
  background: var(--fieldBg);
}

/* =========================================================
   DISSONANCE — Run builder (UI)
   ========================================================= */

.esos-home .dis-gap4 { height: 4px; }

.esos-home .dis-wrap{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.esos-home .dis-head{
  width: 100%;
  height: var(--dropdownRowH);
  border-radius: 10px;
  border: 0.5px solid #242424;
  background: transparent;

  display: flex;
  align-items: center;
  padding: 0 30px;

  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: var(--text);
}


/* QA module */
.esos-home .dis-qa{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.esos-home .dis-field{
  border-radius: 10px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;

  background: var(--pill);

  font-family: var(--font-base);
  font-size: var(--formInputFont); /* 20px */
  line-height: 1.2;

  height: var(--dropdownRowH);
  min-height: var(--dropdownRowH);

  padding: 18px 30px;
  color: var(--muted40);
  display: block;
}

.esos-home .dis-field::placeholder{
  color: var(--muted40);
}

/* Answer stack */
.esos-home .dis-answers{
  display: flex;
  flex-direction: column;
  gap: var(--g); /* 4px */
}

/* Answers: 60px inset from the question’s left edge, right edge aligned with question */
.esos-home .dis-answer{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.esos-home .dis-qstack{
  display: flex;
  flex-direction: column;
  gap: var(--g15);
}

/* Add Question button: always 15px above */
.esos-home .dis-actions{
  display: flex;
  justify-content: center;
  margin: var(--g15) 0 0 0;
}

.esos-home .dis-actions > .create-add{
  margin-top: 0;
}

/* Dissonance fields: grey until user types, then black */
.esos-home .dis-field {
  color: var(--muted40);
}
.esos-home .dis-field[data-dirty="1"] {
  color: var(--text);
}

.esos-home .dis-axis-input[data-dirty="1"] {
  color: var(--text);
}

/* Dissonance axis row container */
.esos-home .dis-axis {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: var(--pillBrowseBase);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

/* Axis inputs: small-pill style */
.esos-home input.dis-axis-input {
  min-width: 102px;
  height: 30px;
  border-radius: 5px;
  border: 0;
  background: var(--pill);
  outline: none;

  padding: 0 15px;
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;

  color: var(--muted40);
}
.esos-home input.dis-axis-input::placeholder {
  color: var(--muted40);
}

/* =========================================================
   3D*2 — Run builder (aligned to Signals)
   ========================================================= */

.esos-home .td-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.esos-home .td-head {
  width: 100%;
  height: var(--dropdownRowH);
  border-radius: 10px;
  border: 0.5px solid #242424;
  background: transparent;

  display: flex;
  align-items: center;
  padding: 0 30px;

  font-family: var(--font-base);
  font-size: var(--formInputFont);
  line-height: 1;
  color: var(--text);
}

/* keep 3D*2 rows on the same rhythm as Signals */
.esos-home .td-brandstack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--g);
}



.esos-home .sig-card .sig-instructions {
  margin-top: 4px;
}


.esos-home .td-axis-label {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* variable rows should behave exactly like Signals answer rows */
.esos-home .td-brandstack .sig-row {
  width: 100%;
}

.esos-home .td-brandstack .sig-row--answer {
  position: relative;
}

/* variable input should be full width like Signals answers */
.esos-home .td-brandstack .td-brand {
  width: 100%;
  min-height: 60px;
  padding-right: 105px;
  background: var(--pill);
  color: rgba(0, 0, 0, 0.4);
  transition: background-color 120ms var(--easeOut);
}

.esos-home .td-brandstack .td-brand:hover {
  background: var(--fieldHoverBg);
}

.esos-home .td-brandstack .td-brand[data-dirty="1"] {
  color: var(--text);
}

.esos-home .td-brandstack .td-brand::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* make 3D*2 delete buttons behave exactly like Signals ones */
.esos-home .td-wrap .sig-delete,
.esos-home .td-wrap .td-upload-variable {
  position: absolute;
  top: 15px;
  right: 15px;

  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: var(--fieldBg);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  cursor: pointer;

  transition:
    opacity 120ms var(--easeOut),
    background-color 120ms var(--easeOut);
}

.esos-home .td-wrap .td-upload-variable {
  right: 60px;
  overflow: hidden;
  padding: 0;
}

.esos-home .td-wrap .td-upload-variable[data-has-image="1"] {
  opacity: 1;
  pointer-events: auto;
}

.esos-home .td-wrap .sig-row:hover .sig-delete,
.esos-home .td-wrap .sig-row:hover .td-upload-variable[data-has-image="0"] {
  opacity: 1;
  pointer-events: auto;
}

.esos-home .td-wrap .sig-delete:hover,
.esos-home .td-wrap .td-upload-variable:hover {
  background: var(--fieldHoverBg);
}

.esos-home .td-wrap .sig-delete svg,
.esos-home .td-wrap .td-upload-variable svg {
  display: block;
}

.esos-home .td-wrap .td-upload-variable svg {
  width: 17px;
  height: 15px;
}

.esos-home .td-wrap .td-upload-variable__preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.esos-home .td-wrap .sig-delete svg {
  width: 10.5px;
  height: 10.5px;
}

/* dark question row delete button */
.esos-home .td-wrap .sig-row--question .sig-delete {
  background: rgba(255, 255, 255, 0.12);
}

.esos-home .td-wrap .sig-row--question .sig-delete:hover {
  background: rgba(255, 255, 255, 0.24);
}

.esos-home .td-wrap .sig-row--question .sig-delete svg path {
  stroke: #fff;
}

/* Published runs stay readable but non-editable */
.esos-home .create-wrap--run[data-run-readonly="1"] .create-section-pill.is-disabled {
  opacity: 1;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .create-select[data-disabled="1"],
.esos-home .create-wrap--run[data-run-readonly="1"] .create-select[aria-disabled="true"] {
  opacity: 1;
  pointer-events: auto;
  cursor: text;
  background: var(--fieldBg);
  color: rgba(0, 0, 0, 1);
  -webkit-user-select: text;
  user-select: text;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .create-select-label {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .create-textarea--description[readonly],
.esos-home .create-wrap--run[data-run-readonly="1"] .create-input[readonly],
.esos-home .create-wrap--run[data-run-readonly="1"] .sig-field[readonly],
.esos-home .create-wrap--run[data-run-readonly="1"] .sig-input[readonly],
.esos-home .create-wrap--run[data-run-readonly="1"] .dis-axis-input[readonly] {
  pointer-events: auto;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .create-select[data-disabled="1"]:hover,
.esos-home .create-wrap--run[data-run-readonly="1"] .create-select[aria-disabled="true"]:hover,
.esos-home .create-wrap--run[data-run-readonly="1"] .create-textarea--description[readonly]:hover,
.esos-home .create-wrap--run[data-run-readonly="1"] .create-input[readonly]:hover,
.esos-home .create-wrap--run[data-run-readonly="1"] .sig-input[readonly]:hover {
  background: var(--fieldBg);
}

.esos-home .create-wrap--run[data-run-readonly="1"] .sig-question[readonly]:hover {
  background: #242424;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .sig-answer[readonly]:hover,
.esos-home .create-wrap--run[data-run-readonly="1"] input.dis-axis-input[readonly]:hover {
  background: var(--pill);
}

.esos-home .create-wrap--run[data-run-readonly="1"] .create-add,
.esos-home .create-wrap--run[data-run-readonly="1"] .filter-answer-toggle,
.esos-home .create-wrap--run[data-run-readonly="1"] .sig-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .dis-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-upload-variable {
  display: none;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .sig-row:hover .sig-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .dis-row:hover .dis-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-row:hover .td-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-wrap .sig-row:hover .td-upload-variable[data-has-image="0"],
.esos-home .create-wrap--run[data-run-readonly="1"] .td-wrap .sig-row:hover .sig-delete,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-wrap .td-upload-variable[data-has-image="1"] {
  display: none;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .filter-answer,
.esos-home .create-wrap--run[data-run-readonly="1"] .td-brand {
  padding-right: 30px;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .filter-answer.filter-answer--qualified-readonly {
  padding-right: 106px;
}

.esos-home .create-wrap--run[data-run-readonly="1"] .filter-answer-qualifier-dot {
  display: inline-flex;
}

.esos-home .create-wrap--run[data-run-readonly="1"] #run-producttype-select[data-disabled="1"],
.esos-home .create-wrap--run[data-run-readonly="1"] #run-producttype-select[aria-disabled="true"] {
  opacity: 1;
  color: rgba(0, 0, 0, 1);
}

/* =========================================================
   Responsive: allow Signals builder to expand on narrow screens
   ========================================================= */

@media (max-width: 920px) {
  /* Stop the big fixed gutters from squeezing the whole form */
  .esos-home .create-wrap {
    width: calc(100% - 60px); /* 30px padding each side */
  }

  .esos-home .run-preview-nav-arrow {
    top: var(--chromeInset);
    transform: none;
  }

  .esos-home .run-preview-nav-arrow--previous {
    left: calc(100% - var(--run-preview-width) + var(--run-preview-mobile-inset));
  }

  .esos-home .run-preview-nav-arrow--next {
    right: var(--run-preview-mobile-inset);
  }

  .esos-home[data-runtime-preview-root] .run-preview-nav-arrow--previous {
    left: var(--runtime-nav-prev-left, var(--chromeInset));
    right: auto;
  }

  .esos-home[data-runtime-preview-root] .run-preview-nav-arrow--next {
    left: var(
      --runtime-nav-next-left,
      calc(100% - var(--chromeInset) - var(--u))
    );
    right: auto;
  }

  /* Answers should NOT be narrower on small screens */
  .esos-home .sig-answer{
    width: calc(100% - 60px);
    margin-left: 60px;
    margin-right: 0;
  }
}

.esos-home .create-wrap > .create-add,
.esos-home .sig-wrap > .create-add {
  margin-top: var(--g15);
}


/* =========================================================
   Performance containment
   ========================================================= */
.esos-home .browse-wrap {
  contain: layout;
}

.esos-home .flyout,
.esos-home .hflyout {
  contain: layout paint;
}

.esos-home .flyout .h-pill::before,
.esos-home .hflyout .h-pill::before,
.esos-home .browse-wrap button.h-pill.h-pill--selectable::before,
.esos-home .browse-wrap a.h-pill.h-pill--selectable::before,
.esos-home .browse-wrap .bcol-head::before {
  will-change: transform;
  pointer-events: none;
}

/* =========================================================
   Home — Hi pill (only border on home)
   ========================================================= */
.esos-home .hi-pill {
  display: inline-flex;
  height: var(--u);
  padding: 0 15px;
  align-items: center;
  gap: 10px;

  border-radius: 10px;
  border: 0.5px solid #242424;
  background: transparent;

  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1;
}
.esos-home[data-anyopen="1"] .hi-pill {
  opacity: 0;
  pointer-events: none;
}
.esos-home[data-anyopen="0"] .hi-pill {
  opacity: 1;
  pointer-events: auto;
}