/* ConflictModal — rowbie#56, ADR-0009 "Conflict resolution: baseline
   comparison, not magnitude". Blocking: the backdrop has no on:click
   handler (see conflict_modal.rs's doc comment) — this is the one overlay
   in the app that cannot be dismissed without an explicit choice, so its
   backdrop is deliberately inert rather than reusing a page's own
   dismiss-on-click-outside convention. z-index 500 — safely above every
   other overlay in the app (.at-overlay is 300, Dashboard's dropdown
   portals are 200) since a sync conflict can surface while any of those
   are open. */
.cflm-backdrop {
  background: rgba(0,0,0,0.6);
  z-index: 500;
  align-items: center;
  justify-content: center;
}

.cflm-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cflm-title {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--ink);
}

.cflm-sub {
  font-size: var(--fs-12);
  color: var(--ink-mid);
  line-height: 1.5;
  margin-top: -6px;
}

.cflm-choices {
  display: flex;
  gap: 10px;
}

.cflm-choice {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface2);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.15s, background 0.15s;
}
.cflm-choice:hover { border-color: var(--accent); background: var(--accent-lt); }

.cflm-choice-label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--ink-mid);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cflm-choice-value {
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}