/* Admin › Sync (Thomas, 2026-10-12: "Something else to add to the admin Panel, Sync control"; "Approved as drawn").
   The page is drawn by js/ecr-sync.js inside Admin, so it rides ecr-admin.css's cards, segments, inputs and switch,
   and adds only what is its own here. Every colour is var(--dk-<role>, <light>) like the rest of the staff app
   (test/dark-mode.test.js). ECR only: tools/build-driver-site.mjs strips this stylesheet from Sam's page. */

.sy-page { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sy-card h3 { margin: 6px 0 0; font: 700 12.5px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--dk-accent-text, var(--purple)); }
.sy-card p { margin: 0; }
.sy-lead { max-width: 72ch; }
.sy-small { font-size: 12.5px; color: var(--dk-ink-2, #56666f); }
.sy-small.sy-bad { color: var(--dk-bad-text, #9a2617); font-weight: 700; }
.sy-block { display: block; font-weight: 400; margin-top: 2px; }
.sy-span { grid-column: 1 / -1; }
.sy-gap { margin-top: 4px; }
.sy-num { font-variant-numeric: tabular-nums; }
.sy-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sy-inline-row { align-items: center; }
.sy-inline { font-weight: 700; }
.sy-t { color: var(--dk-accent-text-2, var(--purple-dark)); }

/* Pills: what the page says at a glance. */
.sy-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-pills.sy-tight { margin-top: 4px; }
.sy-pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.sy-pill.sy-off { background: var(--dk-off-soft, #eceff1); color: var(--dk-off-text, #46555e); }
.sy-pill.sy-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); }
.sy-pill.sy-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); }
.sy-pill.sy-info { background: var(--dk-info-soft, #e1eef8); color: var(--dk-info-text, #0b4a75); }
.sy-pill.sy-accent { background: var(--dk-accent-soft, #ece8f6); color: var(--dk-accent-text-2, var(--purple-dark)); }
.sy-dirpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; max-width: 100%;
  background: var(--dk-accent-soft, #ece8f6); color: var(--dk-accent-text-2, var(--purple-dark)); }
.sy-dirpill.sy-off { background: var(--dk-off-soft, #eceff1); color: var(--dk-off-text, #46555e); }
.sy-dirpill.sy-in { background: var(--dk-info-soft, #e1eef8); color: var(--dk-info-text, #0b4a75); }
.sy-dirpill svg { flex-shrink: 0; }

/* Messages, on top of .adm-msg. */
.sy-msg { font-weight: 400; }
.sy-msg > b:first-child { display: block; margin-bottom: 2px; }
.sy-msg.sy-msg-bad { background: var(--dk-bad-soft, #fdf0ee); color: var(--dk-bad-text, #9a2617); border: 1px solid var(--dk-bad-line, #f2d3cf); }
.sy-msg.sy-msg-warn { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line, #e6c97a); }
.sy-msg.sy-msg-info, .sy-msg.sy-msg-note { background: var(--dk-info-soft, #e1eef8); color: var(--dk-info-text, #0b4a75); }
.sy-msg ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.sy-inmsg { display: inline-block; padding: 6px 10px; font-weight: 700; }
.sy-paused { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.sy-paused > div > b:first-child { display: block; margin-bottom: 2px; }

/* A change: the old value, an arrow, the new value. */
.sy-chg { display: inline; overflow-wrap: anywhere; }
.sy-was { color: var(--dk-ink-2, #56666f); }
.sy-now { color: var(--dk-ink, #1a1a1a); font-weight: 700; }
.sy-arr { color: var(--dk-accent-text, var(--purple)); font-weight: 700; padding: 0 4px; }
.sy-blank { font-style: italic; font-weight: 400; color: var(--dk-bad-text, #9a2617); }
.sy-tablewrap { overflow-x: auto; max-width: 100%; }
.sy-dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sy-dtable th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dk-ink-2, #56666f); padding: 4px 8px 6px 0; font-weight: 700; }
.sy-dtable td { padding: 6px 8px 6px 0; border-top: 1px solid var(--dk-line, #d5dde0); vertical-align: top; overflow-wrap: anywhere; color: var(--dk-ink, #1a1a1a); }

/* Buttons: .lv-btn from ecr-leads.css; the quiet one and the small one are this page's. */
.sy-page .lv-btn.secondary { border-color: var(--dk-line, #d5dde0); color: var(--dk-accent-text-2, var(--purple-dark)); background: var(--dk-surface, #fff); text-decoration: none; }
.sy-page a.lv-btn { text-decoration: none; }
.sy-page .lv-btn.secondary:not(:disabled):hover { background: var(--purple); color: #fff; }
.sy-page .lv-btn.sy-sm { min-height: 32px; padding: 0 11px; font-size: 12.5px; }
.sy-page .lv-btn svg { flex-shrink: 0; }

/* 1. What ECR Connect never does. */
.sy-nevercard { background: var(--dk-tint-accent, #f6f4fb); border: 1.5px solid var(--dk-accent-line, var(--purple)); }
.sy-never { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.sy-never li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.sy-never b { color: var(--dk-ink, #1a1a1a); }
.sy-mk { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; margin-top: 1px;
  background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }

/* 2. Direction. */
.sy-dirgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.sy-diropt { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 10px; cursor: pointer; min-width: 0;
  border: 1.5px solid var(--dk-line, #d5dde0); background: var(--dk-surface, #fff); }
.sy-diropt:hover { border-color: var(--dk-accent-line, var(--purple)); }
.sy-diropt.sy-on { border-color: var(--dk-accent-line, var(--purple)); background: var(--dk-tint-accent, #f6f4fb); box-shadow: inset 0 0 0 1px var(--dk-accent-line, var(--purple)); }
.sy-diropt input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--purple); }
.sy-diropt input:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: 2px; }
.sy-dirname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--dk-ink, #1a1a1a); }
.sy-dirname svg { color: var(--dk-accent-text, var(--purple)); }
.sy-dirline { display: block; color: var(--dk-ink-2, #56666f); margin-top: 3px; }

/* 3. What syncs. */
.sy-syncs { display: grid; }
.sy-syrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.7fr); gap: 14px; padding: 10px 0; align-items: start;
  border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-syrow.sy-head { border-top: 0; padding-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dk-ink-2, #56666f); font-weight: 700; }
.sy-syrow.sy-sep { border-top: 2px solid var(--dk-line, #d5dde0); }
.sy-what b { display: block; color: var(--dk-ink, #1a1a1a); }

/* 4. Before an overwrite, and Waiting for you. */
.sy-ow { display: grid; }
.sy-owrow { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-owrow:first-child { border-top: 0; padding-top: 0; }
.sy-owlbl { flex: 1 1 280px; min-width: 0; display: grid; gap: 3px; }
.sy-owlbl b { color: var(--dk-ink, #1a1a1a); }
.sy-always { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 10px;
  background: var(--dk-tint, #eef2f4); color: var(--dk-ink, #1a1a1a); }
.sy-wt { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sy-wtitem { border: 1px solid var(--dk-line, #d5dde0); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px; align-items: center; background: var(--dk-surface, #fff); }
.sy-wtitem.sy-done { background: var(--dk-tint, #eef2f4); }
.sy-wttop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sy-wttop b { color: var(--dk-ink, #1a1a1a); }
.sy-wtvals { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 6px 0 0; font-size: 13.5px; }
.sy-wtvals dt { color: var(--dk-ink-2, #56666f); }
.sy-wtvals dd { margin: 0; overflow-wrap: anywhere; color: var(--dk-ink, #1a1a1a); }
.sy-wtacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sy-wtresult { grid-column: 1 / -1; display: grid; gap: 8px; }

/* 5. One client at a time. */
.sy-ov { display: grid; }
.sy-ovrow { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.6fr); gap: 10px 16px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-ovrow:first-child { border-top: 0; }
.sy-ovname b { display: block; color: var(--dk-ink, #1a1a1a); }
.sy-ovacts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sy-confirm { border: 1.5px solid var(--dk-accent-line, var(--purple)); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px;
  background: var(--dk-tint-accent, #f6f4fb); }

/* 6. Change log. */
.sy-logtools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sy-logtools .adm-input, .sy-search { flex: 1 1 220px; min-width: 0; }
.sy-log { margin: 0; padding: 0; list-style: none; }
.sy-log > li { padding: 11px 0; border-top: 1px solid var(--dk-line, #d5dde0); display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; }
.sy-log > li:first-child { border-top: 0; }
.sy-when { color: var(--dk-ink-2, #56666f); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.sy-log b { color: var(--dk-ink, #1a1a1a); }
.sy-why { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 4px; font-size: 12.5px; color: var(--dk-ink-2, #56666f); }
.sy-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.sy-panel { grid-column: 2 / -1; display: grid; gap: 8px; }
.sy-panelstack { display: grid; gap: 8px; }
.sy-log > li.sy-undoline { background: var(--dk-tint, #eef2f4); border-radius: 8px; padding-inline: 10px; }
.sy-log > li.sy-fresh { background: var(--dk-good-soft, #e3f3e8); border-radius: 8px; padding-inline: 10px; }

/* 7. Undo the last changes. */
.sy-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--dk-line, #d5dde0); border-radius: 10px; overflow: hidden; }
.sy-stepper button { width: 40px; height: 40px; border: 0; background: var(--dk-surface, #fff); color: var(--dk-accent-text, var(--purple)); font: 700 18px Helvetica, Arial, sans-serif; cursor: pointer; }
.sy-stepper button:disabled { color: var(--dk-ink-3, #66757d); cursor: not-allowed; }
.sy-stepper button:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.sy-stepper input { width: 56px; height: 40px; border: 0; border-left: 1.5px solid var(--dk-line, #d5dde0); border-right: 1.5px solid var(--dk-line, #d5dde0);
  text-align: center; font: 700 15px Helvetica, Arial, sans-serif; background: var(--dk-surface, #fff); color: var(--dk-ink, #1a1a1a);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.sy-stepper input::-webkit-outer-spin-button, .sy-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sy-stepper input:focus-visible { outline: 3px solid var(--dk-accent-line, var(--purple)); outline-offset: -3px; }
.sy-stepper input:disabled { color: var(--dk-ink-3, #66757d); }
.sy-preview { margin: 0; padding: 0; list-style: none; counter-reset: sypv; border: 1px solid var(--dk-line, #d5dde0); border-radius: 10px; overflow: hidden; }
.sy-preview li { counter-increment: sypv; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-preview li:first-child { border-top: 0; }
.sy-preview li::before { content: counter(sypv); font-weight: 700; color: var(--dk-accent-text, var(--purple)); font-variant-numeric: tabular-nums; }
.sy-preview li.sy-skip { background: var(--dk-tint, #eef2f4); color: var(--dk-ink-2, #56666f); }
.sy-left { margin: 0; padding-left: 18px; display: grid; gap: 4px; }

/* 8. Your QuickBooks copy. */
.sy-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sy-tile { border: 1px solid var(--dk-line, #d5dde0); border-radius: 10px; padding: 10px 12px; background: var(--dk-tint, #eef2f4); display: grid; gap: 2px; min-width: 0; }
.sy-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--dk-ink-2, #56666f); font-weight: 700; }
.sy-v { font: 800 22px/1.15 Raleway, Helvetica, Arial, sans-serif; color: var(--dk-ink, #1a1a1a); font-variant-numeric: lining-nums tabular-nums; }
.sy-s { font-size: 12.5px; color: var(--dk-ink-2, #56666f); }
.sy-where { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--dk-line, #d5dde0); background: var(--dk-surface, #fff); }
.sy-where svg { color: var(--dk-accent-text, var(--purple)); margin-top: 1px; }
.sy-where b { color: var(--dk-ink, #1a1a1a); }
.sy-meter { height: 8px; border-radius: 4px; background: var(--dk-off-soft, #eceff1); overflow: hidden; margin-top: 6px; max-width: 360px; }
.sy-meter i { display: block; height: 100%; min-width: 4px; background: var(--dk-switch-on, #1e7d3c); border-radius: 4px; }
.sy-tl { margin: 0; padding: 0; list-style: none; display: grid; }
.sy-tl li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-tl li:first-child { border-top: 0; }
.sy-night { font-weight: 700; color: var(--dk-ink, #1a1a1a); font-variant-numeric: tabular-nums; }
.sy-pick { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.sy-pick label { font-weight: 700; color: var(--dk-ink, #1a1a1a); }
.sy-pick .adm-input { flex: 1 1 220px; min-width: 0; }
.sy-gone { display: grid; }
.sy-gonerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--dk-line, #d5dde0); }
.sy-gonerow:first-child { border-top: 0; }
.sy-more { grid-column: 1 / -1; display: grid; gap: 10px; }
.sy-cancant { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sy-cc { border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.sy-cc.sy-can { background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.sy-cc.sy-cant { background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); border: 1px solid var(--dk-warn-line, #e6c97a); }
.sy-cc h4 { margin: 0; font: 700 13px Raleway, Helvetica, Arial, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; }
.sy-cc ul { margin: 0; padding-left: 18px; display: grid; gap: 5px; }

/* 9. SharePoint. */
.sy-spgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sy-spset { border: 1px solid var(--dk-line, #d5dde0); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.sy-spset .adm-seg { justify-self: start; }
.sy-spset b { color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.sy-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; color: var(--dk-ink, #1a1a1a); }
.sy-file { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--dk-line, #d5dde0); background: var(--dk-surface, #fff); }
.sy-ic { width: 34px; height: 40px; border-radius: 5px; display: grid; place-items: center; font: 800 10px Helvetica, Arial, sans-serif;
  background: var(--dk-good-soft, #e3f3e8); color: var(--dk-good-text, #155d2c); }
.sy-file b { display: block; color: var(--dk-ink, #1a1a1a); overflow-wrap: anywhere; }
.sy-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 78ch; }
.sy-steps li::marker { font-weight: 700; color: var(--dk-accent-text, var(--purple)); }
.sy-setup { border: 1.5px solid var(--dk-warn-line, #e6c97a); background: var(--dk-warn-soft, #fdf3dc); color: var(--dk-warn-text, #6b4500); border-radius: 10px;
  padding: 14px 16px; display: grid; gap: 10px; }
.sy-setup .sy-steps { color: var(--dk-ink, #1a1a1a); background: var(--dk-surface, #fff); border-radius: 8px; padding: 12px 14px 12px 34px; }
.sy-setup .sy-t { font-size: 15px; color: var(--dk-warn-text, #6b4500); }
.sy-checklist { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.sy-small-card { background: var(--dk-tint, #eef2f4); }

@media (max-width: 1180px) {
  .sy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sy-spgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .sy-never, .sy-dirgrid, .sy-cancant { grid-template-columns: minmax(0, 1fr); }
  .sy-syrow { grid-template-columns: minmax(0, 1fr) auto; }
  .sy-syrow .sy-note { grid-column: 1 / -1; }
  .sy-syrow.sy-head { display: none; }
  .sy-ovrow { grid-template-columns: minmax(0, 1fr) auto; }
  .sy-ovacts { grid-column: 1 / -1; justify-content: flex-start; }
  .sy-log > li { grid-template-columns: minmax(0, 1fr) auto; }
  .sy-log .sy-when { grid-column: 1 / -1; padding-top: 0; }
  .sy-panel { grid-column: 1 / -1; }
  .sy-tl li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .sy-card { padding: 16px; }
  .sy-card h2 { font-size: 20px; }
  .sy-wtitem { grid-template-columns: minmax(0, 1fr); }
  .sy-wtacts { justify-content: flex-start; }
  .sy-gonerow { grid-template-columns: minmax(0, 1fr); }
  .sy-file { grid-template-columns: 34px minmax(0, 1fr); }
  .sy-file .lv-btn { grid-column: 1 / -1; }
  .sy-v { font-size: 20px; }
}