/* 总览页「目标」卡。颜色全部走主题变量；视觉沿用首次清单：青色信号线（--azurite）、等宽小标签。
   文字 / 底色配对见 INTEGRATION.md，全部沿用已通过对比度检查的令牌组合。 */

.gc-card {
  --gc-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--azurite);
  border-radius: var(--radius-home);
  background: var(--surface);
  color: var(--ink);
}
.gc-head { display: grid; gap: var(--space-1); min-width: 0; }
.gc-eyebrow { margin: 0; color: var(--azurite); font: 600 var(--text-meta)/var(--lh-ui) var(--gc-mono); letter-spacing: .16em; }
.gc-title { margin: 0; font: 500 var(--text-lg)/var(--lh-heading) var(--serif); }

.gc-note { margin: 0; color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.gc-error { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--error-line); border-radius: var(--radius-sm); background: var(--error-surface); color: var(--error-ink); font-size: var(--text-sm); line-height: var(--lh-ui); overflow-wrap: anywhere; }

/* 空状态 */
.gc-empty { display: grid; justify-items: start; gap: var(--space-3); min-width: 0; }
.gc-empty-text { margin: 0; color: var(--ink-2); font-size: var(--text-base); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.gc-set { min-height: 40px; }

/* 有目标 */
.gc-body { display: grid; gap: var(--space-2); min-width: 0; }
.gc-name { margin: 0; color: var(--ink); font: 600 var(--text-base)/var(--lh-ui) var(--serif); overflow-wrap: anywhere; }
.gc-countdown { margin: 0; color: var(--ink); font-size: var(--text-md); overflow-wrap: anywhere; }
.gc-daily { margin: 0; color: var(--ink-2); font-size: var(--text-sm); overflow-wrap: anywhere; }

.gc-progress { display: flex; align-items: center; gap: var(--space-3); min-width: 0; max-width: 100%; }
.gc-progress-track { flex: 1 1 auto; min-width: 0; height: 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; }
.gc-progress-fill { width: 0; height: 100%; border-radius: var(--radius-pill); background: var(--azurite); }
.gc-progress-text { flex: 0 0 auto; color: var(--ink); font: 600 var(--text-xs)/1 var(--gc-mono); font-variant-numeric: tabular-nums; }

.gc-track { margin: 0; font-size: var(--text-sm); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.gc-track.is-on { color: var(--success-ink); }
.gc-track.is-behind { color: var(--danger); }

.gc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.gc-actions button { min-height: 40px; min-width: 0; max-width: 100%; white-space: normal; }

/* 表单（设置 / 修改） */
.gc-form { display: grid; gap: var(--space-3); min-width: 0; }
.gc-field { display: grid; gap: var(--space-1); min-width: 0; color: var(--ink-2); font-size: var(--text-sm); }
.gc-field input {
  min-height: 40px;
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
}
.gc-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gc-form-actions button { min-height: 40px; min-width: 0; max-width: 100%; white-space: normal; }

/* 结束目标的二次确认 */
.gc-confirm { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: var(--danger-soft); }
.gc-confirm-text { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: var(--lh-ui); overflow-wrap: anywhere; }
.gc-confirm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gc-confirm-actions button { min-height: 40px; min-width: 0; max-width: 100%; white-space: normal; }

.gc-retry { min-height: 40px; justify-self: start; }

@media (max-width: 480px) {
  .gc-card { padding: var(--space-4); }
  .gc-progress { gap: var(--space-2); }
}

@media (prefers-reduced-motion: no-preference) {
  .gc-progress-fill { transition: width var(--motion-fast) var(--motion-ease); }
}