/* mock-panels.css —— 产品界面复刻 M3 / M4 / M5 / M6 内部细节。
   依赖：tokens.css, components.css, mock.css（外壳与表格原子）。 */

/* ================= M3 项目经营利润表 ================= */
.m3__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.m3__card {
  padding: 10px 12px;
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  background: var(--site-surface-3);
}
.m3__card-label { font-size: var(--mock-font-xs); color: var(--site-text-3); }
.m3__card-value {
  margin-top: 2px;
  font-size: var(--mock-font-md);
  font-weight: 600;
  color: var(--site-text-1);
  font-family: var(--site-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ================= M4 分润清账演算 ================= */
.m4__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 12px;
}
.m4__rule {
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  padding: 12px;
  background: var(--site-surface-3);
}
.m4__rule-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mock-font-sm);
  font-weight: 500;
  color: var(--site-text-1);
  margin-bottom: 10px;
}
.m4__rule-title .icon { color: var(--site-accent); }
.m4__rule-item { padding: 8px 0; border-top: 1px dashed var(--site-border); }
.m4__rule-item:first-of-type { border-top: 0; }
.m4__rule-key { font-size: var(--mock-font-xs); color: var(--site-text-3); }
.m4__rule-val { font-size: var(--mock-font-sm); color: var(--site-text-1); margin-top: 2px; }
.m4__rule-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.m4__rule-row .num { font-size: var(--mock-font-sm); color: var(--site-text-1); }
.m4__sum-row td { background: var(--site-surface-3); }
.m4__check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--mock-font-xs);
  color: var(--state-processing-ink);
}

/* ================= M5 移动端 H5 ================= */
.m5 {
  width: 100%;
  max-width: 280px;
  margin-inline: auto;
  background: var(--site-text-1);
  border-radius: 32px;
  padding: 8px;
  box-shadow: var(--site-shadow-mock-light);
}
.m5__screen {
  background: var(--site-surface);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.m5__status {
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: var(--mock-font-xs);
  color: var(--site-text-1);
  font-family: var(--site-font-mono);
}
.m5__title {
  padding: 10px 16px;
  border-bottom: 1px solid var(--site-border);
  font-size: var(--mock-font-md);
  font-weight: 600;
  color: var(--site-text-1);
}
.m5__list { padding: 12px; display: grid; gap: 8px; }
.m5__card {
  border: 1px solid var(--site-border);
  border-radius: var(--site-radius-md);
  padding: 10px;
}
.m5__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m5__card-code { font-size: var(--mock-font-xs); font-family: var(--site-font-mono); color: var(--site-text-1); }
.m5__card-title { font-size: var(--mock-font-xs); color: var(--site-text-2); margin-top: 4px; }
.m5__card-amount {
  font-size: var(--mock-font-sm);
  font-weight: 600;
  font-family: var(--site-font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--site-text-1);
  margin-top: 6px;
}
.m5__tabbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--site-border);
  background: var(--site-surface);
}
.m5__tab {
  display: grid;
  place-items: center;
  gap: 2px;
  padding: 8px 0 10px;
  font-size: 10px;
  color: var(--site-text-3);
}
.m5__tab.is-active { color: var(--site-accent); }
.m5--dark .m5__screen { background: var(--site-ink-900); }
.m5--dark .m5__status,
.m5--dark .m5__title { color: var(--site-ink-text-1); border-color: var(--site-ink-border); }
.m5--dark .m5__card { border-color: var(--site-ink-border); background: var(--site-ink-surface); }
.m5--dark .m5__card-title { color: var(--site-ink-text-2); }
.m5--dark .m5__card-code,
.m5--dark .m5__card-amount { color: var(--site-ink-text-1); }
.m5--dark .m5__tabbar { background: var(--site-ink-900); border-color: var(--site-ink-border); }
.m5--dark .m5__tab { color: var(--site-ink-text-3); }
.m5--dark .m5__tab.is-active { color: var(--site-ink-text-1); }

/* ================= M6 行穿透抽屉 ================= */
.m6 {
  position: absolute;
  inset: 0 0 0 auto;
  width: 460px;
  max-width: 100%;
  background: var(--site-surface);
  border-left: 1px solid var(--site-border);
  box-shadow: var(--site-shadow-mock-light);
  transform: translateX(100%);
  transition: transform var(--site-dur-slow) var(--site-ease);
  display: flex;
  flex-direction: column;
}
.is-step-3 .m6 { transform: translateX(0); }
.m6__head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--site-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.m6__head-title { display: flex; align-items: center; gap: 8px; font-size: var(--mock-font-md); font-weight: 600; color: var(--site-text-1); }
.m6__body { padding: 16px; overflow: auto; }
.m6__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.m6__key { font-size: var(--mock-font-xs); color: var(--site-text-3); }
.m6__val { font-size: var(--mock-font-sm); color: var(--site-text-1); margin-top: 2px; }
.m6__section-title { font-size: var(--mock-font-sm); font-weight: 500; color: var(--site-text-1); margin: 18px 0 10px; }
.m6__timeline { position: relative; padding-left: 18px; }
.m6__timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--site-border);
}
.m6__node { position: relative; padding-bottom: 14px; }
.m6__node::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: var(--site-radius-pill);
  background: var(--site-surface);
  border: 2px solid var(--site-border-strong);
}
.m6__node--done::before { border-color: var(--state-processing); background: var(--state-processing); }
.m6__node--current::before { border-color: var(--state-pending); background: var(--state-pending); }
.m6__node-title { font-size: var(--mock-font-sm); color: var(--site-text-1); }
.m6__node-meta { font-size: var(--mock-font-xs); color: var(--site-text-3); margin-top: 2px; }
.m6__related td { font-size: var(--mock-font-xs); }

@media (max-width: 767px) {
  .m3__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m4__grid { grid-template-columns: minmax(0, 1fr); }
  .m6 { position: static; width: 100%; transform: none; box-shadow: none; border: 1px solid var(--site-border); border-radius: var(--site-radius-md); }
  .is-step-3 .m6 { transform: none; }
}