/* ===== main.css · 前台（日式揭示板） =====
   深蓝抬头条 → 白纸板面（投稿表单 + 留言行）→ 深蓝页脚状态栏
   留言行是扁平行：单行抬头 + 正文，1px 线分隔，无阴影无圆角
*/

/* ---- 深蓝抬头条（保持低亮度，与浅色底栏形成上下不对称的装帧） ---- */
.site-header {
  background: var(--sea-900);
  border-bottom: 1px solid var(--sea-800);
}
.header-inner {
  display: flex;
  align-items: center;
  padding-top: var(--sp-2); /* 徽章放大后收紧上下内边距，保持条高不变 */
  padding-bottom: var(--sp-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
/* 徽章源图 358×358 里真正的图案只占 231×250（四周是透明留白，且左右/上下不对称），
   所以直接设 width 会让可见图案再小掉三分之一、放大后还会偏心；
   此处固定尺寸、在牌内放大并按需裁切，再用位移把图案拉回正中。
   注：条上已不需要白纸承托——logo.png 的墨色已按顶栏底色 #102039 预替换
   （见 scripts/recolor-logo.py），墨色与条底融为一体，只留白色图案。 */
.logo-link {
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  transition: opacity var(--dur);
}
.logo-link:hover { opacity: .85; }
/* 「logo 白底」开启时：给徽章加一块纸色承托牌（可选设置，默认关闭） */
.logo-link.has-plate {
  background: var(--paper);
  border: 1px solid var(--sea-700);
  padding: 3px;
}
.logo-link img {
  width: 56px;
  height: auto;
  /* 位移量由源图实际像素边界算得：留白不对称（左 55 / 右 72、上 40 / 下 68）
     会让放大后的图案偏左约 2px、偏上约 3.2px，故反向补偿。 */
  transform: translate(2px, 3.2px) scale(1.42);
  transform-origin: center;
  display: block;
}
.site-title { min-width: 0; }
.site-title h1 {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: .05em;
  color: #fff;
}
.site-sub {
  margin: 1px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--sea-300);
  letter-spacing: .02em;
}

/* ---- 主体与板面 ---- */
main.container {
  flex: 1;
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
}
.board {
  background: var(--paper);
  border: 1px solid var(--sea-800);
}
/* 板面内部：卡片自身不再画纸面与边框（板面已提供） */
.board .card {
  background: transparent;
  border: 0;
}

/* ---- 投稿表单（板面上方的表单条：略深纸色 + 底线，与留言行分开） ---- */
.board .composer {
  padding: var(--sp-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--sea-800);
}
.composer-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
}
/* 块光标：仅在投稿区聚焦时闪烁，非聚焦静止不显示 */
.composer-title::after {
  content: '█';
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: .8em;
  color: var(--sea-600);
  opacity: 0;
}
.composer:focus-within .composer-title::after {
  opacity: 1;
  animation: cursor-blink 1.1s steps(1, end) infinite;
}

.composer-row {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  margin-bottom: var(--sp-4);
}

.avatar-block { position: relative; flex-shrink: 0; }
.avatar-picker {
  width: 56px; height: 56px;
  border: 1px dashed var(--field);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  color: var(--ink-muted);
  font-size: var(--fs-xs);
  line-height: 1.25;
  text-align: center;
  transition: border-color var(--dur), color var(--dur);
}
.avatar-picker:hover { border-color: var(--sea-600); color: var(--sea-800); }
.avatar-picker img { width: 100%; height: 100%; object-fit: cover; }
.avatar-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  border: 1px solid var(--paper-2);
  border-radius: 0;
  background: var(--ink-muted);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.avatar-remove:hover { background: var(--danger); }

