/* ==========================================================================
   publish-guard.css —— 发布额度护栏样式
   ⚠️ 只允许 index.html 引用（发布页是 index.html 里的 SPA 路由）。
      验收：grep -c 'publish-guard.css' www/*.html 的结果必须只有一个 1。

   z-index 约定（动之前先看一眼既有层级，别靠猜）：
     · #app 内部弹窗 .modal-mask        100
     · 右侧抽屉 .bnm-mask 1190 / .bnm-panel 1200
     · 本层：额度弹窗 1300、顶部提示条 1400 —— 要压在站内弹窗之上，
       又不跟抽屉抢层级。

   display 兜底：本文件的 .pg-mask 用「.pg-on 才 display:flex」，而不是用
   [hidden] 属性控制 —— 作者样式 .pg-mask{display:flex} 会整条盖掉 UA 的
   [hidden]{display:none}（本项目踩过，见 mobile 抽屉那次）。用类名切换最稳。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 发布页顶部横幅：进入发布页就前置提醒（非阻塞，不挡用户看表单）
   -------------------------------------------------------------------------- */
.pg-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff5f3;
  border: 1px solid #f0c2ba;
  border-left: 4px solid var(--c-primary, #c93628);
  border-radius: var(--radius, 14px);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.pg-banner-ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-primary, #c93628);
  color: #fff;
  font: 900 15px/26px Arial, sans-serif;
  text-align: center;
}
.pg-banner-body {
  flex: 1 1 auto;
  min-width: 0;
}
.pg-banner-body b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  color: var(--c-ink, #26211d);
  margin-bottom: 3px;
}
.pg-banner-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--c-ink-light, #74685d);
}
.pg-banner-body p b {
  display: inline;
  font-size: inherit;
  color: var(--c-primary, #c93628);
}
.pg-banner-btn {
  flex: 0 0 auto;
  align-self: center;
  display: inline-block;
  background: var(--c-primary, #c93628);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  padding: 9px 15px;
  border-radius: 999px;
  white-space: nowrap;
}
.pg-banner-btn:hover {
  background: var(--c-primary-deep, #a63329);
}

/* --------------------------------------------------------------------------
   1b) 发布表单「手机号选填」提示
   bundle 里已经把标签改成「联系电话（选填）」并摘掉了原生 required，
   这里补的是**动态**那半句：个人中心当前登记的手机号是多少。
   （号码必须运行时才知道，打成静态补丁做不到。）
   -------------------------------------------------------------------------- */
.pg-phone-hint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--c-ink-light, #74685d);
}
.pg-phone-hint b {
  color: var(--c-primary, #c93628);
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   1c) 个人中心补填「微信号」——覆盖层往 SPA 的账户资料表单里补一个字段
   它在「详细地址」这一行的右半格（那一行本来就只有 1 个字段）。
   ⚠️ 用 .field-help.pg-wx-msg 提高特异性：.field-help 在 mobile-v5.css 里
      有 margin-top:9px 的窄屏口径，本文件加载在其后，同特异性会把它整条盖掉。
   -------------------------------------------------------------------------- */
.field-help.pg-wx-msg {
  margin-top: 4px;
}
.pg-wx-msg:empty {
  display: none;
}
.pg-wx-msg.is-ok {
  color: #1f7a4d;
  font-weight: 700;
}
.pg-wx-msg.is-warn {
  color: var(--c-primary, #c93628);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2) 额度不足弹窗：点「确认提交发布」拿到 429 时弹，全屏遮罩，必须处理
   -------------------------------------------------------------------------- */
.pg-mask {
  position: fixed;
  inset: 0;
  z-index: 1300;
  /* display 由 .pg-on 打开，别在这里写 flex */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(38, 33, 29, 0.55);
}
.pg-mask.pg-on {
  display: flex;
}
/* 我们的额度弹窗压住 SPA 自己的预览弹窗时，把后者藏掉 ——
   两层半透明遮罩叠加会黑成一团。关掉我们的弹窗后它自己会回来。
   特异性 (0,3,0) 已高于 .modal-mask.open (0,2,0)，不需要 !important。 */
body.pg-hide-vue-mask .modal-mask.open {
  display: none;
}
.pg-modal {
  width: 100%;
  max-width: 430px;
  background: #fff;
  border-radius: 16px;
  padding: 24px 22px 20px;
  text-align: center;
  box-shadow: 0 18px 48px -18px rgba(38, 33, 29, 0.45);
}
.pg-modal-ico {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--c-primary, #c93628);
  color: #fff;
  font: 900 24px/46px Arial, sans-serif;
}
.pg-modal h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--c-ink, #26211d);
}
.pg-modal p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-ink-soft, #665b51);
  text-align: left;
}
.pg-modal p b {
  color: var(--c-primary, #c93628);
}
/* 「怎么才能继续发」这一段是用户真正要照做的动作，给个浅底强调一下，
   不能和上面的解释性正文一个视觉权重 */
.pg-modal-how {
  margin-top: 12px !important;
  padding: 11px 13px;
  background: #fff7f0;
  border-radius: 10px;
  font-size: 13px !important;
  line-height: 1.72 !important;
  color: var(--c-ink, #26211d) !important;
}
.pg-modal-tip {
  margin-top: 12px !important;
  padding-top: 11px;
  border-top: 1px dashed var(--c-line, #e3d9cf);
  font-size: 12.5px !important;
  color: var(--c-ink-light, #74685d) !important;
}
/* 补充说明（如「哪些商品需要保留 1 件」）—— 压在正文里但视觉更轻，
   否则会和用户真正要照做的动作抢注意力 */
.pg-dim {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.66;
  color: var(--c-ink-light, #74685d);
}
.pg-modal-acts {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.pg-modal-acts a,
.pg-modal-acts button {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 12px 8px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
.pg-go {
  background: var(--c-primary, #c93628);
  color: #fff;
}
.pg-go:hover {
  background: var(--c-primary-deep, #a63329);
}
.pg-ok {
  background: #f3ede7;
  color: var(--c-ink, #26211d);
}
.pg-ok:hover {
  background: #eae1d8;
}

/* --------------------------------------------------------------------------
   3) 顶部提示条：发布成功时用。
   挂在 document.body（#app 之外），所以 SPA 跳页（发布成功后会跳 /directory）
   不会把它冲掉 —— 这正是打包产物那行小字「闪一下就没了」的解药。
   -------------------------------------------------------------------------- */
.pg-toast {
  position: fixed;
  left: 50%;
  top: 78px;
  z-index: 1400;
  max-width: min(92vw, 460px);
  display: flex;
  align-items: center;
  gap: 9px;
  background: #1f7a4d;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, -14px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.pg-toast.pg-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.pg-toast.pg-warn {
  background: var(--c-primary, #c93628);
}
.pg-toast i {
  font-style: normal;
  font-size: 16px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   4) 窄屏口径
   ⚠️ 这一段不是可选项：本文件排在 mobile-v5.css 之后加载，不显式写窄屏口径
      就会把宽屏的间距原样带到手机上（本项目反复踩过）。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pg-banner {
    flex-wrap: wrap;
    row-gap: 10px;
    padding: 13px 14px;
  }
  /* 第一行：图标 26px + gap 12px，让正文跟图标同行 */
  .pg-banner-body {
    flex: 1 1 calc(100% - 38px);
  }
  .pg-banner-body b {
    font-size: 14.5px;
  }
  .pg-banner-body p {
    font-size: 12.5px;
  }
  .pg-banner-btn {
    flex: 1 1 100%;
    text-align: center;
    padding: 10px 14px;
  }
  .pg-mask {
    padding: 16px;
  }
  .pg-modal {
    padding: 20px 16px 16px;
  }
  .pg-modal h3 {
    font-size: 16.5px;
  }
  .pg-modal p {
    font-size: 13.5px;
  }
  .pg-toast {
    top: 66px;
    font-size: 13px;
    padding: 11px 15px;
  }

  /* ------------------------------------------------------------------------
     5) 发布按钮行（/publish/demand · /publish/product · /publish/quote 共用）
     三个发布页的 .publish-actions 都是 4 个按钮同一行：
       恢复填写示例 / 保存草稿 / 预览内容 / 提交发布(=button[type=submit])
     主包口径是 display:flex + nowrap + 每个 .fc-btn{flex:1}，
     手机上下拉框宽只有 317px → 每个按钮 (317-30)/4 ≈ 71px，
     而「恢复填写示例」「发布采购需求」是 6 个汉字（14px 字号需 ~100px）
     → 文字被迫折成两行，按钮高度被撑到 58px，整行参差不齐。
     改成「3 个小按钮等分第一行 + 主按钮独占第二行」。
     ⚠️ 主包 .publish-actions .fc-btn{flex:1} 的特异性是 (0,2,0)，与本段同分，
        靠「本文件排在主包之后加载」取胜 —— 所以这几条**不能**挪到主包之前
        引用的 CSS 里，否则会静默失效。
     ------------------------------------------------------------------------ */
  .publish-actions {
    flex-wrap: wrap;
  }
  .publish-actions .fc-btn {
    flex: 1 1 calc(33.333% - 7px);
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 13px;
    white-space: nowrap;
  }
  /* 主按钮独占一行。DOM 里它本来就是最后一个，所以自然落在第二行首。 */
  .publish-actions > button[type='submit'] {
    flex: 1 1 100%;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}

/* 320~380：三列各只有 ~86px，13px 字号放 6 个汉字会顶到边，再收一档。 */
@media (max-width: 380px) {
  .publish-actions .fc-btn {
    font-size: 12px;
  }
}