/* drop — 跨页共享：设计 tokens、顶栏、画板框架原子、入场工具
   各页面 <link rel="stylesheet" href="/site.css"> 之后保留自己的 page <style> */
:root {
  --paper: #FAF9F6;
  --ink: #1B1B21;
  --ink-deep: #141419;
  --cinder: #8B867E;
  --ember: #FB5A1E;
  --ember-deep: #EC3D07;
  --ember-light: #FF8A50;
  --ember-reader: #C2410C; /* 纸面长链接正文橙：比 ember-deep 更深，保对比度 */
  --ember-tint: rgba(251, 90, 30, .045);
  --hairline: rgba(27, 27, 33, .14);
  --hairline-soft: rgba(27, 27, 33, .1);
  --raise: #FFFFFF;
  --danger: #C0392B;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Helvetica Neue", -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* ---------- 顶栏 ----------
   右簇两层：导航 chip（hover 浮现描边，当前页挂橙点）→ 身份簇（发丝竖线 + 用户名 + 退出）。 */
.bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; row-gap: 10px; flex-wrap: wrap; padding: 0 4px 14px;
}
.wordmark { font-size: 1.3rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink); text-decoration: none; }
.wordmark em { font-style: normal; color: var(--ember); }
.bar-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-family: var(--mono); font-size: .8rem; }
.bar-right a { text-decoration: none; }
.cluster { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.chip {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px; color: var(--ink);
  box-shadow: inset 0 0 0 1px transparent;
  transition: color .18s ease, box-shadow .18s ease, background .18s ease;
}
.chip:hover { color: var(--ember); box-shadow: inset 0 0 0 1px rgba(27, 27, 33, .3); }
.chip[aria-current="page"] {
  background: rgba(27, 27, 33, .06); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(27, 27, 33, .14);
}
.chip[aria-current="page"]:hover { color: var(--ink); background: rgba(27, 27, 33, .09); }
.chip-mute { color: var(--cinder); }
.chip-mute:hover { color: var(--ember); }
/* 语言切换：<button> 需抹掉浏览器默认外观才能与 .chip 的 <a> 视觉对齐 */
.chip-lang {
  font: inherit; background: none; border: 0; cursor: pointer;
  color: var(--cinder); text-decoration: none;
}
.chip-lang:hover { color: var(--ember); }
.bar-sep { width: 1px; height: 13px; background: var(--hairline); margin: 0 5px; }
.who { color: var(--cinder); padding: 0 2px; }

.btn-bar {
  padding: 6px 16px; border-radius: 999px; font-weight: 600; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(27, 27, 33, .3);
  transition: color .18s ease, box-shadow .18s ease;
}
.btn-bar:hover { color: var(--ember); box-shadow: inset 0 0 0 1.5px var(--ember); }

/* ---------- 画板框架原子（首页画布用） ----------
   参考 cloudflare.com/drop：虚线框 + 小方块角点，整体弱化，退到纸面后景 */
.frame { position: absolute; inset: -13px; border: 1px dashed rgba(27, 27, 33, .1); pointer-events: none; }
.frame i {
  position: absolute; width: 7px; height: 7px;
  border: 1px solid rgba(27, 27, 33, .22); background: var(--paper);
}
.frame i:nth-child(1) { top: -4px; left: -4px; }
.frame i:nth-child(2) { top: -4px; right: -4px; }
.frame i:nth-child(3) { bottom: -4px; left: -4px; }
.frame i:nth-child(4) { bottom: -4px; right: -4px; }

/* ---------- 跨页通用 ---------- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
input:focus-visible, select:focus-visible {
  outline: none; border-color: var(--ember) !important;
  box-shadow: 0 0 0 3px rgba(251, 90, 30, .15);
}
/* twoStep 的「取消」按钮 clone 自原按钮的类（del / mini-btn danger…），
   hover 收回中性色，避免取消被误读成危险操作（优先级压过各页 danger hover） */
button.cancel:hover { border-color: var(--cinder) !important; color: var(--ink) !important; }

/* ---------- 锁 pill（公开/私有状态，/b 卡片与列表、/admin 可见性列共用） ----------
   细线 SVG 锁图标 + 文字：公开 = 开锁灰描边；私有 = 闭锁橙（tint 底 + ember 描边）。
   aria-checked 由 JS 维护；[readonly] 为纯展示态（管理页可见性列，不可点击）。 */
.lock-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .74rem; line-height: 1;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px solid var(--hairline); background: transparent; color: var(--cinder);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lock-pill svg { flex-shrink: 0; }
.lock-pill:hover { border-color: rgba(27, 27, 33, .42); color: var(--ink); }
.lock-pill[aria-checked="false"] {
  color: var(--ember-deep); border-color: rgba(251, 90, 30, .5);
  background: var(--ember-tint); font-weight: 700;
}
.lock-pill[aria-checked="false"]:hover { border-color: var(--ember); }
.lock-pill:disabled { opacity: .45; cursor: default; }
.lock-pill[readonly] { cursor: default; }
.lock-pill[readonly]:hover { border-color: var(--hairline); color: var(--cinder); }
.lock-pill[readonly][aria-checked="false"]:hover { color: var(--ember-deep); border-color: rgba(251, 90, 30, .5); }

/* ---------- 展板历史版本行（/admin 版本面板与 /b 历史浮窗共用） ----------
   版本时间线：左侧 1px 发丝竖轨，版本号 pill 作节点压在轨上，编码「这是有序序列」；
   首尾行轨道止于节点中心（渲染时由 JS 加 rail-start / rail-end）。 */
.vrow { display: flex; align-items: center; gap: 8px 14px; padding: 12px 0;
  position: relative; border-radius: 10px; transition: background .15s ease; }
.vrow:hover { background: var(--ember-tint); }
.vcol { flex: none; width: 46px; align-self: stretch; display: flex; align-items: center;
  justify-content: center; position: relative; }
.vcol::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--hairline); }
.vrow.rail-start .vcol::before { top: 50%; }
.vrow.rail-end .vcol::before { bottom: 50%; }
.vtag { position: relative; min-width: 34px; padding: 2px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid rgba(251, 90, 30, .5); color: var(--ember);
  font-family: var(--mono); font-size: .68rem; font-weight: 700; text-align: center; white-space: nowrap; }
