/* ACCOUNTING CLARITY (Hal 2026-11-04: "not clear if they both have the same info"; "says a bunch of lines automatic and what the heck").
   To check = decisions only; QuickBooks sync = status only. Same tokens as acct-simple.css; loaded after it. */

/* the Accounting pages fill the window like every main screen, up to the one wide-screen cap (wide-layout.css, Hal 2026-11-04) */
.page:has(> .page-content .acs) > .page-content { max-width: var(--wf-page-max, 1760px); margin-left: auto; margin-right: auto; }

/* To check: what WatchFlow matched by itself is one small line, not a list */
.acs-autoline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; color: var(--off-white); }
.acs-autoline svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ok, #1d7a52); }
.acs-autoline b { color: var(--white); }

/* QuickBooks sync: one status line on top, then one plain row per step; the right side is To check's own count (a link) or a check */
.acs-sync-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border: 1px solid var(--border-light, var(--border)); border-radius: 12px;
  background: var(--bg-raised); font-size: 15px; line-height: 22px; color: var(--off-white); }
.acs-sync-head b { color: var(--white); }
.acs-sync-head > span:not(.acs-pill-qb) { flex: 1 1 220px; min-width: 0; }
.acs-sync-head .acs-link { margin-left: auto; }
.acs-step.acs-sync-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.acs-sync-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.acs-sync-go { font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.acs-sync-go:hover { text-decoration: underline; }
.acs-sync-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ok, #1d7a52); white-space: nowrap; }
.acs-sync-ok svg { width: 16px; height: 16px; flex: 0 0 16px; }
.acs-step-m > .acs-sync-note { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: var(--muted); }
@media (max-width: 600px) {
  .acs-step.acs-sync-row { grid-template-columns: 32px minmax(0, 1fr); row-gap: 8px; }
  .acs-sync-r { grid-column: 2; align-items: flex-start; text-align: left; gap: 0; }
  .acs-sync-go { min-height: 36px; display: inline-flex; align-items: center; }
  .acs-sync-head .acs-link { margin-left: 0; }
}