/* ============================================================
   庭院 · 组件
   原则：没有卡片墙。分层靠发丝线与极淡的夜雾，不靠边框和高亮。
   ============================================================ */

/* ── 段落标题 ────────────────────────────────────────────── */
.block { margin-bottom: var(--s6); }
.block:last-child { margin-bottom: 0; }

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.block__title {
  flex: none;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: var(--t-md);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--moon-100);
}
/* 标题行右边的按钮永远不换行 —— 两个字被拆成两行看着像坏了 */
.block__head .btn { flex: none; white-space: nowrap; }
.block__note { font-size: var(--t-sm); color: var(--moon-400); letter-spacing: 0.04em; }

/* ── 面板：一层夜雾 ──────────────────────────────────────── */
.panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--s-1);
  padding: var(--s4) var(--s4);
}
.panel--flush { padding: 0; overflow: hidden; }
.panel--quiet { border-color: transparent; background: none; padding: 0; }

/* ── 状态行 ──────────────────────────────────────────────── */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--s4);
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row__k {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--moon-300);
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  flex: none;
}
.row__k i {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--dot, var(--moon-400));
  box-shadow: 0 0 9px -1px var(--dot, transparent);
}
.row__v { text-align: right; color: var(--moon-100); font-size: var(--t-base); min-width: 0; }
.row__v small { color: var(--moon-400); font-size: var(--t-sm); }
.row__v .sub { display: block; font-size: var(--t-xs); color: var(--moon-400); line-height: 1.6; }

/* 细长的量条。不是 XP 条，只是一条月光。
   flex-basis 100% 让它独占一行，横穿整条状态行。 */
.meter {
  position: relative;
  flex: 1 1 100%;
  height: 1px;
  background: var(--line-2);
  border-radius: 99px;
  margin-top: 10px;
}
.meter__fill {
  position: absolute;
  left: 0; top: -0.5px;
  height: 2px;
  border-radius: 99px;
  background: var(--dot, var(--moon-200));
  box-shadow: 0 0 10px -1px var(--dot, transparent);
  transition: width var(--e3) var(--ease);
  max-width: 100%;
}

/* ── 数字 ────────────────────────────────────────────────── */
.fig {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--moon-100);
}
.fig--big { font-size: var(--t-lg); line-height: 1.2; }
.fig__unit { font-size: var(--t-sm); color: var(--moon-400); margin-left: 3px; }

/* ── 标记 ────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--s-1);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--moon-300);
  white-space: nowrap;
}
.tag i { width: 4px; height: 4px; border-radius: 50%; background: var(--dot, var(--moon-400)); }
.tag--dim { color: var(--moon-400); }
.tag--warm { color: var(--c-glimmer); border-color: rgba(226,189,124,.22); background: var(--c-glimmer-wash); }
.tag--moon  { color: var(--c-moontrace); border-color: rgba(157,146,216,.22); background: var(--c-moontrace-wash); }

/* ── 按钮 ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--s-1);
  color: var(--moon-100);
  font-size: var(--t-sm);
  letter-spacing: 0.10em;
  transition: background var(--e2) var(--ease), border-color var(--e2) var(--ease), transform var(--e1) var(--ease);
}
.btn:hover { background: var(--s-2); border-color: rgba(255,255,255,.22); }
.btn:active { transform: scale(0.985); }
.btn--ghost { border-color: transparent; color: var(--moon-300); padding: 7px 12px; }
.btn--ghost:hover { color: var(--moon-100); background: var(--s-1); border-color: transparent; }
.btn--glow {
  border-color: rgba(226,189,124,.34);
  background: var(--c-glimmer-wash);
  color: var(--c-glimmer);
}
.btn--glow:hover { background: rgba(226,189,124,.16); border-color: rgba(226,189,124,.5); }
.btn--block { width: 100%; }
.btn--sm { padding: 6px 13px; font-size: var(--t-xs); }
.btn[disabled] { opacity: 0.36; pointer-events: none; }

/* ── 输入 ────────────────────────────────────────────────── */
.field {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  color: var(--moon-100);
  font-size: var(--t-base);
  line-height: 1.6;
  transition: border-color var(--e2) var(--ease), background var(--e2) var(--ease);
  resize: none;
}
.field::placeholder { color: var(--moon-400); }
.field:focus { border-color: rgba(226,189,124,.32); background: rgba(0,0,0,.32); }