.who-block { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

/* 匿名开关：方轨 + 方块滑块 */
.anon-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  min-height: 44px;
}
.anon-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anon-switch-ui {
  width: 36px; height: 20px;
  border: 1px solid var(--field);
  border-radius: 0;
  background: #fff;
  position: relative;
  transition: background-color var(--dur), border-color var(--dur);
  flex-shrink: 0;
}
.anon-switch-ui::after {
  content: '';
  position: absolute;
  top: 1px; left: 1px;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--field);
  transition: transform var(--dur), background-color var(--dur);
}
.anon-switch input:checked + .anon-switch-ui { background: var(--sea-800); border-color: var(--sea-800); }
.anon-switch input:checked + .anon-switch-ui::after { transform: translateX(16px); background: #fff; }
.anon-switch input:focus-visible + .anon-switch-ui { outline: 2px solid var(--sea-600); outline-offset: 2px; }

.body-block textarea { min-height: 128px; }
.body-meta {
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin-top: var(--sp-1);
}

/* ---- 样式工具栏（复古控件条） ---- */
.style-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-2) var(--sp-3);
  background: #fff;
  border: 1px solid var(--rule);
  margin-bottom: var(--sp-4);
}
.tb-group { display: flex; align-items: center; gap: var(--sp-2); }
.tb-row-colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  flex: 1 1 100%; /* 文字色板与背景色板固定同行 */
}
.tb-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  flex-shrink: 0;
}
/* 下拉用正常特异性压制 base 的 16px，不用 !important */
.style-toolbar select.tb-font,
.style-toolbar select.tb-size {
  width: auto;
  font-size: var(--fs-sm);
  padding: 5px var(--sp-2);
  min-height: 34px;
  background: #fff;
}
.style-toolbar select.tb-font { min-width: 104px; }
.style-toolbar select.tb-size { min-width: 70px; font-family: var(--font-mono); }

