/** * conflict-banner.css — UI for sync conflicts (T12 Phase 3). * * Banner sits at the top of , above the navbar, when unresolved sync * drafts exist. Modal pops over everything when the user clicks Review. * * Class prefix .fly-conflict-* — distinct from existing module prefixes * (.coll-, .suite-, .cof-). Unique ids: #fretly-conflict-banner, #fretly-conflict-modal. * * Token-converted 2026-05-12 — every sizing/spacing/typography value * references fretly-tokens.css so banners scale with the user's * Interface size + Density prefs. */ .fly-conflict-banner { position: sticky; top: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-lg); background: var(--accent-bg, #fff3e6); color: var(--text, #2a2820); border-bottom: var(--border-w, 1px) solid var(--accent, #c85a1a); font-size: var(--font-base); font-weight: var(--weight-medium); } .fly-conflict-count { flex: 1 1 auto; text-align: center; } .fly-conflict-review-btn { flex: 0 0 auto; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md, 10px); border: var(--border-w, 1px) solid var(--accent, #c85a1a); background: var(--accent, #c85a1a); color: #fff; font-size: var(--font-sm); font-weight: var(--weight-semibold); cursor: pointer; } .fly-conflict-review-btn:hover { filter: brightness(1.05); } /* ── Modal ──────────────────────────────────────────────────────────── */ .fly-conflict-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9100; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-2xl) var(--space-lg); overflow-y: auto; } .fly-conflict-modal { width: min(78.5714rem, 100%); /* ~1100 px at scale 1 */ background: var(--surface, #fff); border: var(--border-w, 1px) solid var(--border, #d8d4c8); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg, var(--shadow)); overflow: hidden; display: flex; flex-direction: column; } .fly-conflict-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); border-bottom: var(--border-w, 1px) solid var(--border, #d8d4c8); background: var(--bg-2, #f5f1e8); } .fly-conflict-modal-header h2 { margin: 0; font-size: var(--font-lg); } .fly-conflict-modal-close { background: transparent; border: 0; font-size: var(--font-2xl); line-height: 1; cursor: pointer; color: var(--text-2, #565249); padding: 0 var(--space-sm); } .fly-conflict-modal-close:hover { color: var(--text); } .fly-conflict-list { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); } .fly-conflict-row { border: var(--border-w, 1px) solid var(--border, #d8d4c8); border-radius: var(--radius-md, 10px); padding: var(--space-md); background: var(--bg-2, #f5f1e8); } .fly-conflict-row-title { margin: 0 0 var(--space-sm) 0; font-size: var(--font-md, 15px); color: var(--text); } .fly-conflict-panes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-sm); } @media (max-width: 700px) { .fly-conflict-panes { grid-template-columns: 1fr; } } .fly-conflict-pane { border: var(--border-w, 1px) solid var(--border, #d8d4c8); border-radius: var(--radius-md, 10px); background: var(--surface, #fff); overflow: hidden; } .fly-conflict-pane-label { padding: var(--space-xs) var(--space-sm); background: var(--bg-2, #f5f1e8); border-bottom: var(--border-w, 1px) solid var(--border, #d8d4c8); font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--text-2, #565249); } .fly-conflict-pane-body { padding: var(--space-sm); min-height: 2.8571rem; /* ~40 px */ font-size: var(--font-base); } .fly-conflict-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-end; } .fly-conflict-btn { padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md, 10px); border: var(--border-w, 1px) solid var(--border, #d8d4c8); background: var(--surface, #fff); color: var(--text); font-size: var(--font-sm); cursor: pointer; } .fly-conflict-btn:hover { background: var(--bg-2, #f5f1e8); } .fly-conflict-btn--primary { border-color: var(--accent, #c85a1a); background: var(--accent, #c85a1a); color: #fff; } .fly-conflict-btn--primary:hover { filter: brightness(1.05); }