/* NUNO STUDIO NumberField
 * Single visual/interaction contract for every numeric input.
 * Visible UI: editable text -> vertical +/- buttons -> optional external unit.
 * The original input[type=number] stays as the canonical hidden source so
 * existing Product/Module/Profile calculation logic remains unchanged.
 */
:is(.nstudio-page,.nstudio-external-ui){
  --nstudio-number-height:40px;
  --nstudio-number-step-width:32px;
  --nstudio-number-radius:8px;
  --nstudio-number-border:#cfd8d4;
  --nstudio-number-focus:#668d81;
  --nstudio-number-bg:#fff;
  --nstudio-number-step-bg:#f6f8f7;
}

:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host.image-size-input-wrap,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-pocket-number,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-tie-number,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-setting-inline,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host.nstudio-monyou-input-wrap{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:7px;
  width:auto;
  min-width:0;
  max-width:100%;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
}

:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field{
  --nstudio-number-chars:3;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--nstudio-number-step-width);
  width:calc((var(--nstudio-number-chars) * 1ch) + 60px);
  min-width:82px;
  max-width:100%;
  height:var(--nstudio-number-height);
  flex:0 1 auto;
  margin:0;
  padding:0;
  overflow:visible;
  border:1px solid var(--nstudio-number-border);
  border-radius:var(--nstudio-number-radius);
  background:var(--nstudio-number-bg);
  box-shadow:none;
  box-sizing:border-box;
  vertical-align:middle;
  z-index:1;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field:focus-within,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field.is-list-open{
  border-color:var(--nstudio-number-focus);
  box-shadow:0 0 0 2px rgba(61,105,93,.10);
  z-index:80;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field.is-disabled{
  opacity:.58;
  background:#f4f6f5;
}

/* canonical source: kept in DOM for all existing logic, never shown */
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field > input.nstudio-number-source{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  min-width:1px;
  max-width:1px;
  height:1px;
  min-height:1px;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
  clip-path:inset(50%);
  overflow:hidden;
}

:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field > input.nstudio-number-editor{
  grid-column:1;
  display:block;
  width:100%;
  min-width:0;
  max-width:none;
  height:100%;
  min-height:0;
  margin:0;
  padding:0 10px;
  border:0;
  border-radius:var(--nstudio-number-radius) 0 0 var(--nstudio-number-radius);
  outline:0;
  background:transparent;
  box-shadow:none;
  color:#27312d;
  font:inherit;
  font-size:14px;
  font-weight:500;
  line-height:normal;
  text-align:right;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field > input.nstudio-number-editor[aria-invalid="true"]{
  color:#9f2f2f;
  background:#fff8f8;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field > input.nstudio-number-editor:disabled{
  cursor:not-allowed;
}

:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-stepper{
  grid-column:2;
  display:grid;
  grid-template-rows:1fr 1fr;
  width:var(--nstudio-number-step-width);
  min-width:var(--nstudio-number-step-width);
  height:100%;
  border-left:1px solid #dce2df;
  border-radius:0 var(--nstudio-number-radius) var(--nstudio-number-radius) 0;
  overflow:hidden;
  background:var(--nstudio-number-step-bg);
  box-sizing:border-box;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#60706a;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step-inc{border-bottom:1px solid #dce2df;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step::before{
  content:"";
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step-inc::before{border-bottom:5px solid currentColor;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step-dec::before{border-top:5px solid currentColor;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step:hover,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step:focus-visible{
  background:#eaf0ed;
  color:#30453e;
  outline:0;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step:active{background:#dfe9e5;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-step:disabled{opacity:.32;cursor:default;}

:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-list{
  position:absolute;
  left:-1px;
  top:calc(100% + 5px);
  z-index:9999;
  min-width:calc(100% + 2px);
  max-width:220px;
  max-height:220px;
  overflow:auto;
  padding:5px;
  border:1px solid #cbd5d1;
  border-radius:9px;
  background:#fff;
  box-shadow:0 10px 26px rgba(32,55,47,.16);
  box-sizing:border-box;
  overscroll-behavior:contain;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field.is-list-up .nstudio-number-list{
  top:auto;
  bottom:calc(100% + 5px);
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-list[hidden]{display:none;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-option{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  min-height:32px;
  margin:0;
  padding:5px 9px;
  border:0;
  border-radius:6px;
  background:#fff;
  color:#28342f;
  font:inherit;
  font-size:13px;
  line-height:1.25;
  text-align:right;
  cursor:pointer;
  white-space:nowrap;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-option:hover,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-option:focus-visible{background:#eef4f1;outline:0;}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-option.is-selected{background:#e2ece8;color:#203f35;font-weight:700;}

:is(.nstudio-page,.nstudio-external-ui) .image-size-unit,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-custom-spec-unit,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-pocket-number>em,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-tie-number>em,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-setting-inline>em,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-monyou-input-wrap>em{
  flex:0 0 auto;
  min-width:0;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#737d79;
  font-size:12px;
  font-style:normal;
  line-height:1.2;
  white-space:nowrap;
}

/* Size, split, profile quantity and every module share the same field. */
:is(.nstudio-page,.nstudio-external-ui) .spec-field-size .custom-size-panel>.image-size-field>.image-size-input-wrap,
:is(.nstudio-page,.nstudio-external-ui) .spec-field-split .image-size-input-wrap,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-custom-spec-control>.image-size-input-wrap{
  width:auto;
  min-width:0;
  max-width:100%;
}

/* Native fallback before JS enhancement. */
:is(.nstudio-page,.nstudio-external-ui) input[type=number]:not([data-nstudio-number-source="1"]){
  min-width:82px;
  height:var(--nstudio-number-height);
  padding:0 10px;
  border:1px solid var(--nstudio-number-border);
  border-radius:var(--nstudio-number-radius);
  background:#fff;
  color:#27312d;
  font:inherit;
  font-size:14px;
  text-align:right;
  box-sizing:border-box;
}

@media(max-width:720px){
  :is(.nstudio-page,.nstudio-external-ui){
    --nstudio-number-height:48px;
    --nstudio-number-step-width:40px;
  }
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host,
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host.image-size-input-wrap,
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-pocket-number,
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-tie-number,
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-setting-inline,
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-host.nstudio-monyou-input-wrap{
    gap:8px;
  }
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field{
    min-width:94px;
    width:calc((var(--nstudio-number-chars) * 1ch) + 72px);
  }
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-field > input.nstudio-number-editor{
    padding:0 12px;
    font-size:16px;
  }
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-option{
    min-height:42px;
    padding:8px 10px;
    font-size:15px;
  }
  :is(.nstudio-page,.nstudio-external-ui) .nstudio-number-list{
    max-height:min(260px,42vh);
  }
}

/* Design-column controls must keep the NumberField's two equal step rows.
 * Generic design-sidebar button sizing must never force each arrow button taller
 * than the NumberField itself (which clipped the decrement/down arrow). */
:is(.nstudio-page,.nstudio-external-ui) .nstudio-design-sidebar .nstudio-number-field .nstudio-number-step{
  min-height:0;
  height:auto;
  padding:0;
  line-height:1;
}

/* Optional Profile-driven size assistance. Hidden unless a Profile enables it
 * on an individual numeric source via data-nstudio-number-assist="1". */
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-list.has-assist-panel{
  width:268px;
  min-width:268px;
  max-width:min(320px, calc(100vw - 28px));
  max-height:none;
  overflow:visible;
  padding:10px;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-section + .nstudio-number-assist-section{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #e1e6e4;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-title{
  display:block;
  margin:0 0 7px;
  color:#36433e;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-preset{
  appearance:none;
  -webkit-appearance:none;
  min-width:48px;
  min-height:34px;
  padding:5px 9px;
  border:1px solid #cbd5d1;
  border-radius:7px;
  background:#fff;
  color:#28342f;
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-preset:hover,
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-preset:focus-visible{
  border-color:#668d81;
  background:#eef4f1;
  outline:0;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-preset.is-selected{
  border-color:#668d81;
  background:#e2ece8;
  color:#203f35;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-select{
  display:block;
  width:100%;
  min-height:40px;
  margin:0;
  padding:0 34px 0 10px;
  border:1px solid #cbd5d1;
  border-radius:8px;
  background:#fff;
  color:#28342f;
  font:inherit;
  font-size:14px;
  line-height:1.3;
}
:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-select:focus{
  border-color:#668d81;
  outline:0;
  box-shadow:0 0 0 2px rgba(61,105,93,.10);
}


/* External UI mirror: the assist menu is viewport-positioned by the mirror
 * engine. It must not be constrained by the mirrored Size panel width or its
 * overflow. The mirror engine writes left/top/width at runtime. */
.nstudio-ui-mirror-root .nstudio-number-field.is-list-open.has-assist-panel{
  height:var(--nstudio-number-height);
  overflow:visible;
}
.nstudio-ui-mirror-root .nstudio-number-field.is-list-open.has-assist-panel > .nstudio-number-list.has-assist-panel{
  position:fixed;
  left:10px;
  right:auto;
  top:10px;
  bottom:auto;
  width:268px;
  min-width:0;
  max-width:calc(100vw - 20px);
  max-height:min(320px,calc(100vh - 20px));
  margin:0;
  overflow:auto;
  z-index:2147483300;
}


:is(.nstudio-page,.nstudio-external-ui) .nstudio-number-assist-note{
  margin-top:6px;
  color:#53635d;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
}