/* Sync screens (Setup > Sync). Uses the same tokens as every other screen, so every look and both light and dark work. */
.lib-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.lib-synmodes { display: grid; gap: .6rem; }
.lib-synmode { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border: 1.5px solid var(--lib-line); border-radius: 14px; background: var(--lib-surface); cursor: pointer; }
.lib-synmode:hover { border-color: var(--lib-primary); }
.lib-synmode.is-on, .lib-synmode:has(input:checked) { border-color: var(--lib-primary); background: var(--lib-primary-soft); }
.lib-synmode input { margin-top: .25rem; flex: none; }
.lib-synmode:focus-within { outline: 3px solid color-mix(in srgb, var(--lib-primary) 40%, transparent); outline-offset: 2px; }
.lib-syncnew { border-color: var(--lib-primary); background: var(--lib-primary-soft); }
.lib-syncout { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--lib-line); border-radius: 14px; background: var(--lib-surface-2); }
.lib-syncout.is-done .progress { display: none; }
.lib-syncout.is-bad { border-color: var(--lib-danger); }
.lib-synrows > li { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--lib-line); }
.lib-synrows > li:first-child { border-top: 0; }
.lib-synlog li { padding: .3rem 0; overflow-wrap: anywhere; }
.lib-synlog .lib-pill { margin-right: .25rem; }
@media (max-width: 575.98px) {
  .lib-synrows > li { flex-direction: column; align-items: stretch; }
}