/* ============================================================
   投稿专属（docs/14 §12）
   —— 全站唯一表单页。**控件样式不在这里**：.f-input / .f-label /
      .f-hint / .f-err / .btn 都在共享层（想法墙、评论区也用同一套）。
      这一页只管自己的排布：左表单卡 + 右预览台。
   ============================================================ */
.f-grid{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);
  gap:clamp(24px,3.6vw,44px); align-items:start;
}
/* 左：表单卡。右：预览卡（桌面端吸顶，填表时一直看得见） */
.f-card{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--sd-3); padding:clamp(22px,3vw,36px);
}
/* 图片来源二选一：贴链接（不用登录）/ 传图（要登录） */
.src-pick{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.f-file{
  width:100%; display:block; background:var(--cream);
  border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  padding:.72em .9em; font:inherit; font-size:var(--fs-sm); color:var(--text-2);
}
.f-file::file-selector-button{
  font:inherit; font-weight:800; font-size:var(--fs-sm); cursor:pointer;
  margin-right:1em; padding:.45em 1em;
  border:2px solid var(--ink); border-radius:var(--r-pill);
  background:var(--paper); color:var(--ink);
}
/* 登录面板的宿主 —— 面板本身在共享层（.aut-*） */
.aut-host{ margin-top:var(--sp-4); }

/* 右：预览卡 */
.f-side{ position:sticky; top:calc(var(--nav-h) + 24px); display:grid; gap:var(--sp-5); }
.f-prev{
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--sd-2); padding:1.05rem;
}
.f-prev h2{ font-size:var(--fs-sm); font-weight:800; letter-spacing:0; margin:0 0 .8em; }
/* 预览台：定高、宽随画（横竖混排不用 aspect-ratio + contain，填充率只有 0.72）。
   棋盘格走共享类 .chk —— 透明底投稿一眼可见。 */
.f-stage{
  min-height:210px; padding:14px; display:flex; align-items:center; justify-content:center;
  border:var(--bw) solid var(--ink); border-radius:var(--r-md); overflow:hidden;
}
.f-stage img{ max-width:100%; max-height:300px; width:auto; height:auto; display:block; }
.f-stage-msg{
  margin:0; max-width:16em; text-align:center;
  font-size:var(--fs-xs); color:var(--text-2); line-height:1.7;
}
.f-prev-meta{ margin:1em 0 0; display:grid; gap:.55em; }
.f-prev-meta div{ display:grid; grid-template-columns:3.2em 1fr; gap:.8em; align-items:baseline; }
.f-prev-meta dt{ font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }
.f-prev-meta dd{ margin:0; font-size:var(--fs-sm); font-weight:700; color:var(--ink); overflow-wrap:anywhere; }

/* 结果区：投出去之后才出现 */
.f-out{
  margin-top:clamp(24px,3vw,36px); padding:clamp(20px,2.6vw,32px);
  background:var(--cream); border:var(--bw) solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--sd-2);
}
.f-out .f-out-t{ margin:0; font-size:var(--fs-lg); font-weight:900; letter-spacing:0; }
.f-out p{ margin:.7em 0 0; font-size:var(--fs-md); line-height:1.85; color:var(--text-2); }
.f-out p b{ color:var(--ink); }
/* 兜底通道：云端连不上时才出现，用它生成一段能自己发出去的文本 */
.f-text{
  width:100%; margin-top:1em; min-height:9.5em; resize:vertical;
  background:var(--paper); border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  padding:.9em 1em; font-family:var(--mono); font-size:var(--fs-sm); line-height:1.8; color:var(--ink);
}
.f-out-btns{ margin-top:1.1em; display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
.f-live{ margin:1em 0 0; min-height:1.6em; font-family:var(--mono); font-size:var(--fs-xs); color:var(--text-2); }

/* 投稿须知：墨点列项（同 about 页的措辞层级，不另起一套） */
.f-rules{ margin:1.2em 0 0; display:grid; gap:.7em; max-width:38em; }
.f-rules li{
  position:relative; padding-left:1.5em;
  color:var(--text-2); line-height:1.85; font-size:var(--fs-md);
}
.f-rules li::before{
  content:""; position:absolute; left:.2em; top:.85em; width:8px; height:2px; background:var(--ink);
}

/* 贡献榜：表用共享基类（墨底表头、2px 墨线），这里只管不占满整行 */
#boardTable{ max-width:560px; }

@media (max-width:980px){
  .f-grid{ grid-template-columns:1fr; }
  .f-side{ position:static; }
  /* 单列时表单卡右缘直达视口边，给圆形浮钮留 48px 内边距，
     输入框和提交按钮不会落到浮钮下面。 */
  .f-card{ padding-right:48px; }
}