/* 「安装到桌面」入口与引导弹窗。
 *
 * 单位约定：弹窗内部一律用 em，基准是 .pwa-install-dialog 的 font-size。
 * 学员端首页的 viewport 是 width=1180 的桌面布局，手机上是整体缩放的，
 * 所以 pwa-install.js 会按「布局宽度 / 可视宽度」把弹窗字号放大，
 * 弹窗在手机上才不会缩成看不清的小字。改尺寸请继续用 em。
 */

.pwa-install-entry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid var(--green, #14705d);
  border-radius: 6px;
  background: var(--green, #14705d);
  color: #fff;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.pwa-install-entry[hidden] { display: none !important; }
.pwa-install-entry:not(:disabled):hover { filter: brightness(1.07); }
.pwa-install-entry i { font-style: normal; font-size: 15px; line-height: 1; }

.pwa-install-dialog {
  width: min(31em, calc(100vw - 3em));
  max-width: none;
  padding: 0;
  border: 1px solid var(--line, #d8e2dc);
  border-radius: .55em;
  background: #fff;
  color: var(--ink, #12241e);
  font-family: inherit;
  font-size: 14px;
}
.pwa-install-dialog::backdrop { background: rgba(18, 40, 34, .42); }
.pwa-install-dialog__body { display: grid; gap: 1em; padding: 1.6em; }
.pwa-install-dialog__body h2 { margin: 0; font-size: 1.36em; line-height: 1.4; }
.pwa-install-dialog__lead { margin: 0; font-size: 1em; line-height: 1.7; color: #3c4a58; }
.pwa-install-dialog__steps { display: grid; gap: .65em; margin: 0; padding: 0; list-style: none; }
.pwa-install-dialog__steps li {
  display: grid;
  grid-template-columns: 1.7em minmax(0, 1fr);
  gap: .65em;
  align-items: start;
  font-size: 1em;
  line-height: 1.6;
}
.pwa-install-dialog__steps b {
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #e7f4ee;
  color: var(--green, #14705d);
  font-size: .86em;
}
.pwa-install-dialog__actions { display: flex; gap: .7em; justify-content: flex-end; }
.pwa-install-dialog__actions button {
  min-height: 2.7em;
  padding: 0 1.3em;
  border-radius: .45em;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.pwa-install-dialog__secondary { border: 1px solid var(--line, #d8e2dc); background: #fff; color: var(--ink, #12241e); }
.pwa-install-dialog__primary { border: 1px solid var(--green, #14705d); background: var(--green, #14705d); color: #fff; }
.pwa-install-dialog__note { margin: 0; font-size: .93em; line-height: 1.7; color: var(--muted, #5b6b63); }

/* 登录页（portal.css）里的安装入口。
 * 门户样式没有 --green / --line 这套变量，所以上面的 var() 都带兜底色；
 * 这里再压一道特异性，盖住 portal.css 的 `.login-panel button{width:100%;height:46px;background:#157963}`。 */
.login-panel .pwa-install-entry--portal {
  width: 100%;
  height: 42px;
  justify-content: center;
  margin: 10px 0 0;
  border: 1px solid #b9ccc3;
  background: #fff;
  color: #14705d;
  font-weight: 700;
}
.login-panel .pwa-install-entry--portal:hover { background: #f2f9f6; }

/* 等待浏览器开放安装能力时的状态（pwa-install.js 会写 aria-busy="true" 并显示倒计时）。
 * 这一步是「能不能装成真应用」的关键：浏览器没就绪就点安装，只能装出浏览器快捷方式。 */
.pwa-install-entry[aria-busy="true"] {
  opacity: .82;
  cursor: progress;
  font-variant-numeric: tabular-nums;
}

/* 等待安装能力的说明框（2026-10-23）
 * 旧版点击后只在按钮上倒数，用户以为坏了；新版立即弹这个框，把「在等什么」说清楚，
 * 并给一条「手动安装」的备选路径。 */
.pwa-install-dialog--wait { width: min(29em, calc(100vw - 2.4em)); }

.pwa-install-dialog__status {
  margin: 0;
  padding: .72em .9em;
  border-radius: .45em;
  background: #eef7f2;
  color: #146b57;
  font-size: .95em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pwa-install-dialog--wait .pwa-install-dialog__actions { flex-wrap: wrap; }

.pwa-install-dialog__ghost {
  border: 1px solid var(--line, #d8e2dc);
  background: #fff;
  color: var(--green, #14705d);
}