/* ============================================================
   WorkshopSkill 投稿页补充样式（{en,zh,zh-hant}/submit.html 专用）
   依赖：必须先引入 ws.css 设计系统（tokens / 页面骨架 / 纸纹理），
   本文件只放投稿页独有组件：投稿单 / 提交按钮 / 状态行 / 收讫回执。
   ============================================================ */

/* ---------- 投稿页：读者来稿表格纸（submit.html 三语共用） ---------- */
.submit-sheet{                    /* 复印白投稿单：散在桌面上的一张表格纸 */
  margin:30px 0 0;
  background:var(--copy);
  background-image:var(--noise-blotch),var(--noise-fiber),var(--noise-ink);
  border:1.5px solid var(--line-strong);
  border-bottom:2.5px solid var(--kraft-deep);
  box-shadow:var(--shadow);
  padding:26px 28px 24px;
}
.submit-sheet .sheet-note{        /* 顶部 mono 注释行：必填与邮箱用途 */
  margin:0 0 18px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
}
.submit-field{margin:0 0 18px}
.submit-field label{
  display:block;
  font-family:var(--mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ink);
  margin:0 0 6px;
}
.submit-field label .opt{         /* （选填）标注：石墨灰弱化 */
  font-weight:400;
  color:var(--ink-soft);
}
.submit-field input,.submit-field textarea{
  width:100%;
  font-family:var(--mono);
  font-size:.92rem;
  color:var(--ink);
  background:var(--paper);
  background-image:var(--noise-fiber),var(--noise-ink);
  border:1.5px solid var(--line-strong);
  padding:.72em 1em;
}
.submit-field input::placeholder,.submit-field textarea::placeholder{color:#9A938A}
.submit-field input:focus-visible,.submit-field textarea:focus-visible{
  outline:2px dashed var(--pen);
  outline-offset:1px;
  border-color:var(--pen);
}
.submit-field textarea{
  min-height:190px;
  resize:vertical;
  line-height:1.7;
}
.submit-field .field-hint{        /* 字段下小注（mono） */
  margin:6px 0 0;
  font-family:var(--mono);
  font-size:.68rem;
  color:var(--ink-soft);
}
.submit-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:4px;
}
.submit-btn{                      /* 寄出按钮：与订阅信封按钮同款圆珠笔蓝 */
  font-family:var(--mono);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--paper);
  background:var(--pen);
  border:1.5px solid #164A87;
  box-shadow:var(--shadow);
  padding:.72em 1.5em;
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
}
.submit-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-lift)}
.submit-btn:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
  box-shadow:var(--shadow);
}
.pub-note{                        /* 提交状态行：有内容才占位（:empty 兜底隐藏） */
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:.76rem;
  color:var(--kraft-deep);
  background:rgba(255,252,244,.75);
  border:1px dashed var(--kraft-deep);
  padding:.7em 1em;
}
.pub-note:empty{display:none;margin:0;padding:0;border:none}
.submit-done{                     /* 成功回执单：盖章收讫的复印纸 */
  margin:30px 0 0;
  background:var(--copy);
  background-image:var(--noise-blotch),var(--noise-fiber),var(--noise-ink);
  border:1.5px solid var(--line-strong);
  box-shadow:var(--shadow);
  padding:28px 30px 24px;
}
.submit-done[hidden]{display:none}
.submit-done .stamp{
  display:inline-block;
  margin:0 0 14px;
  animation:wsStampIn .5s cubic-bezier(.2,1.4,.4,1) .15s both;
}
.submit-done h2{
  font-family:var(--serif);
  font-size:1.26rem;
  margin:0 0 8px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
.submit-done p{
  margin:0;
  max-width:60ch;
  color:var(--ink-soft);
}
.submit-done p b{color:var(--ink)}
.submit-done .done-back{
  display:inline-block;
  margin:16px 0 0;
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:700;
  color:var(--pen);
}
@keyframes wsStampIn{             /* 收讫章落下 */
  from{opacity:0;transform:rotate(-6deg) scale(1.7)}
  to{opacity:1;transform:rotate(-6deg) scale(1)}
}

/* ---------- 响应式（与 ws.css 620px 断点同款收窄） ---------- */
@media (max-width:620px){
  .submit-sheet{padding:22px 18px 20px}
  .submit-done{padding:22px 18px 20px}
}