/**
 * 「在跟的事」（事件卡片）。
 *
 * 只写这一块**自己**的排布：行、进展流水、列表 / 详情两栏。
 * 按钮、输入、弹层外壳、小标题一律复用既有角色（`base.css` / `components.css` 的
 * `.btn` `.input` `.modal` `.side__header`）——`docs/product/UI_PATTERNS.md` 的规矩是
 * 「同一个角色只能有一种长相」，这里不新造第二张脸。
 *
 * 三层地面照 UI_PATTERNS §0：侧栏是「地」，所以面板里的行**不铺纸**（不加背景），
 * 只用一条极淡的分隔；弹层里的行长在「纸」上，才允许有选中态的底色。
 */

/* ---------------------------------------------------------------- 侧栏那一组 */

.cards-panel { display: grid; gap: 6px; }

.cards-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.cards-row__open {
  width: 100%;
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.cards-row__open:hover { background: var(--surface-sunken); }
/* 聚焦环是全局的一种长相（base.css 的 :focus-visible），这里不另造。 */

.cards-row__title {
  font-size: var(--fs-small);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cards-row__detail {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 置顶：一条左边线，不用图标——侧栏这一列已经够挤了。 */
.cards-row.is-pinned .cards-row__open { box-shadow: inset 2px 0 0 var(--accent); }
/* 还没落卡的申请：比已经在跟的事淡一档，点一下记进展就转正。 */
.cards-row.is-virtual .cards-row__title { font-weight: 500; color: var(--text-muted); }
.cards-row.is-done .cards-row__title { color: var(--text-muted); text-decoration: line-through; }
.cards-row.is-selected .cards-row__open { background: var(--surface-sunken); }

/* ---------------------------------------------------------------- 列表 + 详情 */

.cards-modal { width: min(960px, 100%); }

.cards-modal__body {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.8fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 720px) {
  .cards-modal__body { grid-template-columns: 1fr; }
}

.cards-modal__list, .cards-modal__detail { min-width: 0; display: grid; gap: 8px; align-content: start; }

.cards-compose { display: flex; gap: 6px; align-items: center; }
.cards-compose .input { flex: 1 1 auto; min-width: 0; }

/* 详情头也带这件事的身份色记号：与侧栏那一行是同一枚（下面 §身份色 里只写一次尺寸）。 */
.cards-detail__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 7px; }
.cards-detail__head h3 { margin: 0; font-size: var(--fs-title); overflow-wrap: anywhere; }
.cards-detail__meta { font-size: var(--fs-micro); color: var(--text-muted); }

.cards-detail__acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* 状态下拉与旁边两颗工具键同一行，所以不撑满——它是这一行里最次要的一个。 */
.cards-detail__acts .input { width: auto; min-width: 96px; flex: 0 0 auto; }

.cards-detail__note, .cards-detail__empty {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* 进展是一条只增不改的流水：最新在上，每条一行时间戳。不给编辑入口是有意的。 */
.cards-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.cards-log__item {
  display: grid;
  gap: 1px;
  padding: 6px 8px;
  border-left: 2px solid var(--border);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.cards-log__note { font-size: var(--fs-small); }
.cards-log__at { font-size: var(--fs-micro); color: var(--text-muted); }

.cards-detail__foot {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- 身份色 */

/* 一枚色记号。刻意做成实心方角小条而不是圆点：与 UI_PATTERNS §4「三种记号」里
   日程的「实心色条」同一个形状语言，不新造第四种记号。
   记号旁边永远有这件事的名字——颜色不是唯一的区分手段。

   颜色从 --mk-l / --mk-d 两支里由 light-dark() 当场选：主题设「跟随系统」时
   系统翻深色不触发重绘，只发一支色会停在浅色那一版（深色纸上最差 2.10:1，记号等于没有）。
   两支都是 cardMarkColor() 算过的，不是本人挑的原值——原值画在纸上不一定过 3:1。 */
.cards-row__open { grid-template-columns: auto 1fr; column-gap: 7px; }
/* 一枚记号，三处同一个长相：侧栏这一组的行、详情头、迷你月历那一格（后者按 §4 缩到 5px，
   形状语义一字不变）。这里只写一次，两个选择器共用。 */
.cards-row__mark,
.cards-detail__mark {
  grid-row: 1 / span 2;
  align-self: center;
  width: 4px;
  height: 18px;
  border-radius: var(--mark-radius, 2px);
  background: light-dark(var(--mk-l), var(--mk-d));
}
.cards-row.is-virtual .cards-row__mark { background: transparent; box-shadow: inset 0 0 0 1.5px light-dark(var(--mk-l), var(--mk-d)); }

/* 取色器：与日历取色器（.calpick）同一个角色，尺寸也照它，不另造一张脸。 */
.cards-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.cards-swatch {
  width: 44px;
  height: 44px;
  padding: 13px;
  background-clip: content-box;
  border: 0;
  border-radius: var(--radius-xs);
  background: var(--cal-color);
  cursor: pointer;
}

.cards-swatch.is-on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--cal-color); }

/* 0.4.2: a card is a working view of linked records, with an append-only progress timeline. */
.cards-detail { display: grid; gap: 16px; min-width: 0; }
.cards-detail h4 { margin: 0; font-size: var(--fs-small); }
.cards-next { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.cards-next strong { font-size: var(--fs-body); }
.cards-next > span { font-size: var(--fs-small); }
.cards-linked { display: grid; gap: 6px; }
.cards-linked ul { display: grid; list-style: none; padding: 0; margin: 0; }
.cards-record { width: 100%; min-height: 44px; display: grid; gap: 4px; text-align: left; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.cards-record span { overflow-wrap: anywhere; }
.cards-record small { color: var(--text-muted); font-size: var(--fs-micro); }
.cards-record:hover { color: var(--accent); }
.cards-sync { margin: 0 20px; padding: 10px 0; display: grid; gap: 8px; border-bottom: 1px solid var(--border); font-size: var(--fs-small); overflow-wrap: anywhere; }
.cards-sync ul { margin: 0; padding: 0; list-style: none; }
.cards-sync li { display: grid; gap: 4px; padding: 8px 0; }
.cards-customize summary { cursor: pointer; min-height: 44px; align-content: center; font-size: var(--fs-small); color: var(--text-muted); }
@media (max-width: 600px) {
  .cards-modal__body { grid-template-columns: minmax(0, 1fr); }
  .cards-compose { flex-wrap: wrap; }
  .cards-compose .input { flex-basis: 100%; }
}