/*
 * 「分辨率」段落 —— resolution.js 动态插进键位面板内容区（.ejs-km-bd）的最后一段
 * ---------------------------------------------------------------------------
 * 段落的外壳和排版直接复用 keymap.css 的全局类：
 *   .ejs-km-sec（小标题） .ejs-km-row（左右布局） .ejs-km-nm（左标签）
 *   .ejs-km-pend（"有未应用的改动"提示条）
 * 这个文件只写它自己的工作控件：下拉框、宽高输入框、应用按钮、两行说明文字。
 *
 * 按钮样式是从 keymap.css 的 .ejs-km-ft button 抄过来的 —— 我们的按钮不在
 * .ejs-km-ft 容器里，蹭不到那条后代选择器。呼吸动画另起名（ejs-res-blink），
 * 免得和 keymap.css 互相牵制。
 */

#ejs-res-sec { margin-top: 2px; }

/* 宽高两个输入框只在选「自定义」时露出来（预设的标签里已经写了实际像素值） */
.ejs-res-custom { display: none; }
.ejs-res-custom.on { display: block; }

/* ---- 下拉框 / 数字输入框 -------------------------------------------------- */

.ejs-res-sel,
.ejs-res-num {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ejs-res-sel:hover,
.ejs-res-num:hover:enabled { background-color: rgba(255, 255, 255, 0.16); }
.ejs-res-sel:focus,
.ejs-res-num:focus { outline: 0; border-color: rgba(120, 190, 255, 0.7); }

.ejs-res-sel {
  width: 118px;
  padding-right: 19px;
  /* 自己画个下拉箭头：# 必须写成 %23，否则会被当成 URL 片段 */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 10px 10px;
}
/* 展开的列表是原生控件，得单独给它上深色，不然白底白字 */
.ejs-res-sel option,
.ejs-res-sel optgroup { background: #1b1b1b; color: #fff; }

.ejs-res-num {
  width: 84px;
  cursor: text;
  text-align: right;
}
/* 数字框的上下箭头太占地方，去掉 —— 直接敲更快 */
.ejs-res-num::-webkit-outer-spin-button,
.ejs-res-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ejs-res-sel:disabled,
.ejs-res-num:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---- 应用按钮 ------------------------------------------------------------ */

.ejs-res-apply {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 6px 0 0;
  padding: 6px 4px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ejs-res-apply:hover { background: rgba(255, 255, 255, 0.18); }
.ejs-res-apply:active { transform: scale(0.98); }
.ejs-res-apply:focus { outline: 0; }        /* 别抢走画布的键盘焦点 */

/* 改了才点亮并轻微呼吸，没改动时就是个安静的普通按钮（同 .ejs-km-apply） */
.ejs-res-apply.pending {
  background: rgba(90, 170, 255, 0.34);
  border-color: rgba(120, 190, 255, 0.7);
  animation: ejs-res-blink 1.4s ease-in-out infinite;
}
.ejs-res-apply.pending:hover { background: rgba(90, 170, 255, 0.5); }
.ejs-res-apply:disabled {
  opacity: 0.45;
  cursor: default;
  animation: none;
}
@keyframes ejs-res-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---- 说明文字 ------------------------------------------------------------ */

/* 复用 .ejs-km-pend，但它在面板底部是带横向内边距的，这里在内容区里要去掉 */
#ejs-res-sec .ejs-km-pend { padding: 4px 0 0; }

.ejs-res-hint {
  padding: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #8fc7ff;
}
/* 只在"平滑滤波这一局还没生效"时显示，平时不占位置（面板快占满一屏了） */
.ejs-res-tip {
  display: none;
  padding: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}
.ejs-res-tip.on { display: block; }

/* 窄屏（手机）：跟 keymap.css 的断点保持一致 */
@media (max-width: 520px) {
  .ejs-res-sel { width: 104px; font-size: 11px; }
  .ejs-res-num { width: 70px; font-size: 11px; }
  .ejs-res-apply { font-size: 11px; }
}