.tb-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--field);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--ink);
  transition: background-color var(--dur), border-color var(--dur), color var(--dur);
}
.tb-btn:hover { border-color: var(--sea-600); color: var(--sea-800); }
.tb-btn.active { background: var(--sea-800); border-color: var(--sea-800); color: #fff; }
.tb-b { font-weight: 700; }
.tb-i { font-style: italic; }
.tb-u { text-decoration: underline; text-underline-offset: 2px; }

.tb-swatches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tb-swatch {
  width: 20px; height: 20px;
  border: 1px solid rgba(19, 28, 41, .3);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  position: relative;
  background: transparent;
  transition: transform var(--dur);
}
.tb-swatch:hover { transform: scale(1.15); }
.tb-swatch.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--sea-800);
}
.tb-swatch.tb-none {
  background: #fff;
  background-image: linear-gradient(135deg, transparent 44%, var(--danger) 46%, var(--danger) 54%, transparent 56%);
}
.tb-swatch.tb-default {
  background: #fff;
  background-image: linear-gradient(135deg, transparent 44%, var(--ink-muted) 46%, var(--ink-muted) 54%, transparent 56%);
}
.tb-swatch.tb-custom { background: conic-gradient(#8f3131, #8a6a2a, #2f6b4f, #2e5a8c, #4b3f6b, #8f3131); }
.tb-color-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

/* ---- 配图 ---- */
.image-block { margin-bottom: var(--sp-4); }
.image-block-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.image-hint { font-size: var(--fs-xs); color: var(--ink-muted); }
.image-preview { position: relative; margin-top: var(--sp-3); display: inline-block; }
.image-preview img {
  max-width: 100%;
  max-height: 190px;
  border: 1px solid var(--rule);
  border-radius: 0;
  display: block;
}
.image-remove {
  position: absolute;
  top: var(--sp-2); right: var(--sp-2);
  width: 26px; height: 26px;
  border: 1px solid var(--paper);
  border-radius: 0;
  background: rgba(10, 21, 38, .75);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.image-remove:hover { background: var(--danger); }

.btn-icon { width: 15px; height: 15px; flex-shrink: 0; }

/* ---- 提交行 ---- */
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
}
.mode-hint {
  flex: 1;
  font-size: var(--fs-xs);
  color: var(--sea-600);
  text-align: right;
}
.composer-submit { padding: 0 var(--sp-6); letter-spacing: .14em; }

/* ---- 留言行（揭示板扁平行） ---- */
#message-list { display: block; }

.msg-card {
  padding: var(--sp-5);
  background: transparent;
  border: 0;
}
/* 条目之间用较强较宽的分隔线（2px rule-row），否则长列表会糊成一片；
   线程内的回复线保持 1px 的软档，形成层级 */
#message-list > .msg-card + .msg-card { border-top: 2px solid var(--rule-row); }

/* 置顶：深蓝左规线 + 极淡底纹 + 白底描边标签（不用金色） */
.msg-card.is-pinned {
  background: rgba(27, 49, 83, .05);
  border-left: 3px solid var(--sea-800);
  padding-left: calc(var(--sp-5) - 3px);
}

/* 新发布：一次性落笔提示（opacity/背景，无位移） */
.msg-card.is-new { animation: entry-settle 1000ms ease-out; }
@keyframes entry-settle {
  from { background-color: rgba(46, 90, 140, .14); }
  to { background-color: transparent; }
}

/* 单行抬头：[小方头像] 昵称（匿名/置顶标签）⋯⋯ 日期 */
.msg-head-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.msg-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.msg-nickname {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  word-break: break-word;
}
.badge-anon {
  font-family: var(--font-cjk);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-muted);
  border: 1px solid var(--field);
  border-radius: 0;
  padding: 0 5px;
  line-height: 16px;
  flex-shrink: 0;
}
.badge-pin {
  font-family: var(--font-cjk);
  font-size: 11px;
  font-weight: 500;
  color: var(--sea-800);
  background: var(--paper);
  border: 1px solid var(--sea-800);
  border-radius: 0;
  padding: 0 6px;
  line-height: 16px;
  flex-shrink: 0;
  letter-spacing: .08em;
}
.msg-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 头像：方形小照片 */
.avatar {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-initial {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-cjk);
  font-weight: 600;
  font-size: var(--fs-sm);
  user-select: none;
}

.msg-body {
  margin: var(--sp-2) 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.msg-image {
  display: block;
  max-width: 100%;
  max-height: 360px;
  border: 1px solid var(--rule);
  border-radius: 0;
  margin-top: var(--sp-3);
  cursor: zoom-in;
}

.msg-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 回复按钮右对齐，位于回复分隔线上方 */
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.reply-toggle { color: var(--ink-muted); }
.reply-toggle:hover { color: var(--sea-600); }

/* ---- 回复（线程内分隔线轻一档，与条目分隔线拉开层级） ---- */
.replies { border-top: 1px solid var(--rule-row-soft); }
.reply {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) 0 var(--sp-1);
}
.reply + .reply { border-top: 1px solid var(--rule-row-soft); }
.reply .avatar { width: 22px; height: 22px; }
.reply .avatar-initial { font-size: 11px; }
.reply-main { flex: 1; min-width: 0; }
.reply .msg-head { gap: var(--sp-2); }
.reply .msg-nickname { font-size: var(--fs-sm); }
.reply .msg-time { font-size: 11px; }
.reply .msg-body { margin-top: 2px; } /* 字号不另设：预览多大就渲染多大（默认 16px） */
.reply.has-bg {
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0;
}
.reply.has-bg + .reply { border-top: 0; }

.reply-form {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper-2);
  border: 1px solid var(--field);
  animation: reveal var(--dur) ease-out;
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: none; }
}
.reply-form-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.reply-form-row input { flex: 1; }
.reply-form textarea { min-height: 68px; }
.reply-form .style-toolbar { margin: var(--sp-3) 0; padding: var(--sp-2); background: #fff; }
.reply-form-actions { display: flex; justify-content: flex-end; }

/* ---- 空态 ---- */
.empty-state {
  text-align: center;
  color: var(--ink-muted);
  padding: var(--sp-7) var(--sp-4);
  font-size: var(--fs-sm);
}

/* ---- 深蓝页脚状态栏（与抬头条同色，上下对称收口） ---- */
.site-footer {
  background: var(--sea-900);
  border-top: 1px solid var(--sea-800);
  padding: var(--sp-3) 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--sea-300);
  line-height: 1.9;
}
.site-footer a { color: var(--sea-300); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#board-stats { letter-spacing: .06em; }
#board-stats .sep { padding: 0 var(--sp-2); opacity: .55; }

/* ---- 窄屏 ---- */
@media (max-width: 767px) {
  .header-inner { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
  .brand { gap: var(--sp-2); }
  .logo-link img { width: 44px; }
  .site-title h1 { font-size: 18px; letter-spacing: .03em; }
  .site-sub { font-size: 11px; }

  .composer { padding: var(--sp-4) var(--sp-3); }
  .composer-row { gap: var(--sp-3); }
  .avatar-picker { width: 48px; height: 48px; }

  .style-toolbar { gap: var(--sp-3); }
  .tb-btn { min-width: 44px; min-height: 44px; }
  .tb-swatch { width: 28px; height: 28px; }
  .tb-swatches { gap: 6px; }
  .style-toolbar select.tb-font,
  .style-toolbar select.tb-size { min-height: 44px; }

  .composer-footer { flex-direction: column-reverse; align-items: stretch; }
  .mode-hint { text-align: center; }
  .composer-submit { width: 100%; min-height: 48px; }

  .msg-card { padding: var(--sp-3); }
  .msg-card.is-pinned { padding-left: calc(var(--sp-3) - 3px); }
  .msg-image { max-height: 280px; }
  /* 窄屏隐藏日期中的年月日与星期，仅留 时:分（由 .t-date 承载） */
  .t-date { display: none; }
}

/* 动效底线：块光标在 reduced-motion 下呈现静止可见的终态 */
@media (prefers-reduced-motion: reduce) {
  .composer:focus-within .composer-title::after { animation: none; opacity: 1; }
}