.record {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s3);
}
.record__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
.record__foot > .record__hint { flex: 1 1 auto; min-width: 0; }
.record__foot > .btn { flex: none; white-space: nowrap; }
.record__hint { font-size: var(--t-xs); color: var(--moon-400); letter-spacing: 0.04em; }

/* ── 事件流 ──────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; }
.feed__item {
  display: flex;
  gap: var(--s3);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.feed__item:last-child { border-bottom: 0; }
.feed__t {
  flex: none;
  width: 46px;
  font-size: var(--t-xs);
  color: var(--moon-400);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.feed__b { min-width: 0; flex: 1 1 auto; }
.feed__x { color: var(--moon-200); font-size: var(--t-base); word-break: break-word; }
.feed__m {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 5px;
  flex-wrap: wrap;
}
.feed__m .tag { font-size: 10.5px; padding: 1px 7px; }
.feed__item--quiet .feed__x { color: var(--moon-300); }

/* ── 任务 ────────────────────────────────────────────────── */
.tasks { display: flex; flex-direction: column; }
.task {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  transition: opacity var(--e3) var(--ease);
}
.task:last-child { border-bottom: 0; }

.task__box {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  transition: border-color var(--e2) var(--ease), background var(--e2) var(--ease);
}
.task:hover .task__box { border-color: var(--c-glimmer); }
.task__box svg { width: 9px; height: 9px; stroke: var(--night-1000); opacity: 0; transition: opacity var(--e2) var(--ease); }
.task.is-done .task__box { background: var(--c-glimmer); border-color: var(--c-glimmer); }
.task.is-done .task__box svg { opacity: 1; }

.task__b { flex: 1 1 auto; min-width: 0; }
.task__t { display: block; color: var(--moon-100); font-size: var(--t-base); line-height: 1.55; }
.task.is-done .task__t { color: var(--moon-400); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.18); }
.task__m { display: flex; align-items: center; gap: var(--s2); margin-top: 4px; flex-wrap: wrap; }
.task__v { font-size: var(--t-sm); color: var(--c-glimmer); font-variant-numeric: tabular-nums; flex: none; }
.task.is-done .task__v { color: var(--moon-400); }

/* ── 空状态：庭院在等待，而不是"暂无数据" ────────────────── */
.void {
  padding: var(--s5) var(--s2);
  text-align: center;
}
.void__line {
  font-family: var(--font-serif);
  color: var(--moon-300);
  font-size: var(--t-base);
  letter-spacing: 0.08em;
  line-height: 1.9;
}
.void__hint { margin-top: var(--s2); font-size: var(--t-sm); color: var(--moon-400); }

/* ── 键值（用于档案/我） ─────────────────────────────────── */
.kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 8px 0; }
.kv__k { color: var(--moon-300); font-size: var(--t-sm); }
.kv__v { color: var(--moon-100); font-size: var(--t-base); font-variant-numeric: tabular-nums; }

/* ── 云上 ────────────────────────────────────────────────── */
/* 一个很小的光点，说清院子现在连没连上云。不是开关，也不闪。 */
.sync__line {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--moon-100);
  font-size: var(--t-base);
  letter-spacing: 0.02em;
}
.sync__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--dot, var(--moon-400));
  box-shadow: 0 0 10px -1px var(--dot, transparent);
}
.sync__note {
  margin-top: 9px;
  color: var(--moon-400);
  font-size: var(--t-xs);
  line-height: 1.8;
}

/* 按钮在等回音的时候，不该还能再点一次 */
.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ── 提示 ────────────────────────────────────────────────── */
/* 定位在庭院本体之内，所以桌面端不会飘到院子外面去。 */
#toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--safe-b) + 96px);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  width: max-content;
  max-width: 100%;
  padding: 0 var(--s4);
}
.toast {
  max-width: min(320px, 100%);
  padding: 8px 17px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(14, 18, 31, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--moon-100);
  font-size: var(--t-sm);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.95);
  animation: riseIn var(--e2) var(--ease-out) both;
}
.toast--warm { color: var(--c-glimmer); border-color: rgba(226,189,124,.3); }
.toast--moon { color: var(--c-moontrace); border-color: rgba(157,146,216,.3); }