/* 留言墙（/guestbook）的样式。
   只在这个页面加载，所以选择器统一用 gb- 前缀，不必再套一层作用域。
   纸/墨配色从 site.css 继承（--paper / --ink / --ink-60 / --rule / --card），
   这里**一个写死的颜色都不出现** —— 输入框写死 #fff 是后台踩过的坑：
   浅色文字配白底，系统一进暗色就整片不可读。 */

.gb-hero {
  max-width: 46em;
  margin: 0 0 26px;
}

.gb-hero__title {
  margin: 0;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
}

/* 「谁都能写，谁都能改」是这块墙的规则，得在第一眼说清楚，
   所以它紧跟在标题下面，而不是缩成一行小字。 */
.gb-hero__lede {
  max-width: 40em;
  margin: 10px 0 0;
  color: var(--ink-80);
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- 写一条 ---------- */

.gb-compose {
  margin: 0 0 30px;
  padding: 16px 18px 14px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.gb-field {
  display: block;
}

/* 昵称是可选的短字段，不必占满整行 —— 给个宽度上限，
   免得空着一大片、看着像个必填的大框。 */
.gb-field--name {
  max-width: 220px;
}

.gb-field__label {
  display: block;
  margin: 0 0 6px;
  color: var(--ink-60);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* 表单控件一律「继承纸色 + 用墨色写字」，两种主题下都自己说清楚。
   只靠浏览器默认值不行：color-scheme 只影响 UA 的默认底色。 */
.gb-input,
.gb-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 9px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.6;
}

.gb-textarea {
  min-height: 88px;
  resize: vertical;
}

.gb-input::placeholder,
.gb-textarea::placeholder {
  color: var(--ink-55);
}

.gb-input:focus-visible,
.gb-textarea:focus-visible {
  outline: 2px solid var(--ink-55);
  outline-offset: 1px;
  border-color: var(--ink-55);
}

.gb-compose__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

.gb-compose__note {
  flex: 1 1 auto;
  margin: 0;
  color: var(--ink-55);
  font-size: .78rem;
  line-height: 1.5;
}

.gb-hint {
  flex: 0 0 auto;
  min-height: 1.2em;
  color: var(--ink-60);
  font-size: .8rem;
}

.gb-hint.is-error {
  color: #b3261e;
}

.gb-hint.is-ok {
  color: #2f6b4f;
}

/* 暗色下那两个语义色要提亮，否则压在深底上几乎看不见 */
[data-theme="dark"] .gb-hint.is-error {
  color: #ff9b93;
}

[data-theme="dark"] .gb-hint.is-ok {
  color: #86d0a5;
}

/* ---------- 按钮 ---------- */

.gb-btn {
  padding: 8px 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 9px;
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}

.gb-btn:hover {
  border-color: var(--ink-55);
}

.gb-btn:disabled {
  opacity: .5;
  cursor: default;
}

.gb-btn--primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.gb-btn--primary:hover {
  opacity: .86;
}

.gb-btn--primary:disabled:hover {
  opacity: .5;
}

/* ---------- 墙 ---------- */

.gb-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}

.gb-item {
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--rule-soft);
}

.gb-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: .78rem;
  color: var(--ink-55);
}

.gb-item__name {
  color: var(--ink-80);
  font-size: .85rem;
}

/* 没填昵称时占位的「匿名」—— 用弱化的斜体，不跟真昵称抢注意力 */
.gb-item__name.is-anon {
  color: var(--ink-55);
  font-style: italic;
}

.gb-item__badge {
  padding: 1px 7px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: .72rem;
}

/* 正文是这块墙的主角：字号比界面大一点，行距放宽，长文也能读 */
.gb-item__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gb-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 9px;
}

/* 行内小动作按钮：长得像链接，不跟「写上墙」那个主按钮抢视觉重量 */
.gb-act {
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink-60);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}

.gb-act:hover {
  color: var(--ink);
  text-decoration: underline;
}

.gb-act--danger:hover {
  color: #b3261e;
}

[data-theme="dark"] .gb-act--danger:hover {
  color: #ff9b93;
}

/* ---------- 行内编辑器 ---------- */

.gb-editor {
  margin-top: 10px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.gb-editor__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.gb-editor__count {
  flex: 1 1 auto;
  color: var(--ink-55);
  font-size: .78rem;
}

.gb-editor__count.is-over {
  color: #b3261e;
}

[data-theme="dark"] .gb-editor__count.is-over {
  color: #ff9b93;
}

/* ---------- 历史版本 ---------- */

.gb-history {
  margin-top: 12px;
  padding: 4px 0 2px 14px;
  border-left: 2px solid var(--rule);
}

.gb-history__head {
  margin: 0 0 8px;
  color: var(--ink-60);
  font-size: .78rem;
}

.gb-ver {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.gb-ver:last-child {
  border-bottom: 0;
}

.gb-ver__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 3px;
  color: var(--ink-55);
  font-size: .74rem;
}

.gb-ver__text {
  margin: 0;
  color: var(--ink-80);
  font-size: .92rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gb-ver.is-current .gb-ver__text {
  color: var(--ink);
}

/* ---------- 空态与计数 ---------- */

.gb-empty {
  margin: 0;
  padding: 44px 0;
  color: var(--ink-55);
  text-align: center;
  font-size: .95rem;
}

.gb-count {
  margin: 18px 0 0;
  color: var(--ink-55);
  font-size: .78rem;
  text-align: center;
}

@media (max-width: 560px) {
  .gb-compose {
    padding: 14px 14px 12px;
  }

  .gb-field--name {
    max-width: none;
  }

  .gb-compose__foot {
    justify-content: stretch;
  }

  .gb-btn--primary {
    flex: 1 1 100%;
  }
}