/* 状态旗标：与版本号分离——tag 表身份，flag 表状态 */
.vflag { font-family: var(--mono); font-size: .66rem; font-weight: 700; border-radius: 999px;
  padding: 2px 9px; white-space: nowrap; }
.vflag.show { color: #FFF; background: var(--ember); }
.vflag.del { color: var(--danger); background: rgba(192, 57, 43, .12); }
.vrow-info { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  flex: 1; min-width: 0; font-family: var(--mono); font-size: .75rem; color: var(--cinder); }
.vrow-info .vname { color: var(--ink); font-weight: 600; max-width: 24em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vrow.deleted .vname { color: var(--cinder); text-decoration: line-through;
  text-decoration-color: rgba(192, 57, 43, .45); }
.vrow-info .vmeta { white-space: nowrap; }
.vrow-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-content: flex-end; flex-shrink: 0; margin-left: auto; }
.vrow-info details { font-size: .7rem; color: var(--cinder); min-width: 0; }
.vrow-info summary { cursor: pointer; user-select: none; }
.vrow-info summary:hover { color: var(--ember); }
.vrow-info pre { max-height: 140px; max-width: min(68vw, 620px); overflow: auto; margin: 6px 0 0;
  padding: 8px 10px; background: var(--raise); border: 1px solid var(--hairline-soft); border-radius: 8px;
  white-space: pre-wrap; word-break: break-all; }

/* ---------- 入场 ----------
   骨架（顶栏/画板框/脚注/子页面主体）不设隐藏态——首帧即所见，打开零等待；
   只有首页画布保留一小段入场编排（见 index.html 内联样式）。 */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
@media (max-width: 640px) {
  .bar { padding-bottom: 10px; row-gap: 8px; }
  /* 窄屏：右簇整组落到第二行，单行横滚（不再 wrap 成悬挂的两级） */
  .bar-right { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; padding-bottom: 2px; }
  .bar-right::-webkit-scrollbar { display: none; }
  .cluster { flex-wrap: nowrap; }
  .chip { flex-shrink: 0; padding: 5px 11px; }
  .bar-sep, .who, .btn-bar { flex-shrink: 0; }
  .frame { inset: -8px; }
  .frame i { display: none; }
}